title: Angular 2+ using sw-precache with github project pages
body: <p>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: </p>
  
  <p><a href="https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers" rel="nofollow noreferrer">https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers</a></p>
  
  <p>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: <a href="https://zyxon.github.io/AngTodo/" rel="nofollow noreferrer">https://zyxon.github.io/AngTodo/</a></p>
  
  <p>Having uploaded the contents of the <code>dist</code> 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 <code>assets</code>folder. It looks for files in <code>/assets/...</code>.</p>
  
  <p>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. </p>
  
  <p>So my question is as follows: how to I specify for sw-precache to output this SW with an appended prefix (<code>/AngTodo/assets/...</code> in my case)?</p>
  
  <p>My <code>sw-precache-config.js</code> is as follows:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>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'
      ]
    };
  </code></pre>