将业务 APP 转为 PWA 提升用户体验
在移动设备普及的时代，业务 APP 已经成为人们生活中必不可少的一部分。但是，随着 APP 数量的增长，用户对 APP 的要求也越来越高，对好用、快速、省流量的 APP 有更高的期望值。而 PWA（Progressive Web App，渐进式 Web 应用程序）的出现，为开发者和用户带来了更好的体验。
什么是 PWA？
PWA 是由 Google 公司提出的一种概念，是一种基于 Web 技术，具备类似于原生应用的用户体验的 Web 应用。PWA 可以像普通网站一样被用户发现和访问，但也可以被添加到用户的主屏幕上，并且可以离线访问。
PWA 的核心特性包括：
- 安全：使用 HTTPS 来保障用户的数据安全；
- 渐进式：能够逐步增强应用的功能，且不影响已有的功能；
- 可发现性：能够被搜索引擎搜索到，并且可以通过链接分享；
- 可更新性：能够在后台自动更新，以便于用户每次访问时都可以获得最新版本；
- 可安装性：可以被用户添加到主屏幕上，以便于快速访问和使用；
- 可离线访问：能够在离线状态下访问，不影响用户访问体验。
PWA 对提升业务 APP 用户体验的影响
PWA 的出现，对提升业务 APP 的用户体验起到了非常积极的影响。PWA 可以在浏览器中以一致的方式提供类似原生应用的用户体验，包括更快的响应速度、更好的离线缓存、更小的应用体积等，下面是具体的影响：
- 更快的加载速度：PWA 将静态资源缓存下来，使得应用加载速度更快。而现在大家基本都是用 4G，访问更流畅是非常重要的用户体验提升；
- 更好的离线缓存：PWA 可以在用户处于离线状态时继续运行，用户可以在离线状态下使用应用；
- 更小的应用体积：PWA 可以将网页应用缩减到最小，并使用网页应用清单来描述应用的信息，避免了应用的下载和升级过程中的不必要的流量消耗；
- 更好的推送信息：应用可以使用推送功能发送消息，提醒用户在应用中查看消息。
如何将业务 APP 转为 PWA
在将业务 APP 转为 PWA 的过程中，其实最难的是理解 PWA 的本质，理解每一个 PWA 的特性，并将之在应用中落地。下面是具体的步骤：
1. 使用 HTTPS 来保证安全性
PWA 可以通过在 HTTPS 连接上进行服务工作，以确保安全。HTTPS 连接是 PWA 的必要要求。建议使用 Let's Encrypt 等工具免费获取 SSL 证书。
2. 在网站清单中使用 manifest.json
在网站清单中，存储了应用的图标、主题色、背景颜色等元数据，这些信息被用于用户手机上的应用切图和样式，从而让网页应用看起来像原生应用。下面是一个简单的 manifest.json 文件示例：
-
------- --- -------- -----
------------- --- -----
-------- -
-
------ -------------------------------
-------- --------
------- -----------
--
-
------ -------------------------------
-------- --------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------------
-------- ----------
------- -----------
-
--
------------ ----
------------------- ----------
---------- -------------
-------------- ---------
-3. 注册服务工作线程
通过 ServiceWorker 注册一个脚本文件，并告诉浏览器何时执行该脚本文件。ServiceWorker 可以使用 fetch() API 拦截网络请求，通过缓存和从网络获取数据的策略来处理它们。下面是一个简单的 ServiceWorker 文件示例：
-- -- -- ------- ---------- ------------------ -----
-------------------------------- --------------- -
-------------------- -----------
------------------------------------
---
-- -- -- -------- --------------- -------------------- -----
--------------------------------- --------------- -
--------------------- -----------
--------------------------------------
---
-- -- -- ----- ----------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---注意，可以通过 navigator.serviceworker.controller 来判断当前页面是否已经被安装为 PWA。
4. 添加离线页面
将一个简单的 HTML 文件缓存下来，即可在离线时使用该 HTML 文件。下面是一个简单的离线页面示例：
--------- -----
------
------
-------------- ------------
-------
------
--------- --- --- -------------
-------
-------5. 添加 PWA 元素
将 PWA 元素嵌入到 HTML 文件中，以便在页面上显示 PWA 按钮，下面是一个简单的 PWA 元素示例：
----- -------------- ---------------------
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
--------------- ------------ ---------- --------------
-- --------------- -
--------------- ------------ -------- -------
---
---
-
---------6. 安装 PWA
当应用满足 PWA 的所有特性后，用户会在浏览器上看到一个安装 PWA 的提示框，可以通过单击该框来安装应用。
总结
通过以上步骤你可以将你的业务 APP 转为 PWA，实现更好的用户体验和更高的用户留存，除此之外，PWA 的持续改进和 Web 技术的不断成熟，将为 PWA 带来更多的机会和挑战，开发者们也需要在 PWA 开发中，深入拓展自己的学习和实践。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6482b20d48841e9894210462