0

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

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

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

这就是预缓存的一切。

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

服务工作者.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, {});
4

2 回答 2

0

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

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

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

于 2018-11-26T17:11:35.427 回答
0

只是为了澄清 - Workbox 跟踪 indexedDB 中文件的哈希，但它不使用 indexedDB 来提供文件。它使用缓存 API 来存储和检索文件。

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

  1. 如果你有一个服务工作者为一个页面注册（即服务工作者控制页面），那么所有的网络请求都会首先到达服务工作者。
  2. Service Worker 可以通过任何方式提出响应，也可以访问网络（参见 Service Worker 响应部分）。
  3. 一旦它进入网络，浏览器就可以决定它从哪里得到响应（参见浏览器响应部分）。

服务工作者响应

Service Worker 通常会做以下三件事之一来创建响应：

  1. 使用来自 Cache API 的响应返回。
  2. 从网络获取响应并返回（可能将其添加到缓存中）。
  3. 使用任意数量的源生成自定义响应，包括静态字符串、流、缓存 API 响应和网络响应。

请注意，在此列表中，我指的是 Cache API。这是由存储在用户计算机上的 Web 应用程序缓存的响应。

浏览器响应

对于任何网络响应，浏览器可以执行以下操作之一来获取响应：

  1. 转到网络并从服务器获得新的响应
  2. 引用 HTTP 缓存返回响应

HTTP 缓存与缓存 API 是分开的。它超出了开发人员的控制范围，不能依赖。浏览器做它感觉最好的事情。

Workbox + Service Worker

Workbox 提供了一组实用程序，使“Service Worker Response”部分更易于使用和开发。这意味着它只处理我概述的三种响应类型。

我已经记下了工作箱预缓存的作用及其工作原理，包括 indexedDB 在预缓存中的用途：https ://developers.google.com/web/tools/workbox/modules/workbox-precaching

于 2018-12-05T17:52:17.387 回答