工作箱预缓存不预缓存

Question

我正在尝试实现workbox来预缓存网站上的图像和视频资产。

我已经创建了一个服务工作者文件。它似乎在我的应用程序中被成功引用和使用。服务人员：

import { clientsClaim, setCacheNameDetails } from 'workbox-core';
import { precacheAndRoute, addRoute } from 'workbox-precaching';
const context = self; // eslint-disable-line no-restricted-globals
setCacheNameDetails({ precache: 'app' });
// eslint-disable-next-line no-restricted-globals, no-underscore-dangle
precacheAndRoute(self.__WB_MANIFEST);
context.addEventListener('install', (event) => {
event.waitUntil(
caches.open('dive').then((cache) => {
console.log(cache);
}),
);
});
context.addEventListener('activate', (event) => {
console.log('sw active');
});
context.addEventListener('fetch', async (event) => {
console.log(event.request.url);
});
context.addEventListener('message', ({ data }) => {
const { type, payload } = data;
if (type === 'cache') {
payload.forEach((url) => {
addRoute(url);
});
const manifest = payload.map((url) => (
{
url,
revision: null,
}
));
console.log('attempting to precache and route manifest', JSON.stringify(manifest));
precacheAndRoute(manifest);
}
});
context.skipWaiting();
clientsClaim();

应用程序使用工作簿窗口来加载、引用服务工作者并向其发送消息。该应用程序看起来像：

import { Workbox } from 'workbox-window';
workbox = new Workbox('/sw.js');
workbox.register();
workbox.messageSW({
type: 'cache',
payload: [
{ url: 'https://media0.giphy.com/media/Ju7l5y9osyymQ/giphy.gif' }
],
});

该项目将vue与vue-cli结合使用。它有一个webpack配置，允许将插件添加到webpack中。配置看起来像：

const { InjectManifest } = require('workbox-webpack-plugin');
const path = require('path');
module.exports = {
configureWebpack: {
plugins: [
new InjectManifest({
swSrc: path.join(__dirname, 'lib/services/Asset-Cache.serviceworker.js'),
swDest: 'Asset-Cache.serviceworker.js',
}),
],
},
};

我可以看到消息已成功发送到服务工作者，并且包含正确的有效负载。但是，这些资产从未出现在Chrome开发工具的缓存存储中。我也从未看到任何与通过messageSW发送的资产相关的工作簿日志记录。我还通过禁用我的互联网进行了测试，这些资产似乎没有加载到缓存中。我在这里做错了什么？

我发现工作簿文档有点不清楚，还试图从服务工作者中删除消息事件处理程序。然后，向服务工作者发送如下消息：

workbox.messageSW({
type: 'CACHE_URLS',
payload: { urlsToCache: [ 'https://media0.giphy.com/media/Ju7l5y9osyymQ/giphy.gif'] },
});

这似乎对缓存没有任何影响。

Answer 1

precacheAndRoute()的precache部分通过向当前服务工作者添加install和activate侦听器来工作，利用服务工作者的生命周期。如果服务工作者在被调用时已经完成了安装和激活，那么这实际上是一个无效操作，如果您通过message处理程序有条件地触发它，则可能会出现这种情况。

我们可能应该警告人们在我们的Workbox开发构建中对precacheAndRoute()的这种无效使用；我已经提交了一个问题来跟踪它。