CODEWITHSUNDEEP
javascripthtmlmobileprogressive-web-appsa2hs
Basj
Basj

Reputation: 46411

Ask the visitor of the website to add a home desktop shortcut on mobile (progressive-web-app)

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?

Upvotes: 3

Views: 7187

Answers (2)

Basj
Basj

Reputation: 46411

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.

Upvotes: 1

Nice18
Nice18

Reputation: 566

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

Upvotes: 2

Related Questions