随着移动终端的普及和发展，越来越多的用户习惯使用移动设备访问网站，移动端网站不仅需要满足良好的视觉体验，还需要具备较好的体验性能。PWA（Progressive Web App）是 Google 提出的一种全新的 Web 应用开发方式，它可以将网站转变成一个功能更加强大、用户体验更好的应用。本文将介绍如何将移动端网站升级为 PWA 应用。
什么是 PWA？
PWA 顾名思义，是渐进式 Web 应用的缩写，它是一种全新的 Web 应用开发方式。它结合了 Web 应用和原生应用的优点，并且可以离线访问，性能更加出色，给用户带来更好的用户体验。可以用以下几个特点来概括：
- 快速、可靠、安全：可以通过 Service Worker 缓存网页资源，即使没有网络连接，也可以访问 Web 应用。
- 给予用户装APP般的体验：可以在浏览器中以全屏应用的形式使用，用户可以添加到桌面，即使关闭浏览器也可以运行。
- 瓶颈影响最小：PWA 能够在各种浏览器平台上工作，并装载速度快。
PWA 应用的核心技术
Service Worker
Service Worker 是 PWA 应用的核心技术，是一种后台线程，用于缓存资源以及离线使用，这样就能够提供更快的访问速度和离线访问功能。Service Worker 使用 JavaScript 编写，运行在独立的上下文中。与传统网页里面的 JavaScript 不同，它是在用户退出网站之后依然在后台运行。
当然，要想使用 Service Worker，就要考虑一些其它的问题：
- Service Worker 只能使用 HTTPS 协议，如果不是 HTTPS 协议，Service Worker 将无法安装。
- Service Worker 只能在支持的浏览器版本中被使用。
- 由于 Service Worker 是后台运行的，所以它无法直接使用 DOM，因此不能像在主线程中那样进行一些操作。
Manifest
Manifest 是 PWA 应用的另一个核心技术，它是 JSON 文件，定义了 Web 应用的名称、颜色、图标等元数据，可控制 Web 应用在桌面和启动屏幕上的外观和行为。这个文件告诉浏览器如何处理 web 应用的安装，添加到桌面，启动等行为。
如何将网站转变成 PWA 应用
下面将介绍一些步骤，以及具体如何实现这些步骤。
1. 添加 Manifest 文件
在根目录下创建一个名为 manifest.json 的文件，并写入以下代码：
-- -------------------- ---- -------
-
------- ------------ --- -----
------------- ------
-------------- ----------
------------------- ----------
---------- -------------
-------- -
-
------ -----------------------
------- ------------
-------- -------
--
-
------ -----------------------
------- ------------
-------- -------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
-
-
-这里定义了一些基本属性，包括应用的名称、短名称、主题颜色、背景颜色等，可以根据自己的需求进行修改。
2. 注册和安装 Service Worker
在现有的 JavaScript 文件中，添加以下代码，用于注册和安装 Service Worker：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
-------------------------------------------------------
---------------------------- -
-------------------- ------ ---------- ---------------
--
---------------------- -
-------------------- ------ ------------ --------- -------
---
---
-这里判断浏览器是否支持 Service Worker，如果支持就注册一个 Service Worker，将相应的代码放到脚本的合适位置。
3. 编写 Service Worker 脚本
创建一个名为 service-worker.js 的文件，并将以下代码添加到文件中：
-- -------------------- ---- -------
--- ---------- - ------------------
--- ----------- - -
----
--------------
------------------
-----------------
------------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------ ---------
------ --------------------------
--
--
---
--------------------------------- --------------- -
-- -- ---------
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ----- --- - ------ --------
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---这里用了 PWA 的核心技术之一 Service Worker，通过 event.listenner 捕获事件，当浏览器访问一个被缓存过的 URL 的时候，Service Worker 将会拦截浏览器的请求，并且从缓存中查找相对应的资源。
4. 开始使用
现在任何进一步对您网站的访问将会被作为PWA应用进行访问。例如，当用户在设备主屏幕上点击添加到主屏幕按钮时：
-- -------------------- ---- -------
----- --------------- ---------------------------- -----------------
----- -------------- ----------------------
------- -----------------------
-- ---------------- -- ---------- -
------------------------------------------------------
---------------- -
-------------------- ------ -------------
---
-
---------这里通过在页面的头部增加两行代码，即可添加到主屏幕，体验更加流畅。
总结
本篇文章介绍了 PWA 的核心技术，以及如何将网站升级为 PWA 应用。PWA 应用给用户带来了更好的用户体验，使用户可以离线访问网站，享受 Web 应用带来的福利。为了更好地使用 PWA，可以参考本文所述的方法来升级移动端网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3334b48841e9894f73007