Search code examples
angularangular6progressive-web-appsangular-pwa

Angular 6 @angular/pwa - sw does not successfuly serve the manifest's start_url


I've built a PWA using angular 6 and the @angular/pwa package.

I've been trying to fix this but no matter what I do, I'm getting the start_url error. I have tried:

  • Using absolute links
  • Making sure the start_url is within the SW's scope (sw is in the main folder)
  • Using the filename "/index.html" as I've seen in other support threads here.
  • Clearing all browser history and cache everytime.
  • Searching through Github issues on the @angular/pwa package
  • Searching google in general for this PWA issue.

Here's my manifest:

{
  "name": "BC Doc View",
  "short_name": "BCview",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",

After this piece of code there's just a bunch of icons, irrelevant to this post.

My configuration for the service worker:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "BC Doc View",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"

My actual produced service worker using the ng build --prod command is 2200 lines of code so I don't think it would be relevant to post that here.

Have no idea what I'm missing on this one.


Solution

  • I've cried with this error for 3 hours, minutes after I post it here I found the solution.

    I've been testing this into a dev subdomain and accessing it like subdomain.domain.com/folder

    Once I've put everything in the main folder I'm getting a 100 PWA score.

    https://i.sstatic.net/BsYBL.png

    I have yet to optimize performance though.