渐进式网页应用（响应式网站）_网站模板
PWA 或渐进式 Web 应用程序只是一个可以安装在任何设备上的网站，例如 android、iphone、桌面等。它只是一个响应式网站模板和网站建设模板，只需单击一下即可轻松安装，具有强大的功能。_网站模板
PWA 的优点：
- 小尺寸（主要以 kbs 为单位）
- 易于安装
- 离线支持
- 不依赖操作系统
- 原生应用的特点（主要）
- 推送通知
- 没有更新开销（在后台自行更新）
我们可以简单地将 PWA 称为混合应用程序/网站，它可以安装在任何设备上，甚至可以提交到 Play 商店（TWA）。
清单.json：
它是浏览器解析并提供具有特定名称的应用程序/pwa 的文件，并在安装后为您的应用程序提供一些图标，并且它还具有一些高级功能，例如应用程序应该独立运行还是打开该 url 栏顶部，不同屏幕的不同大小图标，快捷操作等。
只需将清单文件链接到 head 标签中的 html 文件，如下所示：
<link rel="manifest" href="manifest.json" />
服务人员：
PWA 的核心是它的服务工作者，它使它能够提供类似应用程序的功能，并跟踪从清单文件到后台服务、更新、捕获、获取等所有内容。
Service Worker 只是一个可以轻松创建的 js 文件，您只需要创建一些函数/方法即可使其工作。我将在后面的部分中解释它们。
Service Worker 的生命周期：
- 注册
- 安装
- 激活
- 更新
如果我们更新 sw.js 文件中的任何内容，那么 service worker 将被再次安装，并且只有在它的所有实例都关闭时才会激活，以免对用户的工作造成任何干扰。
注册一个软件：
注册一个 sw 就像在你的主 js 文件中写 4 行代码一样简单。
安装软件：
安装 service worker 也像注册它一样简单。将此代码写入 sw.js 文件，代码如下所示：
self.addEventListener('install',(evt)=>{
console.log("sw installed",evt)
})
激活软件：
激活一个 swrvice worker 来监听事件和一切都非常简单，就像添加一个这样的事件监听器：
self.addEventListener('activate',(evt)=>{
console.log("sw 激活",evt)
})
离线支持
PWA 为您提供了使您的应用程序离线工作或在离线时显示其他内容的能力。由于缓存，所有这些都是可能的。缓存基本上是将资产存储在浏览器存储中，每当连接断开或应用程序脱机时，都会从缓存中获取文件。
缓存：
缓存是一种将资产（即 HTML、CSS、js、图像和其他文件）存储在用户浏览器存储中的策略。我们可以将资产缓存在 sw 文件中的任何位置，但如果我们从逻辑上思考，我们应该使用 install 事件来缓存我们的资产，因为我们不需要每次都这样做。我们可以只缓存一次资源，我们就可以开始了
从缓存中获取文件：
我们已经成功地缓存了资源，所以我们下一步将直接从缓存中获取这些资源，而不是一次又一次地使用用户的网络。所以要做到这一点，我们只需要再添加一个事件监听器，即获取事件并检查请求的资源是否在缓存中，如果它在缓存中，则在执行网络调用之前直接从缓存中获取它。
现在，它会导致一个问题，例如在开发应用程序时，您将更新保存在缓存中的文件，但您不会看到任何效果，因为资源是从缓存中获取的，所以我们需要创建一个机制来删除之前的缓存并再次缓存资产，这样可以通过每次刷新时检查缓存版本来实现，即我们可以使用 sw 的激活事件。
删除旧版本的缓存：
如果网络不存在，则显示缓存中的脱机页面：
显示后备 html 页面或任何图像非常简单。只需检查 fetch 事件是否可以从网络获取，如果两者都不可能，则显示存储在浏览器缓存中的后备页面。
动态缓存和通知以及其他功能不在本博客的范围内，我将在下一篇博客中包含所有这些。
本文由宁波久五网络原创分享