随着移动设备的普及以及用户对 Web 应用的要求越来越高，PWA 成为了广受欢迎的新技术。PWA（Progressive Web App）是一种结合了 Web 技术和 Native 应用优秀体验的解决方案，其所具有的离线缓存、消息推送等重要功能可以极大地提高 Web 应用的用户体验，让 Web 应用可以像 Native 应用一样流畅、响应迅速、体验优秀。
什么是 PWA？
PWA 是一种使用 Web 技术创建的应用，能够以可靠、快速和渐进式的方式为用户提供应用体验。它充分利用了现代浏览器的功能，为用户提供与 Native 应用相似的用户体验。
PWA 应用需要满足以下几个标准：
- 响应式。PWA 应用需要能够在任何设备上以相同的 UI 来呈现。PWA 应用可以在手机、平板以及桌面电脑上运行。
- 独立。PWA 应用不需要经过应用商店的审核，可以直接从 Web 浏览器中访问。
- 链接性。PWA 应用可以通过 URL 进行访问，并且可以在不同页面之间进行导航，就像传统的 Web 应用一样。
- 安全。PWA 应用必须使用 HTTPS 协议来保证用户数据的安全性。
- 可发现性。PWA 应用可以被搜索引擎发现并收录。
- 可安装性。用户可以通过添加到主屏幕或者其他方式来安装 PWA 应用到本地设备中。
- 离线能力。PWA 应用需要支持离线访问。
使用 PWA 技术开发 Web 应用
接下来，我们将通过一个实例来了解如何使用 PWA 技术开发 Web 应用。
实例介绍
我们将开发一个可以离线访问的计数器应用。用户可以通过应用来对一个数字进行加减，应用将会实时存储其状态，使得用户下次再访问时可以恢复之前的状态。
环境配置
使用 PWA 技术开发需要我们安装以下工具：
create-react-app：用于基于 React 创建 Web 应用；http-server：用于创建一个 HTTP 服务器，以保证该应用可以离线访问。
- -- ----- -- --- ---------------- ------- -- ------- - -- ----------- --- - -----------
配置 Service Worker
Service Worker 是 PWA 实现离线访问的关键技术。我们需要为 React 应用添加 Service Worker。
在 public 目录中添加一个 sw.js 的文件，并添加以下代码：
----- ---------- - ---------------
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ ------------------- --------------- --------------------
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
------ -------- -- ---------------------
--
--
---这里，我们在 Service Worker 的 install 事件中缓存了应用的基本文件（包括主页、manifest.json 等），在 fetch 事件中如果发现当前的请求已经被缓存，则直接返回缓存中的内容。这样我们就可以实现离线访问的能力。
我们需要在 index.js 中注册 Service Worker：
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------
-------------- -- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
--
----- -- -
-------------------------- ------------ ------- -- -----
-
--
---
-这里，我们在 window 的 load 事件中注册了 Service Worker。
配置 Manifest
为了能够让应用以应用程序的方式运行，我们还需要为该应用添加一个 Manifest 文件。
在 public 目录中添加一个 manifest.json 文件，并添加以下内容：
-
------------- ----------
------- ---- -----
-------- -
-
------ --------------
-------- ----------
------- -----------
--
-
------ --------------
-------- ----------
------- -----------
-
--
------------ ----
---------- -------------
-------------- ----------
------------------- ---------
-这里，我们定义了应用的名称、图标列表、启动 URL、显示方式，以及主题色和背景色。
开发应用
接下来，我们可以开始开发我们的计数器应用了。可以在 src 目录下创建一个名为 Counter.js 的文件。
------ ------ - --------- --------- - ---- --------
------ ----------------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
----- ----------- - ------------------------------
-- ------------- -
--------------------------------
-
-- ----
------------ -- -
----------------------------- ------------------
-- ---------
------ -
---- --------------------
-- -------------------------------------
---- ----------------------------------
------- --------------------------- ----------- -- -------------- - --------------
------- --------------------------- ----------- -- -------------- - --------------
------
------
--
-
------ ------- --------这个组件中，我们使用了 React 的 useState 和 useEffect hook 来维护一个计数器。每次计数器更新时，我们会将其保存到本地存储中。
在 App.js 文件中，我们将我们的计数器组件引入进来：
------ ----- ---- --------
------ ------- ---- ------------
-------- ----- -
------ -
---- ----------------
-------- --
------
--
-
------ ------- ----运行应用
运行 npm start 命令可以启动应用。我们还需要在另一个终端中运行 http-server ./build 命令来创建一个 HTTP Server 将该应用部署到本地。
现在，我们可以在浏览器中访问 http://localhost:8080/ 来查看我们的计数器应用了。
运行效果
当我们通过应用来对计数器进行加减操作时，应用将实时将其状态保存到本地存储中。即使我们断开了网络，我们仍然可以访问之前的状态：
总结
PWA 技术为 Web 开发带来了更高的质量要求，让 Web 应用有了更多的 Native 应用的体验，实现了 Web 应用与 Native 应用的“无缝对接”。
该文介绍了如何基于 PWA 技术实现一个离线应用。通过 Service Worker 技术实现了离线访问的能力，通过 Manifest 文件将应用添加到主屏幕，提供了更高的用户体验。
希望该文能对想学习 PWA 技术的前端开发者提供一定的参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6653167dd3423812e47988b5