add to home screen not showing up PWA

问题

I've created a Progressive Web App. It's simple, just an index.html, a folder "images" with favicon etc, a sw.js et a styles.css

My code from manifest.json

{
"lang" : "en",
"name" : "Test",
"short_name" : "Test",
"icons" :   [
  {
  "src": "images/android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/android-chrome-144x144.png",
  "sizes": "144x144",
  "type": "image/png"
}
],
"theme_color" : "#116b20",
"background_color" : "#1a1a1a",
"scope" : "1",
"start_url" : "/test",
"display" : "standalone",
"orientation" : "natural"
   }

and sw.js

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open('static').then(function(cache) {
 cache.addAll(['/test/', '/test/index.html', '/test/manifest.json']);
  })
  );
});
self.addEventListener('activate', function(event) {
 console.log('[Service Worker] Activating Service Worker ....', event);
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
caches.match(event.request).then(function(response) {
  if (response) {
    return response;
  } else {
    return fetch(event.request).then(function(res) {
      return caches.open('dynamic').then(function(cache) {
        cache.put(event.request.url, res.clone());
        return res;
      });
    });
  }
})
  );
});

So... for now, when I go to the site from my smartphone with chrome, everything is displayed correctly, the tab color is good, everythings looks good etc. But I do not have the banner "add to the home screen". By cons when I go in the settings of chrome, and I click on "Add to the home screen" and I validate and then I go to the added shortcut, the site is launched as an app, with the "splash screen" etc.

And when I go on the site from my computer and I watch the debugger in "Application" and manifest, I have the little link "Add to the home screen" Do you know where this may come from ?

Thanks for help !

Edit :

I have advanced a little I modified a little my organization, I created a subdomain, I now have a URL like this: https://subdomain.example.com. Everything is at the root of the subdomain, in the code, the links are in relative (e.g.: "img / name.png"). I do not have any errors in the service worker, when I go on Chrome from my pc, I go to dev tools -> Application -> Manifest tab, and I click on "Add to home screen", the banner to add the site to applications appears well and when I validate, it works well. That's what I have when I go on Chrome dev tools -> Application -> Service worker tab

But on my smartphone, I still don't have the banner offering add to home screen, if someone has an idea...

回答1:

Your site should be in https with a certificate, valid manifest along with a valid service worker showing in chromes application tab, all this makes your site qualified as basic PWA to add it as installable site (it gets created with a google on the fly signed .APK file)

When there is issue with https, certificate or service worker (most case this is the reason ) still an icon will be added to the home screen and will open as app without address bar. Difference is, it’s just a bookmark kind of link. It’s not a .apk file generated by WebApk in chrome. On such scenarios, chrome doesn’t shows the install banner.

Other case might be, it might have come and gone once without you noticin it or it reloaded the page on ur interruption. One first decline by user, chrome doesn’t show again. You can try from a different device and still same tho g happens, it’s one of ur PWA component not configured correctly as mentioned in first para.

Here and here are some official criteria from Google on install banners.

回答2:

Have you checked all of the criteria on the google developer sites?

https://developers.google.com/web/fundamentals/app-install-banners/

Right now I don't see anything in your post that mentions HTTPS - this could be the culprit.

来源：https://stackoverflow.com/questions/49804917/add-to-home-screen-not-showing-up-pwa

标签

service-worker

progressive-web-apps

manifest.json