如何建立你的第一个离线网页

什么是 Service Worker？

今天，我们在 Service Worker 的帮助下构建我们的第一个离线网页。

Service Worker 可以在浏览器中后台运行，无需用户交互。它们在自己的线程上工作，即使浏览器/网站关闭也能正常工作。

服务工作者仅在安全站点（如 https）上运行，开发时它将在本地主机上运行。

今天我们使用服务 Workers 来构建我们的离线网页。

首先，我们需要检查服务工作者是否在浏览器中可用。

这是我们的 script.js 文件代码。

如果导航中有服务工作者，上述代码会做什么

如果是，则在块内运行这些代码。

我们需要创建空的 sw.js 文件，并且需要在 register 方法中指定 sw.js 文件的路径。

如果注册成功，注册方法会给我们一个承诺，
那么我们就可以开始了，否则注册过程中就会出现一些问题。

它们是服务工作者为我们提供的不同生命周期事件，
即安装、激活、获取？

首先，我们需要安装服务工作者，为此我们需要编写一些代码。

self.addEventListener('install',function(){


})

看起来像这些

在安装时我们需要打开缓存并将静态资产放入缓存中。

event.waitUntil() 接受 Promise 参数，以便等待该 Promise
解析完成。例如，请等待资源被放入缓存中。

我跳过了激活事件，我们已经将静态资产缓存在缓存名称“ my-cache-1” *中。

现在我们想要访问缓存并使用缓存中的资产，而不是发送网络请求。

它首先检查请求的文件是否在缓存中，如果是则使用它或发送网络请求。

哇，我们成功完成了简单的离线网页

这是我们的最终输出，如果您有任何疑问，请随时尝试。

编码愉快...

资源