时间戳

首页 > 解决方案 > NetworkFirst 缓存策略不保存 url 的 html 内容

service-worker - NetworkFirst 缓存策略不保存 url 的 html 内容

问题描述

我是第一次使用 workbox 使用 serviceworker，之前没有经验。我希望当用户访问一个 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);
  }
);

所以当我离线时，我看到了。

pwa

标签： service-workerprogressive-web-appsworkbox

解决方案

您的代码混合了 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

我还建议您阅读有关 Service Worker 本身的入门读物。您可能会找到一个，例如。这里https://developers.google.com/web/fundamentals/primers/service-workers/

推荐阅读