Как проверить наличие обновлений установленных веб-приложений (PWA) при использовании метода предварительного кэширования

Ручной способ сделать это - включить что-то вроде

// VERSION: 1

в верхней части файла сервис-воркера, и не забывайте менять этот номер всякий раз, когда вы вносите какие-либо изменения в актив, кэшируемый во время install. Обновленный номер версии приведет к автоматической проверке обновлений сервис-воркером указывает на то, что есть что-то новое, что, в свою очередь, вызовет повторный запуск обработчика install в вашем обновленном файле сервис-воркера. В этот момент все ваши предварительно кэшированные ресурсы будут снова добавлены в кеш.

После некоторых разъяснений в комментариях я считаю, что использование cache.addAll() внутри вашего обработчика install может быть проблематичным, потому что вы не имеете контроля над своими заголовками Cache-Control, а cache.addAll() отправится в кэш HTTP перед выходом в сеть. Вот альтернативный обработчик install, который решает эту проблему, передавая объекты Request с соответствующим свойством cache вместо передачи строк URL:

self.addEventListener("install", installEvent => {
  const cacheBypassRequests = assets.map(
    (url) => new Request(url, {cache: 'reload'});

  installEvent.waitUntil(
    caches.open(pb_cache)
    .then((cache) => {
      return cache.addAll(cacheBypassRequests)
      .then(() => {
        return self.skipWaiting();
      })
    })
  );
});

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

Несколько более надежный способ сделать это — добавить шаг в процесс сборки вашего веб-приложения, который будет обновлять номер версии файла сервисного работника при каждом повторном развертывании.

Более готовый к работе подход – использовать инструмент, предназначенный для решения этого конкретного случая использования, например workbox-precaching вместе с интерфейсами сборки node, webpack или CLI. Это позаботится об автоматическом создании хэша каждого ресурса, который вы хотите предварительно кэшировать, инициировании новой установки при каждом изменении одного из них и повторной загрузке только обновленных ресурсов.

Самое простое решение для этой реализации — обновлять значение pb_cache каждый раз, когда вы меняете index.html, что приведет к обновлению работника службы и повторному кэшированию index.html. Но старая кешированная версия не будет удалена.

Вот решение с использованием Workbox, оно предварительно кэширует файлы, указанные в urls, затем, когда будет сделан запрос на один из этих файлов, он будет использовать ссылку устарел, при повторной проверке стратегии. Сначала пользователь может увидеть старую версию, но при следующей перезагрузке он получит последнюю версию. Для любых других запросов (отсутствующих в urls) будет использоваться только сеть. И, наконец, setCatchHandler< /a> вернет автономную страницу, если не сможет получить страницу из сети.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.0/workbox-sw.js');

// URLs to cache and keep up to date
const urls = [
  '/index.html',
  '/manifest.json',
  '/script.js',
  '/style.css',
  '/offline.html',
];

// Turn on logging for development, change to false for production
workbox.setConfig({
  debug: true
});

const {clientsClaim} = workbox.core;
const {NetworkOnly} = workbox.strategies;
const {StaleWhileRevalidate} = workbox.strategies;
const {warmStrategyCache} = workbox.recipes;
const {registerRoute} = workbox.routing;
const {setDefaultHandler} = workbox.routing;
const {setCatchHandler} = workbox.routing;

self.skipWaiting();
clientsClaim();

// Normalize cache key URLs to:
// - drop query parameters
// - for URLs ending in '/', append 'index.html'
async function cacheKeyWillBeUsed({request}) {
  const url = new URL(request.url);
  if (url.pathname.endsWith('/')) {
    return url.origin + url.pathname + 'index.html';
  }
  return url.origin + url.pathname;
}

// Initialize a stale while revalidate strategy.
// See https://developers.google.com/web/tools/workbox/modules/workbox-strategies#stale-while-revalidate
const strategy = new StaleWhileRevalidate({
  plugins:[
    {cacheKeyWillBeUsed},
  ],
});

// Ensure that an initial set of URLs are cached,
// so that the PWA works offline immediately.
warmStrategyCache({urls, strategy});

// Use the Stale While Revalidate strategy for URLs in `urls`
registerRoute(
  ({url}) => {
    let pathname = url.pathname;
    // Normalize paths, for URLs ending in '/', append 'index.html'
    if (pathname.endsWith('/')) {
      pathname += 'index.html';
    }
    return urls.includes(pathname);
  }, strategy
);

// Use only the network for all other requests
setDefaultHandler(new NetworkOnly());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response. This is a simplified version of the Comprehensive Fallback
// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks
setCatchHandler(({event}) => {
  if (event.request.destination === 'document') {
    return caches.match('/offline.html');
  }
});

Все это решение объединяет ряд рецептов из Расширенные рецепты. раздел Рабочего ящика.