1

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

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

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'] },
});

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

4

1 回答 1

2

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

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

于 2020-12-08T15:05:50.980 回答