随着移动互联网的兴起，Web 应用程序越来越受到关注。但是，这些 Web 应用程序必须要克服一个很大的问题：缺乏 Native 应用程序的可用性和性能。在过去，Web 应用程序无法与桌面或移动应用程序的性能或体验相媲美。但是，现在有了 PWA（渐进式 Web 应用程序）技术，Web 应用程序可以与 Native 应用程序一样平滑地运行，并具备极好的用户体验。
什么是 PWA
PWA 是一种使用 Web 技术编写的应用程序，可以自动启动、快速响应和提供离线功能，类似于 Native 应用程序。PWA 可以使用 Service Worker 技术，在用户与应用程序交互时提供离线体验、优化性能和减少网络开销等功能。PWA 还可以通过添加到主屏幕、安装到设备的应用程序列表和使用 push 通知等功能来改善用户体验。
PWA 的优势
- 可靠性：PWA 可以离线运行，用户可以在缺少网络连接时仍然访问应用程序。
- 速度：PWA 可以加载并显示应用程序的内容，快于手机浏览器中的常规应用程序。
- 面向所有设备：PWA 可以在任何设备上访问，包括桌面电脑、平板电脑、手机、智能手表等。
- 融合到操作系统：PWA 可以直接安装在操作系统上，就像本地应用程序一样。
- 发现性：PWA 可以被搜索引擎索引，并且与 Native 应用程序一样可以通过应用商店进行推广。
创建 PWA 应用程序
在开始创建 PWA 应用程序之前，首先需要了解 PWA 应用程序的构建块。
Manifest 文件
Manifest 文件是 PWA 应用程序的关键组成部分之一。Manifest 文件描述了应用程序的名称、图标、主页面 URL、相关连接、颜色等信息。Manifest 文件必须被添加到网站的 html 文件中，以便浏览器可以了解有哪些应用程序可以安装。
Manifest 文件的示例：
-- -------------------- ---- -------
-
------- ---- ------
------------- -------
-------- -
-
------ ------------------------------
------- ------------
-------- -------
-
--
------------ ----
------------------- ----------
---------- -------------
-------------- ---------
-Service Worker
Service Worker 是 PWA 应用程序的另一个关键组成部分。Service Worker 是一种 JavaScript 文件，可以在浏览器客户端运行。Service Worker 可以拦截请求、提供离线缓存和响应 push 通知等功能。Service Worker 可以在浏览器窗口关闭时继续运行，这使得它可以执行异步操作并在必要时更新缓存。
Service Worker 文件的示例：
-- -------------------- ---- -------
------------------------------------
-------------------------------- ----------- -
------------
-------------------------------------------- -
------ --------------
----
--------------
-------------------
-----------------------
-------------------
------------------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---Web App Manifest 和 Service Worker 注册
-- -------------------- ---- -------
------
----- ----------------
----- --------------------- ---------------
----- --------------- ---------------------------- ---------------- ------------------
---------- ------------
--------
-- ---------------- -- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
---------------------- -
-------------------------- ------------ ------- -- -----
---
-
---------
-------
------
------- ---------
---------- -- --- --- ---------
-------渐进式增强
PWA 应用程序应该以渐进式增强的方式构建。这意味着应用程序应该能够在任何设备上运行，并且应该尽可能地提供质量和性能改进。在许多情况下，约束或限制将使应用更具有活力和反应力。
PWA 应用程序的测试
在构建 PWA 应用程序之后，需要对其进行测试，以确保其能够运行并获得预期的结果。
DevTools Audit
使用 Chrome 浏览器中的 DevTools Audit 工具可以模拟移动设备并测试应用程序的性能。通过此工具，可以确保应用程序能够更快地加载、更快地回应、更少的 HTTP 请求、更少的 JavaScript 文件等等。
运行时测量
使用 Lighthouse 或 PWA 等运行时测量工具评估 PWA 应用程序的性能。这些工具可以评估应用程序的加载时间、响应时间、缓存策略、可访问性、SEO、PWA 兼容性和其他一些关键指标。
结论
PWA 技术为 Web 应用程序提供了与本地应用程序相媲美的性能和体验，并且可以在任何设备上运行。这些应用程序可以提供离线体验，优化性能和减少网络开销等功能。通过使用现代浏览器提供的新的构建块和工具，您可以轻松构建 PWA 应用程序，并在网页上添加即可。PWA 技术将是 Web 开发领域的一个巨大进步，建议开发者们了解并尝试这个值得信赖的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67028316d91dce0dc8479f73