什么是 PWA？
PWA 全称为“Progressive Web App”，中文名为“渐进式网络应用程序”。简单理解，PWA 就是一种使用新技术使传统网站具有类似原生应用的能力和用户体验的应用程序，可以实现离线缓存、推送通知、桌面图标等功能。
PWA 相比原生应用的优势在于不用安装即可使用，无需升级，同时可以节省用户存储空间，具备跨平台、可搜索等特性。
PWA 的离线化
PWA 的离线化是指即使没有网络连接，用户仍可访问 Web 应用程序。这是 PWA 的一大优势。离线化的实现离不开两个重要的概念：Service Worker 和 Cache Storage。
Service Worker
Service Worker 是一个后台线程，独立于 Web 应用程序，负责拦截和处理网络请求以及离线缓存等。作为一种新的浏览器 API，Service Worker 具有以下特点：
- 独立于网页，可长期运行和管理缓存
- 支持离线模式
- 可以监听到网络请求和返回的响应，对请求进行拦截和处理
Cache Storage
Cache Storage 是 Service Worker 的一个子 API，可以用来存储应用程序的静态文件如 JS、CSS、图片、字体等。这些静态资源可以在第一次请求时被缓存，并在离线时被 Service Worker 直接从 Cache Storage 中读取。
离线缓存策略
离线化需要用到缓存策略。常用的两种缓存策略是：静态缓存策略和动态缓存策略。
静态缓存策略
静态缓存策略是指缓存静态资源，如 HTML、JS、CSS、图片、字体等。一般情况下，这些资源不会频繁更新，所以可以在第一次获取时就缓存下来。这样就可以在离线情况下通过缓存读取这些资源。
-- -------------------- ---- -------
-- --------
-------------------------------- ----- -- -
----- ----------- - -
----
-------------------
---------------------
-------------------
--
----------------
---------------------------------- -- -
------ --------------------------
--
--
---
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ------------------------------ -- -
-- --------- -
------ ---------------------------------- -- -
------------------------ --------------
------ -----
---
-
---
--
--
---动态缓存策略
动态缓存策略针对缓存资源更新的情况。与静态缓存策略不同，动态缓存策略会先请求网络，获取最新资源并加以缓存。
-- -------------------- ---- -------
-- --------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ------------------------------ -- -
-- ------ -- ----------- --- --- -- --------- --- -------- -
------ -----
-
----- ----------- - -------------
---------------------------------- -- -
------------------------ -------------
---
------ -----
---
--
--
---Manifest
Manifest 是 PWA 的一个重要组成部分，它是一个 JSON 格式的文件，包含了一个 Web 应用程序的元数据。Manifest 中定义了一些基本信息，如应用的名称、图标、背景色、起始页面、离线访问等等。
-- -------------------- ---- -------
-
------- --- -----
------------- ------
-------- -
-
------ -----------
-------- ----------
------- -----------
--
-
------ --------------
-------- ----------
------- -----------
-
--
------------ ----
------------------- ----------
-------------- ----------
---------- -------------
--------------- --------------
-在 Manifest 中，我们可以定义应用的桌面图标、作为启动页面的 URL、主题色以及离线时显示的自定义页面。
PWA 的使用案例
我们可以通过一个简单的示例来演示 PWA 的用法，示例代码如下：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------- ----------
----- -------------- -------------------- --
----- ---------------- ----------------- --
-------
------
--------
------- -------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------
------
--------- --------
-------
------- ----------------------
-------
-------这里定义了一个简单的 HTML 页面，同时引入了 manifest.json、styles.css 和 app.js。其中，manifest.json 定义了 PWA 应用的元信息。
-- -------------------- ---- -------
-
------- ---- ----
------------- ---- ----
-------- -
-
------ --------------
------- ------------
-------- ---------
--
-
------ --------------
------- ------------
-------- ---------
-
--
------------ ----
------------------- ----------
---------- -------------
-------- ----
-------------- ---------
-这里定义了 PWA 应用的名称、图标、起始页、背景色、颜色主题等信息。
在 app.js 中，我们可以利用 Service Worker 将“/about”、“/contact”等页面缓存、离线化，让用户在离线状态下仍可访问这些页面。
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -------- -- -
-------------------------------------------------------- -------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- -------- ----- -
-------------------------- ------------ ------- -- -----
---
---
-
------------------------------- -------- -- -
-- ---------------- -- --------- -- ------------- -- ------- -
------------------------------------------- --------------------------- -
--- ---- - -------------------------------
------------------------------- -------- ------- -
-----------------------
--- ----- - -------------------------------------------
--- ------- - ------------
-- --------------- --- --- -------
--------------------------------------------- ------- -
----------- - ---
---
---
---
-
---这里我们使用了 IndexedDB 将用户提交的信息缓存，利用 SyncManager 和 Service Worker 实现了离线提交功能。
总结
PWA 的离线化是目前 Web 开发的一个热门话题，实现离线访问、推送通知等功能需要使用 Service Worker 和 Cache Storage 等 API 去实现。同时，Manifest 定义了 PWA 应用的元信息，如名称、起始页、图标等。
值得一提的是 PWA 技术虽然有很多的优点，但是它也有一定的缺点，比如 iOS 对于 PWA 的支持和 Native 相比还是有一些不足，而且在应用安装时无法直接访问硬件等等。
当然，作为一种融合了 Web 和 Native 的技术，PWA 在未来一定会有越来越广阔的前景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4bbfd83d39b488182c48a