3

I remember that when I went on certain websites with Chrome Android, there was a bottom popup which displayed something like:

"Want to install a shortcut on your home desktop? Click here."

How to enable this "progressive-web-app" behaviour for Android browsers and iOS browsers, offering to install a desktop shortcut icon?

Here is what I already tried, without success: in the HTML itself:

<link rel="manifest" href="manifest.json" />
<link href="32.png" rel="icon shortcut" sizes="3232" />
<link href="192.png" rel="apple-touch-icon" />

The manifest.json contains:

{
  "short_name": "myapp",
  "name": "myapp",
  "icons": [
    {
      "src": "48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
   /// etc. same for 96, 144, 192, 512
  ],
  "start_url": "https://example.com",
  "background_color": "#000000",
  "display": "standalone",
  "theme_color": "#000000",
  "description": "Test"
}

Note: it's not easy to debug "Add to home screen" on a given website, because the prompt doesn't always show if you already visited the website before, see my comment on the accepted answer of How to bring back "Add to home" banner for progressive web app after removed the icon from home screen?

Basj
  • 41,386
  • 99
  • 383
  • 673
  • Take a look at [Add to Home screen (A2HS)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen), it should help you further – Reyno Jan 17 '22 at 13:47
  • Thank you @Reyno. I created what seems to be a valid manifest (see https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#manifest), and I added it in the HTML with ``, but still the popup is not shown, do you know why? – Basj Jan 17 '22 at 13:51
  • Well first of all this only works over https (with exception of localhost). Chrome also requires you to have a service worker registered. This is al mention [in the article](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#how_do_you_make_an_app_a2hs-ready). Otherwise I'm not sure what is wrong – Reyno Jan 17 '22 at 13:58

2 Answers2

2

Did you register a service worker? You can use the below code if you have not done this yet.

navigator?.serviceWorker.register('/service-worker.js');

You need to create service-worker.js file in the folder containing your main JS file

Nice18
  • 476
  • 2
  • 12
  • Thanks. I did it with an empty `sevice-worker.js` but the install banner still doesn't show. Is there a requirement that the service worker does something specific? – Basj Jan 17 '22 at 16:06
  • Use the Lighthouse tool in a Chromium-based browser's developer tools – Nice18 Jan 18 '22 at 07:06
1

It seems that registering an empty serviceWorker with:

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(() => { console.log('Service Worker Registered'); }); }

is not enough.

For me it was necessary that this worker actually does something and handles the install event:

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('myapp-store').then((cache) => cache.addAll([
      '/index.html'
    ])),
  );
});

self.addEventListener('fetch', (e) => {
  console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then((response) => response || fetch(e.request)),
  );
});

for the Add to home screen bottom popup to be displayed in Chrome for Android.

Note: during your tests, if you dismiss the "Add to home screen" popup once, you will not see it anymore. A "delete browser history" will be required to see it again. Not very handy to debug this A2HS feature :)

Here is a useful working demo from MDN:

https://mdn.github.io/pwa-examples/a2hs/

and in particular the service worker file.

Basj
  • 41,386
  • 99
  • 383
  • 673