progressive-web-apps - Workbox 无法识别根 url 正则表达式 /^\/$/ 添加到导航后备黑名单

Question

我有一个使用 Workbox webpack 插件生成的带有服务工作者的 SPA。根 url "/" 是我网站的单独主页，而不是我的 SPA 的一部分，所以我希望我的服务工作者不要回退到我的 SPA 的应用程序外壳，而是在我导航到"时从服务器获取主页" /”。我知道工作箱有 navigationFallbackBlacklist 选项来指定不属于 SPA 的 url 模式。此选项适用于我的网站具有的其他几个 url 路径，但不适用于根 url。我想知道我的用例是否有一些解决方法。

Answer 1

为 mi 工作：使用 workbox-build 和 generateSw：

    ...
       runtimeCaching: [
        {
            urlPattern: /^https:\/\/(www\.)?test.local(\/)?$/,
            handler: 'NetworkFirst', 
            options: {
                cacheName: 'home-page',
                expiration: {
                    maxAgeSeconds: 30 * 24 * 60 * 60, // 30 DAYS
                    maxEntries: 1
                }
            }
        },

或手动编写：

workbox.routing.registerRoute(
    /^https:\/\/(www\.)?test.local(\/)?$/,
    workbox.strategies.networkFirst({
        cacheName: 'home-page',
        ...
    })
)
(NetworkFirst handler mode is important, in many cases)