Предварительное кеширование рабочей панели не выполняется

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

Приложение использует рабочее окно-окно для загрузки, ссылки и сообщения работнику службы. Приложение выглядит так:

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. Он имеет конфигурацию веб-пакета, которая позволяет отправлять плагины добавленными в веб-пакет. Конфигурация выглядит так:

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

The precacheчасть работ путем добавления installа также activateслушатели текущего сервис-воркера, используя преимущества жизненного цикла сервис-воркера . Это фактически не будет выполняться, если сервисный работник уже завершил установку и активацию к моменту его вызова, что может иметь место, если вы запускаете его условно через messageобработчик.

Мы, вероятно, должны предупредить людей об этом неэффективном использовании precacheAndRoute()в наших сборках разработки Workbox; Я подал заявку , чтобы отследить это.