Workbox 预缓存不预缓存

Question

我正在尝试实施工作箱以在网站上预缓存图像和视频资产。

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

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();

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

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 发送的资产相关的工作箱日志记录。我还通过禁用我的互联网进行了测试，资产似乎没有加载到缓存中。我在这里做错了什么？

我发现工作箱文档有点不清楚，还尝试从服务工作者中删除消息事件处理程序。然后，像这样向 service worker 发送消息：

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

这似乎对缓存也没有影响。

Answer 1

precacheAndRoute() 的 precache 部分通过向当前 service worker 添加 install 和 activate 侦听器来工作，利用 service worker lifecycle。如果 service worker 在它被调用时已经完成安装和激活，这实际上是一个空操作，如果你通过 message 处理程序有条件地触发它可能就是这种情况。

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

Workbox 预缓存不预缓存

Workbox precache doesn't precache

service-worker

sw-precache

workbox

workbox-webpack-plugin

workbox-window