Question

我已经看到，使用Service Workers的所有脱机Web应用程序示例都包含以下模式，以便在安装时预取其资产：

SELECT DEPARTMENT.NAME, COUNT(EMPLOYEE.ID)
FROM DEPARTMENT
JOIN EMPLOYEE ON EMPLOYEE.DEPT_ID = DEPARTMENT.DEPT_ID
GROUP BY EMPLOYEE.DEPT_ID, DEPARTMENT.NAME
ORDER BY COUNT(EMPLOYEE.ID) DESC, DEPARTMENT.NAME

但是，我遇到了以下问题：

首次加载时，资产将被提取两次，一次是在初始页面加载期间（服务工作者处于活动状态之前），再次安装服务工作者。
安装过程中预先获取的响应是否可能会自动从缓存中删除（当网站暂时没有访问或存储时运行不足时）？
编译和维护完整的资产列表很麻烦。有时它甚至是不可能的，例如使用谷歌字体只知道CSS的位置，但字体本身的位置因浏览器而异，需要更改。

或者，我可以首次请求缓存资产，这将消除上述问题。但是这种方式显然无法保证在用户下线时填充缓存。通过self.addEventListener('install', function(event) { event.waitUntil(caches.open('assets').then(function(cache) { return cache.addAll([ '/', '/static/all.css', '/static/script.js', ... ]) })); });标题注册服务工作者可以减轻这种情况，使其可能在请求资产时运行。当然，这仅适用于单页应用，其中所有资产都在每个页面视图上请求。

或者有更好的做法吗？

Answer 1

我建议使用Workbox（我工作）或offline-plugin等工具自动生成资产清单以进行预缓存。

我还建议关注服务工作者注册these best practices，这会延迟注册，直到您的网页加载了初始内容为止。

此时，您可以告诉您的服务工作人员尊重永远不会更改的资产的HTTP缓存（在工作箱中，这是使用dontCacheBustUrlsMatching configuration parameter完成的），并且您不会结束重新下载这些资产。某些资产无法像大多数HTML文档一样安全地从HTTP缓存中读取，并且最终会下载两次。

在服务工作者中预取资产真的是最好的主意吗？

1 个答案: