Question

我致力于将[服务工作者技术]实施到网站中。

除图片外，一切都按预期工作。

根本没有加载图像。

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

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

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

我将图片添加到相应目录。

如果继续并禁用wifi，您将看到该页面仍按预期加载。只有cat图像不会加载。

我正在使用：

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

问题

图像是否应该加载服务工作者？如果是的话，我做错了什么？

Answer 1

我刚检查了你的演示。 “cat.png”似乎不在要缓存的项目列表中。我认为您应该手动添加它，或者您应该在sw-precache配置中添加文件过滤器。

我认为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，其内容并不重要。

Cache接口为缓存的请求/响应对象对提供存储机制，例如作为ServiceWorker生命周期的一部分。

您几乎可以缓存任何图像，字体，声音，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被注册才能被服务工作者缓存。

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

ServiceWorker无法加载图像

问题

2 个答案: