Service worker not working for custom domain on Azure Static Web App

Question

I'm currently trying to get PWA functionality to work on an Angular App that's hosted on Azure Static Web Apps. I'm having an issue where the service worker is registered for the xx.azurestaticapps.net, but not for a custom domain I added.

Manifest

   {
  "name": "App Name",
  "short_name": "Name",
  "theme_color": "#09559D",
  "background_color": "#09559D",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [

    ..omitted
  ]
}

Static Web Apps config file

{
    "navigationFallback": {
        "rewrite": "index.html",
        "exclude": ["/assets/*.{png,jpg,gif}", "*.css"]
    },
    "mimeTypes": {
        "json": "application/json",
        "webmanifest": "application/manifest+json"
    }
}

Does anyone have an idea what might be causing this?

Guildenstern70 Guildenstern70 · Accepted Answer · 2021-06-09T15:23:13

Ensure that your build is running in "production" mode.

By default Angular registers the Service Worker only for production sites.

I had your same problem. In my case, Microsoft builder "Oryx" run "yarn build" to build the app, but that script did not have the "--prod" flag.

Changing

package.json

from

"scripts": {
   "start": "ng serve",
   "build": "ng build",
   [...]

},

to

"scripts": {
   "start": "ng serve",
   "build": "ng build --prod",
   [...]

},

solved the problem for me.

Service worker not working for custom domain on Azure Static Web App

1 Answers