Angular 2+ using sw-precache with github project pages

Question

I have a simple Angular application and I'm trying to make it offline-capable with the help of a Service Worker. I have followed this tutorial on how to set up service workers:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

The SW and the application itself works fine when I run it on my own development machine, but I would like to deploy this on a Github project page: https://zyxon.github.io/AngTodo/

Having uploaded the contents of the dist folder (the same as I do on my development server) the service worker fails to register due to getting 404's on the contents of the assetsfolder. It looks for files in /assets/....

My best guess is that it works on my dev server because the application is hosted in the web server ROOT, but in the case of the Github page it gets hosted in the .../AngTodo directory.

So my question is as follows: how to I specify for sw-precache to output this SW with an appended prefix (/AngTodo/assets/... in my case)?

My sw-precache-config.js is as follows:

module.exports = {
    navigateFallback: '/index.html',
    stripPrefix: 'dist',
    root: 'dist/',
    staticFileGlobs: [
      'dist/index.html',
      'dist/**.js',
      'dist/**.css',
      'dist/assets/**.js',
      'dist/assets/**.css',
      'dist/assets/bootstrap/css/**.css',
      'dist/assets/bootstrap/js/**.js',
      'dist/assets/font-awesome/css/**.css',
      'dist/assets/font-awesome/fonts/*.eot',
      'dist/assets/font-awesome/fonts/*.svg',
      'dist/assets/font-awesome/fonts/*.ttf*',
      'dist/assets/font-awesome/fonts/*.woff*',
      'dist/assets/font-awesome/fonts/*.woff2*',
      'dist/assets/font-awesome/fonts/*.otf',
      'dist/assets/font-awesome/fonts/*.*',
      'dist/assets/font-awesome/fonts/*.eot',
      'dist/assets/font-awesome/less/*.less',
      'dist/assets/font-awesome/scss/*.scss',
      'dist/assets/img/*.png',
      'dist/assets/jquery/*.js',
      'dist/assets/popper/*.js'
    ]
  };

Answer 1

I have found the solution to my problem. Quoting the sw-precache documentation:

replacePrefix [String]

Replaces a specified string at the beginning of path URL's at runtime. Use this option when you are serving static files from a different directory at runtime than you are at build time. For example, if your local files are under dist/app/ but your static asset root is at /public/, you'd strip 'dist/app/' and replace it with '/public/'.

Default: ''

I had to update my sw-precache-config.js:

module.exports = {
    navigateFallback: '/index.html',
    stripPrefix: 'dist/',
    replacePrefix: 'AngTodo/',
    root: 'dist/',
    staticFileGlobs: [
      'dist/index.html',
      'dist/**.js',
      'dist/**.css',
      'dist/assets/**.js',
      'dist/assets/**.css',
      'dist/assets/bootstrap/css/**.css',
      'dist/assets/bootstrap/js/**.js',
      'dist/assets/font-awesome/css/**.css',
      'dist/assets/font-awesome/fonts/*.eot',
      'dist/assets/font-awesome/fonts/*.svg',
      'dist/assets/font-awesome/fonts/*.ttf*',
      'dist/assets/font-awesome/fonts/*.woff*',
      'dist/assets/font-awesome/fonts/*.woff2*',
      'dist/assets/font-awesome/fonts/*.otf',
      'dist/assets/font-awesome/fonts/*.*',
      'dist/assets/font-awesome/fonts/*.eot',
      'dist/assets/font-awesome/less/*.less',
      'dist/assets/font-awesome/scss/*.scss',
      'dist/assets/img/*.png',
      'dist/assets/jquery/*.js',
      'dist/assets/popper/*.js'
    ]
  };

Answer 2

Users can also provide a scope

navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
  scope:'/my-app/'
});

The SW will control any page whose URL begins with a scope and will ignore that don't. So, for the above example the service worker will

/my-app/ --> Control it

/my-app/hello/world --> Control it

/ --> Not control it

/another-app/ --> Not control it

/my-app --> Not control it

This becomes really handy for GitHub pages where multiple projects have the same origin. Scopes let you have a different service worker for each project. The default scope is determined by the location of the SW script.