Workbox 缓存

介绍 https://developers.google.cn/web/tools/workbox/guides/get-started

先注册一个service worker

    <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('/sw.js');
            });
        }
    </script>

并在 sw.js里面写入

console.log('Hello from sw.js');

打开页面你就会看到service worker文件中的日志

您应该看到您的service worker已注册。

现在我们已经注册了service worker，让我们来看看我们如何使用Workbox。

修改我们的 service worker，可能由于网络原因你无法访问 cdn

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

if (workbox) {
  console.log(`Yay! Workbox is loaded