Question

当我仅使用Workbox插件中的预缓存时，服务工作者尝试从indexdb而非缓存（浏览器缓存）中获取。

是的，服务工作者比从服务器获取更快。但是，如果它是从内存中获取的，则需要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, {});

Answer 1

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

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

这就是杰克·阿奇博尔德（Jake Archibald）在他的离线食谱中命名的“缓存和网络竞赛”：https://jakearchibald.com/2014/offline-cookbook/#cache-network-race

Answer 2

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

在您的问题中，您根据响应的来源来混合，缓存，内存和服务工作者。因此，请澄清一下：

如果您为页面注册了服务人员（即服务人员控制页面），则所有网络请求都将首先发送给服务人员。
服务人员可以通过任何方式提出响应，也可以访问网络（请参阅服务人员响应部分）。
一旦进入网络，浏览器就可以决定从哪里获得响应（请参阅浏览器响应部分）。

服务人员响应

服务人员通常会做以下三件事之一来创建响应：

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

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

浏览器响应

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

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

HTTP缓存与缓存API分开。它超出了开发人员的控制范围，因此无法依赖。浏览器会尽其所能。

工作箱+服务人员

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

我已经记下了工作箱预缓存的功能及其工作方式，包括预缓存中使用的indexedDB：https://developers.google.com/web/tools/workbox/modules/workbox-precaching

Google Workbox Webpack插件要先从缓存中获取，然后才能提供服务

2 个答案:

服务人员响应

浏览器响应

工作箱+服务人员