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

admin管理员组

文章数量:1415484

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": ";,
  "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 ment on the accepted answer of How to bring back "Add to home" banner for progressive web app after removed the icon from home screen?

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.",
  "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 ment on the accepted answer of How to bring back "Add to home" banner for progressive web app after removed the icon from home screen?

• javascript
• html
• mobile
• progressive-web-apps
• a2hs

Share Improve this question Follow edited Jan 17, 2022 at 14:48 Basj asked Jan 17, 2022 at 13:44 BasjBasj 46.7k110110 gold badges459459 silver badges808808 bronze badges 3

• Take a look at Add to Home screen (A2HS), it should help you further – StackByMe Commented Jan 17, 2022 at 13:47
• Thank you @Reyno. I created what seems to be a valid manifest (see developer.mozilla/en-US/docs/Web/Progressive_web_apps/…), and I added it in the HTML with <link rel="manifest" ...>, but still the popup is not shown, do you know why? – Basj Commented Jan 17, 2022 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. Otherwise I'm not sure what is wrong – StackByMe Commented Jan 17, 2022 at 13:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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.

本文标签：