工作框预缓存不预缓存

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

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

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

这似乎也不会对缓存产生影响。

Answer 1

precacheAndRoute()的precache部分的工作方式是将install和activate侦听器添加到当前的服务工作线程中，利用service worker lifecycle。如果服务工作者在它被调用时已经完成了安装和激活，那么这实际上将是一个禁止操作，如果您通过message处理程序有条件地触发它，情况可能就是这样。

我们可能应该警告人们，在我们的工作箱开发构建中，precacheAndRoute()的使用是无效的；我已经提交了an issue来跟踪这一点。