How "Add to Homescreen" works?

What is a PWA?

Progressive Web Apps(PWA) use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.

Foodomaa is a Progressive Web Application (PWA).

Add to Homescreen on Chrome on Android Device

When a user loads up your website for the first time, they get a "Add to Homescreen" popup on their screen. This popup is automatically shown when the browser detects that the website is a PWA.

This automatic popup can not be shown again if it is not clicked or ignored. It is also shown only once after 10-15 seconds of user interactivity on the first load of the website. If the user misses clicking the popup or ignores it, later then can click on the three dots buttonon the top-right corner of chrome browser and click "Add to Homescreen"

Add to Homescreen on Safari browser on iOS device

From the Foodomaa release v2.1.0 onwards we support custom iOS Add To Homescreen Popup message.

This can be enabled from Admin > Settings > Customer Application > Show Custom iOS Add To Homescreen Popup

The texts in this message can be configured from Admin > Modules > Translations > Edit your Language translation.

Why a Native iOS Popup cannot be shown?

As of July 2020, iOS does not have full support for PWAs. They still do not support major PWA functionalities like Add to Homescreen and PushAPIs.

Therefore, on an iOS device, the automatic popup for Add to Homescreen cannot be shown.

The user on an iOS device needs to click on the Share Button on Safari and then click on "Add to Homescreen".

Here's a demo for that: