PWA: Accessible Menu

Chema Oct. 22, 2018

accessible chart ionic django pwa 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 menu menus of the bars and restaurants around you.

The first version is released at the beginning of 2017 although the idea began to be frapped 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 carried the app towards this technology, its own accessibility would multiply, because now it does not require that any app be downloaded.

Solution

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

Accessible Menu Demo in Desktop browser

This app could be converted to PWA because the APIs that are needed are available in most mobile web browsers thanks to its advances 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 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 can 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 can not 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 the 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. Well now the app is much more accessible.

If there is a saying in the IT world that says "First mobile", for us it is now "First PWA". Although not all the App can not be converted to 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? :)

This website uses cookies

The cookies on this website are used to personalize content and analyze traffic. In addition, we share information about your use of the website with web analytics partners, who may combine it with other information you have provided or collected from your use of their services. You accept our cookies if you continue to use our website.
 

I agree See cookies

This website uses cookies

The cookies on this website are used to personalize content and analyze traffic. In addition, we share information about your use of the website with web analytics partners, who may combine it with other information you have provided or collected from your use of their services. You accept our cookies if you continue to use our website.