PWA: Accessible Menu

Accessible menu was originally an Ionic app available for Android and iOS. Thanks to the facilities that Ionic offers for the development of PWA, now it does not require downloading any App to enjoy the best menu of the day around you.

What's it?

Accessible menu is a webapp created with Ionic 2 for Android and iOS that allows you to know the day and menus of bars and restaurants around you.

The first version is released at the beginning of 2017 although the idea began to carry out much earlier when we saw the needs that the first users of Outbarriers had when they went out and did not have access to the offer because it was inaccessible for blind people.

Thanks to the evolution of the PWA we saw that if we took the app towards this technology, its own accessibility would multiply, because now it does not require any app to be downloaded.

Solution

The result is in app.menuaccesible.com. The landing on product is still menuaccesible.com.

This app could turn into a PWA because the APIs that are needed are available in most mobile web browsers thanks to its progress with HTML5.

The main API requirements are access to the camera to easily upload the menu and geolocation, in order to display the menus of the day around the user.

Technical Challenges

Although Ionic greatly facilitates the task of developing PWA, there have been some complications.

The first one is that version 2 of Ionic is very outdated. Although the preview of Ionic 4 is very advanced, we decided to update the framework to the most recent stable version. This meant a fine job between updates of Angular, TypeScript and the Ionic packages themselves until finding a correct configuration.

Then there is the matter of deep links. The Outbarriers beacons announce the local menu if you pass near it. To do this, send a deep link with which you can access only the menu or the local letter. Configuring and testing this function supposes a medium complexity.

Of course we cannot forget about the Cordova plugins that only work on Android and iOS. This made it necessary to redesign the sharing page that was created to measure.

The styles also had to be played. Before the range of possible screens were practically reduced to mobile. Now it can be accessed from anywhere, including PC. The original design distorted the menus. It has been modified to render well.

Last but not least, the configuration of the web server (nginx) and the relative routes for the assets. For a proper functioning of deep links, we must configure that any URL whose file does not exist, is resolved to "index.html".

Result

We are very happy with the result. Today, the app is much more accessible.

As the IT saying goes, "First mobile", for us it is now "First PWA". Although not all the App can be turned into PWA due to the APIs (such as Bluetooth in depth).

We still have things to improve like the service worker. We have to give it a spin to optimize the use of cache and the offline experience.

We already think (and do) PWA, and you? :)