How to handle routing in Angular 5+ Service Workers?

by

TL;DR: I’ve identified at least two issues causing breakage in my case; you can use this build script for now to try my fix, and see the app work offline here. Further testing & pull requests needed.

While I’ve been unable to find a documented answer, here’s what I’ve been able to find thus far, in stepping through the ngsw-worker.js file, as well as reading the @angular/service-worker commit history.

The new ServiceWorkerModule approach to “routing” is to take any “navigation” request (i.e. a non-index route on the same domain), and re-run the handleFetch method, but now pointing to the index.html request (source). This should work fine, given an SPA should be able to redirect to the URL once it has retrieved its cached files for the index.

So the problems that are causing my site above to fail when offline must not be directly related to routing, and I’ve found 2 thus far. Correcting these with a workaround has allowed me to get my app working mostly as expected. With the repro steps in the original question, cityaq is now working, while I’ve reproduced the original, failing site at cityaq-sw-issue.

The issues:

  1. Hosted versions of an Angular app, where the --base-href flag is set from the CLI, list absolute URLs for their service worker resources. When comparing requests to these resources, ngsw-worker.js is expecting relative URLs

    • source
    • I’m fairly confident this issue needs to be resolved, and I’ll be working on a pull request to fix it. It happens because the baseHref is getting included in the resource URLs when ngsw.json is generated (source)

  2. Of the 3 available “states” that the ngsw-worker.js can be in, in my experience, EXISTING_CLIENTS_ONLY seems to bet set incorrectly.

    • source 1, source 2
    • I’m less confident about this change, because I haven’t been able to consistently see what causes this state. However, if & when the service worker enters this state, ngsw-worker.js will no longer attempt to retrieve cached resources (source), and in my testing under what seem to be “correct” circumstances, the app still enters this state even when the only change is removing an internet connection

While I put together a PR for issue #1, and wait for some help understanding issue #2, I’m using a workaround build script to modify ngsw-worker.js after it’s generated. Warning: it’s ugly & definitely modifies the intended “safe” behavior of setting EXISTING_CLIENTS_ONLY. However, for my app, it does allow correct offline performance both when running locally (http-server), and deploying to a live URL (GitHub pages, in my case).

To use the workaround:
(Angular 5, tested w/ Angular 5.2.1)

  1. npm install replace-in-file --save-dev
  2. Include this script in your app, e.g. at build/fix-sw.js
  3. In your package.json:
"scripts": {
   ...
   "sw-build": "ng build --prod && node build/fix-sw",
   "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
   ...
}
  1. To run locally
npm run sw-build
cd dist
http-server -p 8080
  1. And to prepare a build for your live URL, before sending to a server (e.g. with angular-cli-ghpages)
npm run sw-build-live

Leave a Comment

tech