NetworkFirst缓存策略不保存html内容的网址

Question

我是第一次使用workbox的serviceworker，之前没有经验。我希望当用户访问一个url时，必须将对应的html保存到缓存中，这样当app离线时，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);
  }
);

所以当我进入离线状态时，我看到了。

Answer 1

你的代码是把Workbox库中的预缓存和运行时缓存部分混合在一起。有的部分可能可以用，有的不能用。

通过说 "我希望当用户访问一个网址时，必须将相应的html保存到缓存中，这样当应用离线时，网址的内容就会从缓存中服务。" 看来，你想要的是所谓的 网络优先缓存策略. 使用Workbox最简单的配置就是。

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

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

更多关于该策略的信息在这里。https:/developers.google.comwebtoolsworkboxmodulesworkbox-strategies#network_first_network_falling_back_to_cache。

我还建议你读一本关于服务人员本身的入门书。你可以在这里找到一本，例如 https:/developers.google.comwebfundamentalsprimersservice-workers。