Chrome: Add to homescreen error: Site cannot be installed

Question

Index.html

<link rel="manifest" href="~/manifest.json">

manifest.json

{
  "name": "Board",
  "short_name": "Board",
  "icons": [
    {
      "src": "public/sw-Board-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": ".",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#303030",
  "theme_color": "#212121",
  "description": "SLA Monitoring Tool",
  "dir": "ltr",
  "lang": "en-US"
}

Service Worker Registration

navigator.serviceWorker.register(`Board/service-worker.js`)

I'm running my app on Local IIS so my app runs from http://localhost/Board

This seems to work as the application tab in Chrome is showing Manifest file info and also shows the service-worker being installed.

However, when I click on the "Add to homescreen" link from the Application > Manifest tab I get the following error:

Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

I'm not sure what's going on, but when I didn't have this problem when developing a node express backed pwa.

I'm trying to adjust the start_url and scope properties in the manifest.json but I'm not having any luck.

noogui noogui · Accepted Answer · 2017-12-01T15:46:26

There's a Google codelab Add Your Web App to a User's Home Screen that you can follow.

You can also check the Web App Install Banners and the new The New and Improved Add to Home screen.

Chrome: Add to homescreen error: Site cannot be installed

2 Answers