Caching Workbox在初始加载时未缓存开始url

我已经使用谷歌的有一段时间了，在一个非常基本的层面上。大部分都很好，但由于某种原因，我的

manifest.json中的
start\u url
在初始页面加载时没有被缓存（Lighthouse报告，在开发工具中确认）。如果你浏览了一下，或者软刷新了几次页面，它看起来确实在缓存，只是一开始并没有

我想我做错了什么，但我不清楚那是什么。下面是演示URL和源代码





import{skipWaiting，clientsClaim}来自“workbox核心”；
从“workbox expiration”导入{ExpirationPlugin}；
从“工作盒预处理”导入{precacheAndRoute}；
从“工作盒路由”导入{setCatchHandler，registerRoute}；
从“工作箱策略”导入{CacheFirst，NetworkFirst}；
skipWaiting（）；
clientsClaim（）；
/**
*缓存WordPress内容
*/
登记线(
（{url}）=>{
返回（url.pathname&！url.pathname.match（/^\/（wp admin | wp content | wp includes | wp json | wp login）/）&&url.pathname.match（/\/$）；
},
新网络优先({
cacheName:“新建站点-内容-缓存”，
插件：[
新ExpirationPlugin({
最大秒数：7*24*60*60，
}),
],
})
);
/**
*缓存CSS文件
*/
登记线(
（{url}）=>{
返回（url.pathname&&url.pathname.match（/\.css$/）&&！url.pathname.match（/wp admin | wp includes | wp json/）；
},
新缓存优先({
cacheName:“新建站点-css-cache”，
插件：[
新ExpirationPlugin({
最大秒数：7*24*60*60，
}),
],
})
);
/**
*缓存JS文件
*/
登记线(
（{url}）=>{
返回（url.pathname&&url.pathname.match（/\.js$/）和&！url.pathname.match（/wp admin | wp includes | wp json/）和&！url.pathname.match（/redirection/）；
},
新缓存优先({
cacheName:“新建_站点-js-cache”，
插件：[
新ExpirationPlugin({
最大秒数：7*24*60*60，
}),
],
})
);
/**
*缓存图像文件
*/
登记线(
（{url}）=>{
返回（url.pathname&&url.pathname.match（/\.gif|jpeg | jpg | png | svg | webp$/）和&！url.pathname.match（/wp admin | wp includes | wp json/）；
},
新缓存优先({
cacheName:“新建_site-image-cache”，
插件：[
新ExpirationPlugin({
最大秒数：7*24*60*60，
}),
],
})
);
/**
*缓存字体文件
*/
登记线(
（{url}）=>{
返回（url.pathname&&url.pathname.match（/\.otf| ttf | woff | woff2$/）和&！url.pathname.match（/wp admin | wp includes | wp json/）；
},
新缓存优先({
cacheName:“新建\u站点-font-cache”，
插件：[
新ExpirationPlugin({
最大秒数：7*24*60*60，
}),
],
})
);
/**
*访问未缓存的脱机页面时返回“脱机”页面
*/
setCatchHandler（（）=>{
返回caches.match（“/offline/”）；
});
/**
*预缓存“脱机”页面
*/
前切安德鲁特([
{
url:“/offline/”，
修订：版本，
},
]);

更新1:好的，我发现了我认为存在的问题。初始响应似乎没有被缓存，因为服务工作者是在请求之后安装的，所以它没有什么可缓存的。我仍然没有找到解决这个问题的方法，但如果我有任何进展，我会发布另一个更新

更新2:似乎使用了
skipWaiting（）
和
clientsClaim（）
应该是解决这个问题的方法，但是添加了这些之后，它仍然没有按预期工作。奇怪的是，Lighthouse报告“当前页面脱机时以200响应”，但“开始url脱机时不以200响应开始url确实响应，但不是通过服务人员。”这没有意义，因为它是同一个页面。。。也许我在尝试路由
/
时出错了

更新3:尝试将我的第一个
注册表项中的最后一个检查更改为
/\/？$/
，没有任何区别。还尝试将
NetworkFirst
更改为
CacheFirst
，实际上效果很好。。。但我需要的是
网络优先
，所以这并不是解决这个问题的切实可行的选择。我也尝试过预编译
/
，但同样没有什么不同

更新4:我怀疑这可能接近我所需要的，但我未能成功实施。。。如果我硬编码
start\u url
，它至少会缓存HTML，但会丢失所有其他文件。这似乎很有用，但是
location.href
只是返回了服务人员URL，即使没有返回，我也不确定如何将所有内容像当前一样分割到它们自己的缓存中。
正如所说，页面和资源没有被缓存，因为它们是在安装服务人员之前加载的

为什么不在构建时使用注入基本预缓存清单？资产将在服务人员安装时进行预制

快速示例，将以下行添加到
service worker.js
：

precacheAndRoute（self.\uuwb\umanifest）；

并在生成后运行以下js脚本：

const{injectManifest}=require（'workbox-build'）；
const swSrc='src/sw.js'；
const swDest='build/sw.js'；
注射清单({
swSrc，
swDest，
globDirectory:'build'，
全局模式：['*.@（js|css）]
})。然后（{count，size}）=>{
log（`Generated${swDest}，它将预缓存${count}个文件，总共${size}个字节。`）；
});

您甚至可以将
swSrc
和
swDest
设置为相同，以便将清单插入到位

我认为没有必要将资产分割到不同的缓存中，但这是可能的