谷歌工作箱 webpack 插件在服务工作者之前首先从缓存中获取

Posted 2023-03-10

技术标签:

【中文标题】谷歌工作箱 webpack 插件在服务工作者之前首先从缓存中获取【英文标题】：google workbox webpack plugin to fetch from cache first before service worker 【发布时间】：2019-04-28 07:51:22 【问题描述】：

当我只使用 Workbox 插件中的预缓存时，服务人员会尝试从 indexdb 而不是缓存（浏览器缓存）中获取。

是的，Service Worker 比从服务器获取更快。但是，如果它从内存中获取，则需要 0 秒。

我已经看到了工作箱中的所有策略，但它没有尝试首先从内存中获取的策略。

这就是预缓存的一切。

new WorkboxPlugin.GenerateSW(
      skipWaiting: true,
      importWorkboxFrom: 'local',
)

service-worker.js

importScripts("/dist/workbox-v3.6.3/workbox-sw.js");
workbox.setConfig(modulePathPrefix: "/dist/workbox-v3.6.3");

importScripts(
  "/dist/precache-manifest.4b8be844a396ff2fc7335cebbab35f10.js"
);

workbox.skipWaiting();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.

 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, );

【问题讨论】：

【参考方案1】：

您无法控制浏览器缓存或服务器如何处理请求，因此很遗憾，您不能先尝试浏览器缓存，然后尝试缓存 API，然后再尝试服务器。

但是，您可以尝试同时从缓存 API 和服务器（包括浏览器缓存）加载，并提供最快的答案。

这就是 Jake Archibald 在他的离线食谱中所说的“缓存和网络竞赛”：https://jakearchibald.com/2014/offline-cookbook/#cache-network-race

【讨论】：

@SeongjunKim 是的，在这种情况下呢？【参考方案2】：

澄清一下 - Workbox 会跟踪 indexedDB 中文件的哈希值，但它不使用 indexedDB 来提供文件。它使用缓存 API 来存储和检索文件。

在您的问题中，您根据响应的来源混合了缓存、内存和服务工作者。所以稍微澄清一下：

如果您为某个页面注册了 Service Worker（即该 Service Worker 控制该页面），那么所有网络请求都将首先到达该 Service Worker。 Service Worker 可以通过任何方式提出响应，也可以访问网络（请参阅 Service Worker 响应部分）。一旦进入网络，浏览器就可以决定从何处获取响应（请参阅浏览器响应部分）。