javascript - 在 Workbox 中使用 Stale While Revalidate 策略进行预缓存

Question

问题

是否可以使用不同的策略来预缓存文件？即在重新验证时陈旧？

或者，我是否应该只在 DOM 中加载脚本，然后使用正确的策略在 worker 中为其添加路由？

背景

这是一个很奇怪的案例，所以我会尽力解释它......

• 我们有两个 repo ； PWA 和游戏
• 两者都静态托管在同一个 CDN 上
• 由于游戏存储库是独立的，PWA 无法访问游戏 js 包的版本控制
• 因此，我提出的解决方案是在游戏构建中生成一个未版本控制的 list (game-manifest.js)
• 然后 PWA 将预缓存此文件，遍历其内容，并将每个条目附加到现有的预缓存 list
• 但是，鉴于 game-manifest.js 没有修订且未经过哈希处理，我们需要应用 Network First 或 Stale While Revalidate 策略以便在新版本可用时更新文件

请参阅以下代码作为我正在尝试执行的操作的更清晰的示例:

import { precacheAndRoute } from 'workbox-precaching';

// Load the game manifest
// THIS FILE NEEDS TO BE PRECACHED, but under the strategy
// of stale while revalidate, or network first.
importScripts('example.cdn.com/games/js/game-manifest.js');

// Something like...
self.__gameManifest.forEach(entry => {
    self.__precacheManifest.push({
        url: entry
    });
});

// Load the assets to be precached
precacheAndRoute(self.__precacheManifest);

Answer 1

一般来说，在使用workbox-precaching 时，不可能换成另一种策略。它始终是缓存优先的，预缓存 list 中的版本控制信息控制更新的发生方式。

在 https://github.com/GoogleChrome/workbox/issues/1767 上对该问题进行了更广泛的讨论。

推荐的做法是显式设置 runtime caching routes使用您喜欢的策略，并可能通过在 install 步骤中提前向缓存添加条目来“填充”缓存。