Стратегия кэширования NetworkFirst, не сохраняющая содержание URL html

Question

Я впервые использую serviceworker с использованием workbox, не имею опыта. Я хочу, чтобы когда пользователь посещал URL-адрес, соответствующий html должен быть сохранен в кеше, поэтому, когда приложение находится в автономном режиме, содержимое URL-адреса подается из кеша. Но я не вижу содержимое в кеше браузера devtool. Что мне здесь не хватает?

import { registerRoute } from "workbox-routing";
import { precacheAndRoute } from "workbox-precaching";
import {skipWaiting} from 'workbox-core';
import {NetworkFirst, CacheFirst} from 'workbox-strategies';

// ...

function jsonResponse(value) {
  return new Response(JSON.stringify(value), {
    headers: { "Content-Type": "application/json" },
    status: 202,
  });
}

console.log("Workbox is loaded");

skipWaiting();


/* injection point for manifest files.  */
precacheAndRoute(self.__WB_MANIFEST);

const pagesCache = new NetworkFirst({
  cacheName: 'pages-cache',
});

registerRoute(
  new RegExp("/projects/[-a-z0-9]+/edit$"),
  args => {
    console.log('Got in here..');
    return pagesCache.handle(args);
  }
);

, поэтому, когда я go в автономном режиме, я вижу.

Answer 1

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

Говоря "Я хочу, чтобы когда пользователь посещал URL-адрес, соответствующий html должен быть сохранен в кеше, поэтому, когда приложение отключено, содержимое URL-адреса поступает из кэша. " Похоже, вам нужна так называемая стратегия первого сетевого кэширования . Простейшая конфигурация для этого с использованием Workbox:

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  new RegExp('/'),
  new NetworkFirst()
);

Подробнее о стратегии здесь: https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_first_network_falling_back_to_cache

Я также предлагаю вам прочитать учебник по Работники сервиса сами. Вы можете найти один, например. здесь https://developers.google.com/web/fundamentals/primers/service-workers/