Angular 5 Service Worker不起作用/不缓存背景图像 [英] Angular 5 Service worker not working / Doesn't cache background-image

问题描述

我无法让我的angular5服务人员上班。我有两个主要问题：

1. 服务工作者不会缓存用作背景图像的资产图像


2. 模拟网络断开连接后，服务人员最初会从缓存中拉出文件（上述非缓存文件除外），但第二次刷新后会出错。

以下是有关我的问题的更详细的报告。您可以在我的

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

1. The service worker doesn't cache assets images that are used as background-images
2. 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:

1. Service worker package is added.
2. angular-cli.json has service-worker set to true
3. Service worker is imported and registered in app.module.ts
4. ngsw-config.json was generated and configured as described in the documentation.
5. 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:

1. GET http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
2. An unknown error occurred when fetching the script.
3. 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...

解决方案

*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

这篇关于Angular 5 Service Worker不起作用/不缓存背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！