Angular 5 Service worker not working / Doesn't cache background-image

问题

I'm having trouble getting my angular5 service worker to work. I have two main problems:

The service worker doesn't cache assets images that are used as background-images
After simulating a network disconnect the service worker initially pulls files from the cache (except the the aforementioned non cached files), but after a second refresh it runs into an error.

Below is a more detailed report of my problem. You can follow along by cloning a repo I made to highlight this problem located here.

I created the application with the --service-worker tag provided. I then ensured that the 5 steps listed on the Angular documentation here were followed, namely:

Service worker package is added.
angular-cli.json has service-worker set to true
Service worker is imported and registered in app.module.ts
ngsw-config.json was generated and configured as described in the documentation.
Run ng build --prod to generate bundles in my dist folder of the application.

I serve my application using node/express and a server.js document. When I open the application in an incognito window (as recommended by the documentation) I see my service worker gets registered and a cache stores my bundles and index file. It also caches the image that is used in an img tag, but it does not cache the images specified in my css background-image. When I simulate a network problem by checking the offline box on my service worker and then refresh my page, the page displays everything correctly except the parts that require background images.

But the final/main problem occurs when I refresh the application a second time or open another tab (on the same incognito window so the service worker is still registered and cache is still active). At this point I get nothing displayed. The console gives me three error:

GET http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
An unknown error occurred when fetching the script.
Failed to load resource: net::ERR_INTERNET_DISCONNECTED

with the last error coming from ngsw-worker.js. I'm not quite sure what to make of these error. I think maybe a new service worker is trying to be registered but I'm not sure why that would happen...

here is my ng-config.json file as requested:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Any help with this would be greatly appreciated! Thanks all

Update

So I've noticed that when I go to localhost:3000 without the server running I get the error:

Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for http://localhost:3000/assets/images/background-silver-grainy.jpg returned response 504 Gateway Timeout

I also get the errors:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

Comming from all my resources

Update2

I've been testing this project using node to serve an express application that directs all requests to my angular application located in a dist folder (which is generated after running ng build --prod). I decided to test it on a simple http-server. I also found that doing a direct reload breaks my service worker, but if I navigate to another page, then back to my original page, the service worker works (weird but unrelated to this question).

I still can't get the service worker to work with express though...

回答1:

*First, Service Worker works only on --prod builds.

*Secondly, Service Worker can't be served over ng serve, after you make your
ng build --prod you need to serve your app using a different server like:

1- npm install -g http-server// install http-server globally
2- cd dist
3- http-server -p 4200
4- open your browser on localhost:4200

*Thirdly, and most importantly, you have to enable cache in your browser, uncheck "Disable Cache" in your dev tool if you have it checked.

This is your app served and everything loads from service worker offline

来源：https://stackoverflow.com/questions/48569933/angular-5-service-worker-not-working-doesnt-cache-background-image

标签

angular