title: Angular7: Service worker does not function as expected
body: <p>I have an angular service worker and I have cached sounds (mp3 files) so that they can be played offline. Here is the <code>ngsw-config-json</code>:</p>
  
  <pre><code>{
    "index": "/index.html",
    "assetGroups": [{
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
          "/*.svg",
          "/*.eot",
          "/*.woff",
          "/*.woff2",
          "/*.tff"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/sounds/character1/**",
          "/assets/sounds/character2/**"
        ]
      }
    }]
  }
  </code></pre>
  
  <p>In my web app, the sounds play like this:</p>
  
  <pre><code>let audioLink = `/assets/sounds/${character}/${soundURL}`;
  let player = new Audio(audioLink);
  player.play()
  </code></pre>
  
  <p>The website works offline. The HTML, CSS, JS, JSON files are all being cached. But the sounds don't play (when I try playing, the give an error I showed above). </p>
  
  <p>In the Chrome Developer Tools > <em>Application</em> > <em>Cache</em>, I can see that a few of the sounds are there (the paths), but not all. But <em>none</em> of them are working offline.</p>
  
  <p>Sometimes these errors arise:</p>
  
  <ul>
  <li><code>GET "path/to/file" net::ERR_ABORTED 504 (Gateway Timeout)</code></li>
  <li><code>Uncaught (in promise) DOMException</code></li>
  <li><code>Failed to load resource: net::ERR_INTERNET_DISCONNECTED</code></li>
  </ul>
  
  <p>It sometimes also says there is a problem with the <code>manifest.json</code>, but there is nothing wrong as it shows up in the manifest section of the developer tools when online.</p>
  
  <p>Is there any fix to this problem? It's not a Chrome bug, because I am seeing the same behavior in Safari and Firefox too. I know that there is a bug in a new chrome version, and because of this bug, the <code>favicon.ico</code> does not show up offline</p>
  
  <p>Not sure if this will help, but <a href="https://holt-soundboard.github.io/" rel="nofollow noreferrer">here</a> is the link to the hosted web application. If you see the network tab in the Chrome Developer Tools, you can see that the mp3 files are 'downloading', but they don't play offline.</p>
  
  <p>After generating the website for production (<code>ng build --prod --base-href="/"</code>), I looked into the <code>ngsw.json</code> and this is what I saw (some lines removed):</p>
  
  <pre><code>{
    "name": "assets",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "urls": [
      "/assets/sounds/character1/sound one.mp3",
      "/assets/sounds/character1/sound two.mp3",
      "/assets/sounds/character2/sound three.mp3"
      "/assets/sounds/character2/sound four.mp3"
    ],
    "patterns": []
  }
  </code></pre>
  
  <p><a href="https://pastebin.com/g7kMHVP1" rel="nofollow noreferrer">Here</a> is the full generated <code>ngsw.json</code>. Everything has been set to precache rather than cache lazily.</p>
  
  <p>And all these asset URLs are also in the <code>"hashTable"</code> object. I also see them being downloaded in the chrome developer tools (developer tools > network), but I only see some of them in the application cache section (maybe the first 20-30 out of 150 in total).</p>
  
  <p>What am I doing wrong here? Could this possible be an Angular 7 bug? I've seen various other StackOverflow and Reddit questions about a similar issue.</p>
  
  <p>Something I tried was changing </p>
  
  <pre><code>let audioLink = `/assets/sounds/${character}/${soundURL}`;
  </code></pre>
  
  <p>to </p>
  
  <pre><code>let audioLink = `assets/sounds/${character}/${soundURL}`;
  </code></pre>
  
  <p>(removed slash at the start), but that didn't make a difference. </p>
  
  <p>I am completely sure that all the sound file paths are correct because there are abolutely no errors when the site is running online.</p>
  
  <p>Apart from the above, I tried manually changing all the urls and inserting <code>%20</code> where there was supposed to be a space. For example, changing <code>"/assets/sounds/character1/sound one.mp3"</code> to <code>"/assets/sounds/character1/sound%20one.mp3"</code>, but that did not work either.</p>
  
  <p>One thing I've noticed is that if you visit the website for the first time, and wait for all the sounds to download, then immateriality after, close your internet connection and try out the site, all the sounds work. But only for some time usually around 10-15 minutes then they stop working. I have tested on Chrome, Chrome Android, Firefox, Safari, and IOS Safari.</p>
  
  <p><strong>EDIT:</strong> As suggested by someone, I tried changing </p>
  
  <pre><code>{
    "name": "assets",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "urls": [
      "/assets/sounds/character1/sound one.mp3",
      "/assets/sounds/character1/sound two.mp3",
      "/assets/sounds/character2/sound three.mp3"
      "/assets/sounds/character2/sound four.mp3"
    ],
    "patterns": []
  }
  </code></pre>
  
  <p>to </p>
  
  <pre><code>{
    "name": "assets",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "urls": [
      "/assets/sounds/**"
    ],
    "patterns": []
  }
  </code></pre>
  
  <p>but the same problem persists: the sounds are cached offline for maybe 10-15 minutes, after which they do not play offline. I was only able to test this in Chrome and Chrome Android.</p>