title: No matching service worker detected
body: <p>I added a service worker to my application using the command:</p>
  
  <pre><code>ng add @angular/pwa --project ng-zero
  </code></pre>
  
  <p>It responded with this in the terminal:</p>
  
  <pre><code>Installed packages for tooling via npm.
  CREATE ngsw-config.json (441 bytes)
  CREATE src/manifest.json (1071 bytes)
  CREATE src/assets/icons/icon-128x128.png (1253 bytes)
  CREATE src/assets/icons/icon-144x144.png (1394 bytes)
  CREATE src/assets/icons/icon-152x152.png (1427 bytes)
  CREATE src/assets/icons/icon-192x192.png (1790 bytes)
  CREATE src/assets/icons/icon-384x384.png (3557 bytes)
  CREATE src/assets/icons/icon-512x512.png (5008 bytes)
  CREATE src/assets/icons/icon-72x72.png (792 bytes)
  CREATE src/assets/icons/icon-96x96.png (958 bytes)
  UPDATE angular.json (3825 bytes)
  UPDATE package.json (1985 bytes)
  UPDATE src/app/app.module.ts (2042 bytes)
  UPDATE src/index.html (851 bytes)
  </code></pre>
  
  <p>The was no error, only some warnings.</p>
  
  <p>The <code>app.module.ts</code> file now contains:</p>
  
  <pre><code>import { ServiceWorkerModule } from '@angular/service-worker';
  ...
    imports: [
      ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  </code></pre>
  
  <p>And I haven't touched the <code>ngsw-config.json</code> configuration file:</p>
  
  <pre><code>{
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": [
            "/favicon.ico",
            "/index.html",
            "/*.css",
            "/*.js"
          ]
        }
      }, {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/assets/**"
          ]
        }
      }
    ]
  }
  </code></pre>
  
  <p>My <code>main.ts</code> file contains the following:</p>
  
  <pre><code>import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
  .then(
    () =&gt; {
    }
  )
  .catch(error =&gt; {
    console.log(error);
  });
  </code></pre>
  
  <p>And the <code>index.html</code> file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;NgZero&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
    &lt;link rel="manifest" href="manifest.json"&gt;
    &lt;meta name="theme-color" content="#1976d2"&gt;
  &lt;/head&gt;
  
  &lt;body class="mat-app-background"&gt;
    &lt;app-root&gt;Loading...&lt;/app-root&gt;
    &lt;noscript&gt;Please enable JavaScript to continue using this application.&lt;/noscript&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The files under the document root:</p>
  
  <pre><code>$ ll ng-zero/
  total 1,2M
  -rw-rw-r-- 1 stephane  42K oct.  18 13:20 3rdpartylicenses.txt
  -rw-rw-r-- 1 stephane  14K oct.  18 13:20 4.c1db20ef5bd9add4749b.js
  drwxrwxr-x 3 stephane 4,0K oct.  18 13:20 assets/
  -rw-rw-r-- 1 stephane 5,4K oct.  18 13:20 favicon.ico
  -rw-rw-r-- 1 stephane  993 oct.  18 13:20 index.html
  -rw-rw-r-- 1 stephane 847K oct.  18 13:20 main.07ca5763aa8c2813b8c7.js
  -rw-rw-r-- 1 stephane 1,1K oct.  18 13:20 manifest.json
  -rw-rw-r-- 1 stephane 3,2K oct.  18 13:20 ngsw.json
  -rw-rw-r-- 1 stephane 132K oct.  18 13:20 ngsw-worker.js
  -rw-rw-r-- 1 stephane  58K oct.  18 13:20 polyfills.eba1d61bda8f41298ad5.js
  -rw-rw-r-- 1 stephane 2,2K oct.  18 13:20 runtime.fa8fa8286609c1c01b2a.js
  -rw-rw-r-- 1 stephane  519 oct.  18 13:20 safety-worker.js
  -rw-rw-r-- 1 stephane  63K oct.  18 13:20 styles.f57681079a43921c301b.css
  -rw-rw-r-- 1 stephane  519 oct.  18 13:20 worker-basic.min.js
  </code></pre>
  
  <p>I then went to this web page <code>https://angular.io/guide/service-worker-getting-started</code> and could successfully do all the exercises, thus seeing the service worker doing its job when offline.</p>
  
  <p>I also added this source code in the <code>app.component.ts</code> file and I could see it run fine in the mobile browser, as it offered me to load a newer version:</p>
  
  <pre><code>ngOnInit() {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe(() =&gt; {
        if (confirm('A newer version of the application is available. Load the new version ?')) {
          window.location.reload();
        }
      });
    }
  }
  </code></pre>
  
  <p>But when I open the Chrome browser console, go to the <code>Application</code> tab, select the <code>Manifest</code> entry, and click on the <code>Add to homescreen</code> link, the console displays the following error: <code>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</code></p>
  
  <p>In the <code>manifest.json</code> file, the <code>start_url</code> value is <code>/</code></p>
  
  <pre><code>"start_url": "/"
  </code></pre>
  
  <p>I then changed the <code>start_url</code> value to <code>https://stephaneeybert.github.io/stephaneeybert/ng-zero/</code> and redeployed, but it complains the <code>https://stephaneeybert.github.io/stephaneeybert/ng-zero/manifest.json</code> is not found (404).</p>
  
  <p>Here is how I build the application:</p>
  
  <pre><code>ng build --prod --base-href /stephaneeybert/ng-zero/
  </code></pre>
  
  <p>The application is deployed at <code>https://stephaneeybert.github.io/stephaneeybert/ng-zero/</code></p>
  
  <p>I'm on <code>"@angular/cli": "^7.0.0-rc.2"</code> and <code>"@angular/core": "^7.0.0-rc.0"</code></p>