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

ProgramBox

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

Post author:admin
Запись опубликована:19 августа, 2022
Post category:Вопросы по программированию

#service-worker #workbox #workbox-webpack-plugin #sw-precache #workbox-window

#service-worker #workbox #workbox-webpack-plugin #sw-предварительное кэширование #рабочее окно-окно

Вопрос:

Я пытаюсь реализовать workbox для предварительного кэширования ресурсов изображений и видео на веб-сайте.

Я создал файл service worker. Похоже, на него успешно ссылаются и используют в моем приложении. Работник службы:

 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 dev tools. Я также никогда не вижу никаких журналов рабочего ящика, связанных с активами, отправленными через messageSW. Я также проверил, отключив свой интернет, что ресурсы, похоже, не загружаются в кэш. Что я здесь делаю не так?

Я обнаружил, что документы workbox немного неясны, а также попытался удалить обработчик события сообщения из service worker. Затем отправляйте сообщения работнику службы следующим образом:

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

Похоже, это также не влияет на кеш.

1. Есть ли шанс, что вы могли бы развернуть это на общедоступном URL-адресе и поделиться им? Я хотел бы воспроизвести и отладить это.

2. @JeffPosnick — спасибо, что перезвонили мне. Я немного повозился с этим, и похоже, что вызов precacheAndRoute изнутри прослушивателя сообщений просто ничего не делает. Перемещение того же вызова за пределы обработчика работает нормально. Я собрал небольшое репозиторий git github.com/joelongstreet/workbox-doesnt-precache и опубликовал свой проект здесь — joelongstreet.com/workbox-doesnt-precache

Ответ №1:

precache Часть precacheAndRoute() работ выполняется путем добавления install и activate прослушивания к текущему service worker, используя жизненный цикл service worker. Фактически это будет неработоспособным, если service worker уже завершил установку и активацию к моменту его вызова, что может иметь место, если вы запускаете его условно через message обработчик.

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