ServiceWorker 不加载图像

Question

我正致力于将 [Service Worker 技术] 实施到站点中。

除 Images 外，一切正常。

根本没有加载图像。

我想知道这是否是预期的行为，或者图像是否应该加载。

为了重现此错误，我重新安装了 Polymer Starter Kit 并在第一个视图中添加了一行 my-view1.html

<img src="../images/cat.png" alt="">

我把图片添加到相应的目录了。

如果您继续并禁用您的 wifi，您会看到该页面仍在按预期加载。只有猫图片不会加载。

我正在使用：

Polymer-CLI v0.17.0
Ubuntu v16.04
node v4.2.6
npm v3.5.2

问题

Images 应该用 Service Worker 加载吗？如果是，我做错了什么？

Answer 1

我刚刚查看了您的演示。 "cat.png" 似乎不在要缓存的项目列表中。我认为你应该手动添加它或者你应该在 sw-precache config.

中添加一个文件过滤器

我认为example usage for sw-precache说明了你所需要的；

  swPrecache.write(`${rootDir}/service-worker.js`, {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'],
    stripPrefix: rootDir
  }, callback);

除 SW 的 Cache Storage 存储 request - response pairs 外，内容并不重要。

The Cache interface provides a storage mechanism for Request / Response object pairs that are cached, for example as part of the ServiceWorker life cycle.

您几乎可以缓存任何内容，可以是图像、字体、声音、html、json、视频或其他。

Answer 2

在sw-precache-config.js中，只需添加要缓存的文件即可：

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/manifest.json',
    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
  ],
  navigateFallback: 'index.html',
};

目前，只有 index.html、manifest.json 和 webcomponents-lite.min.js 被注册为由 service worker 缓存。

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/manifest.json',
    '/images/mycat.png',
    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
  ],
  navigateFallback: 'index.html',
};

ServiceWorker 不加载图像

ServiceWorker doesn't load Images

javascript

polymer

service-worker

polymer-starter-kit

问题