Angular7: Service worker does not function as expected

Question

I have an angular service worker and I have cached sounds (mp3 files) so that they can be played offline. Here is the ngsw-config-json:

{
  "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/**"
      ]
    }
  }]
}

In my web app, the sounds play like this:

let audioLink = `/assets/sounds/${character}/${soundURL}`;
let player = new Audio(audioLink);
player.play()

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).

In the Chrome Developer Tools > Application > Cache, I can see that a few of the sounds are there (the paths), but not all. But none of them are working offline.

Sometimes these errors arise:

GET "path/to/file" net::ERR_ABORTED 504 (Gateway Timeout)
Uncaught (in promise) DOMException
Failed to load resource: net::ERR_INTERNET_DISCONNECTED

It sometimes also says there is a problem with the manifest.json, but there is nothing wrong as it shows up in the manifest section of the developer tools when online.

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 favicon.ico does not show up offline

Not sure if this will help, but here 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.

After generating the website for production (ng build --prod --base-href="/"), I looked into the ngsw.json and this is what I saw (some lines removed):

{
  "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": []
}

Here is the full generated ngsw.json. Everything has been set to precache rather than cache lazily.

And all these asset URLs are also in the "hashTable" 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).

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.

Something I tried was changing

let audioLink = `/assets/sounds/${character}/${soundURL}`;

to

let audioLink = `assets/sounds/${character}/${soundURL}`;

(removed slash at the start), but that didn't make a difference.

I am completely sure that all the sound file paths are correct because there are abolutely no errors when the site is running online.

Apart from the above, I tried manually changing all the urls and inserting %20 where there was supposed to be a space. For example, changing "/assets/sounds/character1/sound one.mp3" to "/assets/sounds/character1/sound%20one.mp3", but that did not work either.

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.

EDIT: As suggested by someone, I tried changing

{
  "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": []
}

to

{
  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "urls": [
    "/assets/sounds/**"
  ],
  "patterns": []
}

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.

is it possibly using too much space? Looks like your fontawesome icons aren't working either — Matej
– Matej, Commented Jan 3, 2019 at 5:58
@codeninja Thanks, for telling me that, I'll look into it. I'll try keeping only HTML, CSS, and JS files along with the MP3s and see if it is working. — NPython
– NPython, Commented Jan 3, 2019 at 6:16
@codeninja That doesn't seem to be the issue here. I removed all the fonts from the cache, and now chrome is saying the usage is 4.8/7701 mb. One more thing, the sounds work offline for maybe 10-15 minutes after I visit the site, but then after, it throws an error saying that the file is not found — NPython
– NPython, Commented Jan 3, 2019 at 9:24

Matej · Accepted Answer · 2019-01-04 04:06:56Z

3

I've tried making a demo to isolate the error and seems to work. Have noticed some weird url in the app cache: Imgur

Not sure that's causing the issue. You've mentioned that the sound works after you make the device offline, I would guess that is the browser caching not the offline cache. When I tried refreshing the page the sound never works. My guess is the configuration with ngsw or the way ngsw caches the files isn't compatible with the Audio class.

You could test if it works by passing a blob into Audio by fetching it first using @angular/common/http. I'm thinking this as the audio files seem to be in a different cache directory (see screenshot). The css/js files seem to be stored differently for some reason and the audio files only accessible (offline) to angular.

Posting as response as it's too long for a comment

answered Jan 4, 2019 at 4:06

Matej

9,8738 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NPython Over a year ago

I'm not sure if it is the audio class that is causing problems, I just checked by replacing the function I had to play the audio with something like let sound = document.createElement('audio'); sound.src = 'url'; sound.play(); and I'm having the same problem

Matej Over a year ago

I don't think Angular is caching the sound files properly. Where's the source code?

NPython Over a year ago

Here is ngsw-config.json, and here is the generated ngsw.json. The entire generated website is here. I tried making some tweaks to ngsw-config.json to no avail (such as putting /assets/sounds/** in the assetGroups with the name app, but that did not work; it caused the same errors I described in the question).

themthem · Accepted Answer · 2019-03-16 13:54:04Z

I found an answer to my question with the help of @codeninja.

Firstly, the audioLink has to be a direct link to the sound. I'm hosting the site on Github, so the link looks something like this:

let url = `sounds/path_to_sound.mp3`
let audioLink = `https://raw.githubusercontent.com/username/repo_name/master/assets/sounds/${url}`;

Secondly, we cannot just use the sound.play() with Audio() method, we must retrieve the audio using HttpClient. I am not sure why exactly, but codeninja suggested that the way ngsw caches files is incompatible with the Audio class. I'm not sure if this is true, but I found that when offline, I had to use the HttpClient to retrieve the audio blob (demonstrated below). If not, you get a response not Ok error. Even if I gave the direct link https://raw.githubusercontent.com/username/repo_name/master/assets/sounds/direct.mp3, it would throw the same error.

All in all, the code looks like this:

First there is a getSound() function:

getSound(url) {
  return this.http.get(url, {responseType: 'blob'});
}

Then in another function (playSound(url)), we have this:

playSound(url) {
  let audioLink = `https://raw.githubusercontent.com/username/repo_name/master/assets/sounds/${url}`;

  this.getSound(audioLink)
    .subscribe(data => {
      console.log(data);
      // data is an audio blob
      let url = URL.createObjectURL(data);

      let sound = document.createElement('audio');
      sound.src = url;
      sound.play();
    })
}

Additionally, I also had to change my ngsw-config.json. I only changed the "assets" part so I'll show that:

{
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
    "files": [
    ],
    "urls": [
       "https://raw.githubusercontent.com/username/repo_name/master/assets/sounds/**"
    ]
  }
}

I was also unable to get it to work with "prefetch". Although the cached sounds now play offline, they will only play if they have been played before, as it is set to "lazy".

I tested this solution on Chrome, Chrome Android, and Firefox, and it is working fine.

I'm really sorry, but I'm not sure. I was hoping that someone else would be able to explain it to me.

Collectives™ on Stack Overflow

Angular7: Service worker does not function as expected

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related