PWA - service worker - Workbox（未完）

Get Started（开始）

• 只有get请求才能cache缓存吗？

Create and Register a Service Worker File（创建和注册 Service Worker）

• Before we can use Workbox, we need to create a service worker file and register it to our website.（在使用Workbox之前，我们需要创建一个服务工作者文件并将其注册到我们的网站。）

<script>
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant（使用窗口加载事件保持页面加载性能）
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

• Looking in the “Application” tab in Chrome DevTools you should see your service worker registered.（在chrome devtools中的“application”选项卡中，您应该看到服务工作者已注册。）
  • Click the “Update on reload” checkbox to make it easier to develop with your new service worker.（单击 “Update on reload” 复选框，以便与新的 service worker 一起开发。）

Importing Workbox（导入工作框）

• To start using Workbox you just need to import the workbox-sw.js file in your service worker.（要开始使用Workbox，只需在服务工作者中导入Workbox-sw.js文件。）
  • Importing workbox-sw.js will create a workbox object inside of your service worker, and that instance is responsible for importing other helper libraries, based on the features you use.（导入workbox-sw.js将在服务工作者内部创建一个workbox对象，该实例负责根据您使用的功能导入其他助手库。）
  • Due to restrictions in the service worker specification, these imports need to happen either inside of an install event handler, or synchronously in the top-level code for your service worker.（由于 service worker 规范中的限制，这些导入需要在安装事件处理程序内部或在服务工作者的顶级代码中同步进行。？）

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'); // 同步的

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