workbox 缓存离线 wordpress 站点

Question

workbox 的新手，我正在尝试缓存 wordpress 网站的首页 [或所有页面] 以符合 lighthouse PWA 审核失败：

离线时不响应 200 如果您正在构建渐进式 Web 应用程序，请考虑使用服务工作者，以便您的应用程序可以离线工作。了解更多。

我完成了功能：

    /**
 * Callback that adds the service worker
 *
 */
function brs_add_service_worker_callback() {
    ?>
    <script>
        // Check that service workers are registered
        if ('serviceWorker' in navigator) {
            // Use the window load event to keep the page load performant
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('<?php echo plugin_dir_url( __FILE__ ).'js/sw.js?v'.get_plugin_data(__FILE__)['Version']?>');
            });
        }
    </script>
<?php
}
add_action( 'wp_footer', 'brs_add_service_worker_callback' );

对应的sw.js文件为：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');

// Ignore preview and admin areas
workbox.routing.registerRoute(/wp-admin(.*)|(.*)preview=true(.*)/,
    workbox.strategies.networkOnly()
);

// Stale while revalidate for JS and CSS that are not precache
workbox.routing.registerRoute(
    /\.(?:js|css)$/,
    workbox.strategies.staleWhileRevalidate(),
  );

// We want no more than 50 images in the cache. We check using a cache first strategy
workbox.routing.registerRoute(/\.(?:png|gif|jpg|webp)$/,
    workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
    cacheExpiration: {
            maxEntries: 50
        }
    })
);

// We need cache fonts if any
workbox.routing.registerRoute(/(.*)\.(?:woff|eot|woff2|ttf|svg)$/,
    workbox.strategies.cacheFirst({
    cacheExpiration: {
            maxEntries: 20
        },
    cacheableResponse: {
        statuses: [0, 200]
        }
    })
);

workbox.routing.registerRoute(/https:\/\/fonts.googleapis.com\/(.*)/,
workbox.strategies.cacheFirst({
    cacheExpiration: {
        maxEntries: 20
    },
    cacheableResponse: {statuses: [0, 200]}
    })
);

serviceWorker 已正确注册，但缓存未按预期工作。

有什么建议吗？或者需要更多信息吗？

Answer 1

尝试添加新路由，例如，如果您使用的是 wordpress：

workbox.routing.registerRoute(new RegExp('/(.*)/'), 
workbox.strategies.cacheFirst({
    cacheName,
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200],
      }),
    ],
}));

这将缓存 wordpress html 页面

ps: 将 cacheName 更改为你的

workbox 缓存离线 wordpress 站点

workbox cache offline wordpress site

wordpress

service-worker

workbox