随着移动互联网的普及和技术的不断进步，越来越多的网站和应用开始采用 PWA 技术，将 Web 应用变得更加快速、可靠、可控，提升用户体验。但是，对于已经存在的 Web 应用来说，如何进行渐进式升级，才能更好地发挥 PWA 的优势呢？本文将通过具体的实例和代码，分享一些实用的建议，以供参考。
渐进式改造
PWA 技术是一种通过 Web 技术实现类似原生应用的体验的方式。但是，对于已有的 Web 应用来说，我们不可能一蹴而就地做出所有 PWA 要求的功能和架构上的改变。因此，我们需要进行渐进式改造，一步一步地实现 PWA 功能。
在进行渐进式改造时，我们需要了解 PWA 的核心功能和要求，这样才能有的放矢地进行改造。PWA 的核心功能主要包括：
- 快速加载：通过 Service Worker 缓存机制，实现应用快速、可靠的离线加载；
- 响应式体验：基于 Web App Manifest，实现响应式的页面布局，在移动设备和桌面设备上都能获得优秀的用户体验；
- 能够像原生应用一样被安装和升级：利用 Web App Manifest，PWA 应用可以像原生应用一样被安装和添加到主屏幕，同时支持自动更新；
- 支持推送通知：利用 Service Worker，支持推送通知功能；
- 支持离线访问和数据同步：通过 IndexedDB 和 Cache API，支持离线数据访问。
因此，在进行渐进式改造时，我们应该着眼于这些核心功能，一个个地实现，而不是一次性地去改变整个应用架构。
渐进式升级示例
下面，我们通过一个例子来演示如何进行渐进式升级。在这个例子中，我们假设一个已有的 Web 应用需要进行 PWA 升级，我们将逐步添加 PWA 的核心功能。
步骤一：添加 Web App Manifest
第一步，我们添加 Web App Manifest，以实现响应式布局，同时实现将应用添加到主屏幕。Web App Manifest 是一个 JSON 文件，定义了应用的名称、图标、启动画面、主题色等信息。
在 HTML 的 head 标签中添加以下代码：
<link rel="manifest" href="manifest.json">
在应用的根目录下，新建一个名为 manifest.json 的文件，填入以下内容：
-- -------------------- ---- -------
-
------- --- -----
------------- --- -----
-------- -
-
------ ---------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------
-------- ----------
------- -----------
-
--
-------------- ----------
------------------- ----------
------------ ----
---------- ------------
-在这里，我们定义了应用的名称、缩略名、图标、主题色、背景色，以及在主屏幕上启动的 URL 等信息。其中，icons 数组包括了应用在不同尺寸下的图标，type 指定了图标的 MIME 类型。在 start_url 中，我们定义了应用打开时的默认页面。display 属性指定了应用的打开方式，standalone 表示应用会以自己的窗口打开，而不是在浏览器中打开。
步骤二：使用 Service Worker 缓存静态资源
第二步，我们使用 Service Worker 缓存网站的静态资源，以实现快速加载和离线访问。Service Worker 是一种 JavaScript 程序，可以在后台运行，拦截网络请求，并通过缓存机制实现离线访问、快速加载等功能。
在应用的根目录下创建一个名为 sw.js 的文件，填入以下代码：
-- -------------------- ---- -------
----- ---------- - ---------------
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- --------------
---------------
--------------
------------------
-----------------
---
-------- -- -------------------
--
---
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -------- -- ---------------------
--
---在这里，我们首先定义了缓存名称，然后在 install 事件中，将需要缓存的资源添加到 caches 中，并调用 self.skipWaiting() 方法，使 Service Worker 尽快完成安装。在 fetch 事件中，我们拦截网络请求，并优先从缓存中获取响应。如果缓存中没有，再从网络获取。
在 HTML 文件中，注册 Service Worker：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('ServiceWorker registration successful with scope: ', registration.scope))
.catch(err => console.error('ServiceWorker registration failed: ', err));
});
}在这里，我们首先判断浏览器是否支持 Service Worker，然后在页面加载完成后，调用 navigator.serviceWorker.register() 方法注册 Service Worker。
到这里，我们已经添加了 PWA 的两个核心功能，通过 Web App Manifest 实现了响应式布局和添加到主屏幕的功能，通过 Service Worker 实现了缓存静态资源的功能。
步骤三：添加推送通知
第三步，我们添加推送通知功能，以便向用户发送通知。在 PWA 中，推送通知是通过 Service Worker 实现的。
首先，在 sw.js 中添加以下代码：
self.addEventListener('push', event => {
event.waitUntil(
self.registration.showNotification('My PWA', {
body: 'New message!',
icon: 'images/icons/192x192.png'
})
);
});在这里，我们通过监听 push 事件，拦截推送通知，并展示通知。在 showNotification() 方法中，我们定义了通知的标题、内容和图标。
在订阅推送服务的页面中，我们添加以下代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
----------------------------------------------- -- -
------------------------------------
---------------- -----
--------------------- -----------------
-------------------- -- -
------------------------- -------- -- ------------------------------
------------ -- -------------------- -------- ------------- -- ------
---
-在这里，我们使用 pushManager.subscribe() 方法订阅推送服务。参数 userVisibleOnly 表示只有在用户可见的情况下才显示通知。applicationServerKey 用于让服务端确定通知的接收者。
到这里，我们已经添加了推送通知功能。
步骤四：离线数据访问
第四步，我们添加离线数据访问功能，以提升用户体验。
在 sw.js 中添加以下代码：
-- -------------------- ---- -------
------------------------------ ----- -- -
----- ---------- - --- -----------------------
-- ------------------------------------- -
------------------
---------------------------
-------------- -- -
-- ---------- -
--------------------- ---- ------ -- ----------
------ ---------
-
--------------------- ---- -------- -- ---------------
------ --------------------
-------------- -- -
--------------------- ---- -------- -- ----------
-----------------------
----------- -- ------------------------ -----------
------ -----------------
--
---------- -- ---------------------- ----- ------- -- ------
--
--
- ---- -
------------------
---------------------------
-------------- -- -------- -- ---------------------
--
-
---在这里，我们在 fetch 事件中，对于 API 请求，先从缓存中查找响应。如果找到了，直接返回缓存中的响应。如果没有找到，再从网络中获取，并存入 caches 中。对于其他请求，同样从缓存中查找响应。
在页面中，我们使用 IndexedDB 存储数据。在 js/app.js 文件中，添加以下代码：
-- -------------------- ---- -------
----- --------- - ------------------ -- --------- -- -
-- -------------------------------------------------- -
--------------------------------------- - -------- ---- ---
-
---
-------- ----------------- -
----------------- -- -
----- ----------- - -------------------------- ------------
----- ----- - ------------------------------------
------ ---------------
---------------- -- -
----- ----------- - ----------------------------------------
--------------------- - ---
------------------------ -- -
----- -- - -----------------------------
-------------- - ----------------
----------------------------
---
---
-
-------- ------------ -
----- ------- - -----------------------------------------------
----------------- -- -
----- ----------- - -------------------------- -------------
----- ----- - ------------------------------------
----------- --- ----------- ------- ---
------ ---------------------
---------- -- -
-------------------- ------ -- ---------
------------------
---
-
----------------------------------------------------------------------- ------------
------------------在这里，我们使用 idb 库打开 IndexedDB 数据库，并在 upgradeDb 事件中，定义了一个名为 messages 的对象仓库。refreshMessages() 函数从 messages 中获取数据并渲染到页面中。addMessage() 函数将用户输入的信息保存到 messages 中。
到这里，我们渐进式升级的过程就完成啦！
总结
PWA 技术可以大大提升 Web 应用的用户体验。但是，对于已有的 Web 应用来说，我们需要进行渐进式改造和升级，以逐步实现 PWA 的核心功能。在本文中，我们演示了如何根据 PWA 的核心功能，一步一步地进行升级，具体包括添加 Web App Manifest、使用 Service Worker 缓存静态资源、添加推送通知以及实现离线数据访问。希望本文对大家了解 PWA 技术的渐进式升级提供了一些帮助，也希望大家能够在实践中继续探索 PWA 技术的应用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6450812d980a9b385b986149