Progressive Web App (PWA)，又称渐进式Web应用，是一种新型的Web应用程序模式。PWA通过现代Web能力使得Web应用程序功能和用户体验变得更加接近原生应用，因此吸引了越来越多前端工程师的关注。
什么是 PWA？
PWA初衷是为了将 Web 站点变成模拟原生应用的桌面应用，包括离线缓存、桌面应用图标等，但本质上还是 Web 应用。
PWA 的特点
- 即时、可靠、快速的加载速度；
- 具有类似原生应用的体验；
- 离线缓存、后台通知和其他Web能力，让网页具有类似原生应用的功能。
PWA 的兼容性
- 强兼容： Chrome 55+，Firefox 46+，Opera 42+以及 Edge 17+
- 一般兼容：与内置浏览器运行的 Android Browser和 IOS Safari
- 不兼容： IE, UC, QQ 等浏览器
PWA 离线缓存原理
PWA 离线缓存是该技术最重要的部分。我们都知道，Web 应用离线状态下无法加载资源，会导致页面空白，所以离线缓存应运而生。
离线缓存包括两个部分：App Shell 和 Content。
App Shell
App Shell 是应用的基本结构，是一部分被缓存，并在离线状态下提供必要UI的 HTML、CSS 和 JavaScript 文件。它们以及相应的资源被下载并缓存在用户设备上，而不像常规的 Web 应用程序那样需要从网络中进行加载。
Content
Content 是特定应用程序所需的其他页面和数据，例如文章、图片、视频等。在离线状态下，用户可以浏览之前与网络进行交互并缓存的内容。
PWA手动实现离线缓存
为了加深对 PWA 离线缓存的理解，我们可以手动实现。
1. 创建manifest.json
在项目根目录下创建manifest.json。该文件是PWA必不可少的文件之一，用于定义Web应用程序到主页、图标和其他元数据等的映射。
示例代码如下：
-- -------------------- ---- -------
-
------- --- ----------- --- -----
------------- --------
-------- -
-
------ -------------------------------
-------- --------
------- -----------
--
-
------ -------------------------------
-------- --------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
-
--
-------------- ----------
------------------- ----------
------------ ---------------
---------- -------------
-------- ----
-------------- ----------
-2. 编写Service Worker
Service Worker 是一个在后台运行的 JavaScript文件，用于管理 PWA 离线缓存。它充当了首次访问站点的中介，同时它方法里的所有事件能够触发缓存和网络调用。
-- -------------------- ---- -------
-- --------- --------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-
-- ---------
------------------------------ -------- ------- -
-- ------------------- --- ----------- -
------------------
----------------------------- --
----------------------------------------- -- -------- -- -----------------------------
--
--
- ---- -
------------------
----------------------------------------- -- -------- -- ----------------------
--
-
---
-- -----------
-------------------------------- -------- ------- -
----- ----------- - -
----
--------------
-------------------
---------------------
----------------------------
--
----------------
-------------------------------------- ------- -
------ --------------------------
---
--
---
-- ----
--------------------------------- -------- ------- -
-------------------- ------ ----------------
----------------
--------------------------- --------- -
------ ------------
-------------------- ----- -
-- ---- --- ------------ -
------ -------------------
-
---
--
---
--
---3. 将Service Worker 注册到应用
在 HTML 中，注册 Service Worker 加载指向我们新 Service Worker 的文件路径。
-- -------------------- ---- -------
------
------- ------------------------------ ----------------------------------
---- ---- ------- ------ ---
--------
-- ---------------- -- ---------- -
-------------------------------------------
-
---------
-------PWA 不为人知的花絮
虽然PWA有很多显著的好处，但这项新技术也有它的缺点和限制。
存储限制
由于离线缓存数据实际上保存在用户设备中，因此存储限制也是一大问题。您可能会发现，离线可用的内容几乎不可能达到50MB以上。
缓存过期时间限制
在许多情况下，您可能需要强制浏览器重新从服务器获取资源。PWA 允许您设置资源的缓存过期时间，但在某些情况下浏览器必须忽略缓存并重新请求资源。
不支持文件上传
PWA 目前不支持通过文件上传向服务器上传任何数据。这使得开发与具有类似于在线办公套件的应用程序更加困难。
安全
由于 PWA 可以滥用监视用户的信息，例如以恶意方式监视用户的网络行为，因此所有PWA都需要使用SSL。
总结
随着 Chrome 浏览器和其他先进浏览器对 PWA 的支持，PWA 变得越来越流行。它通过最佳实践为 Web 应用提供了新的标准，提供了更好的用户体验，更快的响应速度和离线支持。学习和实践 PWA，将为你未来的开发工作奠定基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e18207f6b2d6eab3cada01