2

带有工作箱的新手，我正在尝试缓存 wordpress 网站的首页 [或所有页面] 以符合灯塔 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 已正确注册，但缓存未按预期工作。

有什么建议么？还是需要更多信息？

4

1 回答 1

2

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

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

这将缓存 wordpress html 页面

ps：把cacheName改成你的

于 2018-08-14T09:02:24.667 回答