Неправильная группа кэша рабочего ящика - PullRequest
Новая
       12

Неправильная группа кэша рабочего ящика

1 голос
/ 06 февраля 2020

Я использую workbox-webpack-plugin v5 (последний) с плагином InjectManifest. Ниже приведен исходный файл моего работника службы: 

import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { clientsClaim, setCacheNameDetails, skipWaiting } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import {
  cleanupOutdatedCaches,
  createHandlerBoundToURL,
  precacheAndRoute,
} from 'workbox-precaching';
import { NavigationRoute, registerRoute, setCatchHandler } from 'workbox-routing';
import { CacheFirst, NetworkOnly, StaleWhileRevalidate } from 'workbox-strategies';

setCacheNameDetails({
  precache: 'install-time',
  prefix: 'app-precache',
  runtime: 'run-time',
  suffix: 'v1',
});

cleanupOutdatedCaches();

clientsClaim();

skipWaiting();

precacheAndRoute(self.__WB_MANIFEST);

precacheAndRoute([{ url: '/app-shell.html', revision: 'html-cache-1' }], {
  cleanUrls: false,
});

const handler = createHandlerBoundToURL('/app-shell.html');

const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);


registerRoute(
  /.*\.css/,
  new CacheFirst({
    cacheName: 'css-cache-v1',
  })
);


registerRoute(
  /^https:\/\/fonts\.(?:googleapis|gstatic)\.com/,
  new CacheFirst({
    cacheName: 'google-fonts-cache-v1',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds: 60 * 60 * 24 * 365,
        maxEntries: 30,
      }),
    ],
  })
);


registerRoute(
  /.*\.js/,
  new StaleWhileRevalidate({
    cacheName: 'js-cache-v1',
  })
);


setCatchHandler(new NetworkOnly());

У меня есть следующие вопросы / проблемы:

  • Неправильная группа кэша. Все, кроме шрифтов Google, находится в группе кэша workbox-precache-v2 или app-precache-install-time-v1, а не в отдельных группах кэша, таких как css-cache-v1, js-cache-v1. Однако, 1 из 20 раз, он показывает правильную группу кеша, и я просто не могу понять, почему.
  • Шрифт Google показывает из кеша памяти. Это правильно? Он отлично работает в автономном режиме, но что произойдет, если пользователь закроет браузер / компьютер и вернется в автономном режиме?
  • Правильно ли используется /app-shell.html? Это express бэкэнд-приложение с * в качестве подстановочного знака для всех маршрутов, а React Router управляет маршрутизацией. Функционально работает нормально в автономном режиме. У меня нет приложения-оболочки. html страница.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 07 февраля 2020

Неправильная группа кэша. Все, кроме шрифтов Google, находится в workbox-precache-v2 или app-precache-install-time-v1 кеш-группе, а не в отдельных кеш-группах, таких как css-cache-v1, js-cache-v1. Тем не менее, 1 из 20 раз, он показывает правильную группу кеша, и я просто не могу понять, почему.

Это зависит от того, что находится в вашем манифесте предварительного кэша (то есть, что self.__WB_MANIFEST заменяется во время ваша сборка веб-пакета).

Например, предположим, у вас есть файл, сгенерированный веб-пакетом с именем bundle.js, и этот файл заканчивается в вашем манифесте с предварительным кэшем. Исходя из кода вашего сервисного работника, этот файл будет помещен в кэш с именем app-precache-install-time-v1, даже если он также совпадает с вашим маршрутом выполнения с кешем js-cache-v1.

Причина в том, что ваш прекашированный маршрут зарегистрирован перед тем, как вы запустите маршрут, поэтому ваши логи для предварительного кэширования c будут обрабатывать этот запрос, а не логи для кэширования во время выполнения c.

, показанные шрифтом Google из кэша памяти. Это правильно? Он отлично работает в автономном режиме, но что произойдет, если пользователь закроет браузер / компьютер и вернется в автономном режиме?

Я считаю, что это означает, что запрос не обрабатывается работником службы, но Вы можете проверить журналы рабочих столов в консоли разработчика, чтобы проверить (и посмотрите, почему нет).

В качестве альтернативы, вы можете обновить свой код, чтобы использовать собственный обработчик, который просто регистрирует, работает ли он так: 

registerRoute(
  /^https:\/\/fonts\.(?:googleapis|gstatic)\.com/,
  ({request}) => {
    // Log to make sure this function is being called...
    console.log(request.url);
    return fetch(request);
  }
);

Правильно ли используется /app-shell.html? Это express бэкэнд-приложение с * в качестве подстановочного знака для всех маршрутов, а React Router управляет маршрутизацией. Функционально работает нормально в автономном режиме. У меня нет app-shell. html page.

Отвечает ли ваш маршрут express файлом с именем app-shell.html? Если это так, то вы, вероятно, захотите, чтобы ваша версия предварительного кэша составляла sh самого файла (а не revision: 'html-cache-1'). То, что у вас есть сейчас, должно работать, но есть риск, что вы измените содержимое app-shell.html, развернете новую версию своего приложения, но ваши пользователи все равно увидят старую версию, потому что вы забыли обновить revision: 'html-cache-1'. В общем, лучше использовать ревизии, сгенерированные как часть вашего шага сборки.

...