Progressive Web App (PWA) 是一种能够帮助前端工程师开发高性能、可靠、可安装的 web 应用的技术。一个 PWA 应用可以接近 Native 应用的体验，包括离线功能、推送通知和本地缓存等优点。本文将详细介绍如何将一份类新闻客户端改造成 PWA 应用。
准备工作
首先，需要确保项目可以运行在 HTTPS 协议下，这是 PWA 的基础要求。我们可以使用能够提供 HTTPS 证书的实现服务器，比如 nginx。
接下来，我们需要添加一个 manifset.json 文件，该文件是 PWA 的核心文件之一。它定义了 PWA 如何在移动设备上显示，一般包括应用名、图标、启动颜色等元素。
-- -------------------- ---- -------
-
------- --- ---- -----
------------- ----- -----
-------- -
-
------ ------------------------------
-------- --------
------- -----------
--
-
------ ------------------------------
-------- --------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
-
--
------------ ----
------------------- ----------
-------------- ------
-这个文件中我们可以定义应用的名称、图标、启动方式、背景色等。
现在，我们需要添加一个 service worker 文件，它是 PWA 的核心技术之一。Service Worker 是浏览器内部运行的一段 JavaScript 代码，它可以拦截网络请求，并缓存网络资源，实现离线访问、资源更新等功能。
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ----------- - -
----
-------------
-------------
-------------
------------------------------
------------------------------
-------------------------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---
--------------------------------- --------------- -
----------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ------------------------------------------ --
--------- -- -----------
-------------------------- -
------ -------------------------
--
--
--
--
---上述代码中，我们定义了一个名为 CACHE_NAME 的缓存版本以及需要缓存的资源列表 urlsToCache。在 Service Worker 安装成功之后，代码会将这些资源缓存起来。而在 fetch 事件中，如果资源已被缓存，则直接返回缓存。如果资源没有被缓存，则去网络获取。
最后，在应用的 index.html 中添加以下代码，用于注册和启用 service worker。
-- -------------------- ---- -------
--------
-- ---------------- -- ---------- -
-----------------------------------------------------
---------------------------- -
-------------------- ------ ---------- ---- -------- --------------------
------------------------ -
-------------------- ------ ------------ --------- -------
---
-
---------实现离线访问
通过 Service Worker，我们可以实现 PWA 的另一个核心功能：离线访问。下面，我们以实现离线访问为例，来说明如何在 PWA 中实现其他功能。
在我们的示例应用中，我们希望用户能够在离线状态下浏览已加载过的页面。为了实现这个目标，我们可以在 service worker 的 install 事件中，将需要展示的页面和相应的依赖文件缓存到浏览器本地。
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});下一步，我们需要修改 Service Worker 的 fetch 事件，让它在缓存中查找已经请求过的资源。如果缓存中存在这个资源，则返回缓存中的结果。如果没有缓存，则去获取。这样，即使用户处于离线状态下，应用也能够使用缓存中的数据进行展示。
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ ---------------------
--
---------------------- -
--------------------- ------
--
--
---实现推送通知
借助 Service Worker，我们还可以实现 PWA 中的另一个强大功能：推送通知。在示例应用中，我们将使用 push API，来向用户发送新闻推送通知。
首先，我们需要请求用户的权限，以便访问 Notification API。
Notification.requestPermission(function(status) {
console.log('Notification permission status:', status);
});然后，我们需要监听 push 事件，一旦收到推送通知，则将它展示给用户。
-- -------------------- ---- -------
----------------------------- --------------- -
--------------------- - ---- --------- -------
--- ----- - ---- ------- -----------
--- ---- - ------ -- ---- --- ------ -------
--- ---- - ---------------------------------
--- --- - --------------
----------------
----------------------------------------- -
----- -----
----- -----
---- ---
--
--
---最后，在应用的 index.html 中添加以下代码，用于注册和启用 push 服务。
-- -------------------- ---- -------
--------------------------------------------------------- -
------------------------------------
---------------- -----
--------------------- -------------------------------------------------
--
---------------------------- -
----------------- -- ------------- --------------
--
---------------------- -
----------------- ------------ --------- -------
---
---结语
本文通过实现一个 PWA 类新闻客户端的例子，详细讲解了 PWA 技术的实现流程，包括 HTTPS 协议、manifest.json 和 service worker 的使用。并且，我们还演示了如何通过 Service Worker 实现离线访问，以及如何借助 push API 实现推送通知等功能。PWA 技术未来发展前景广阔，希望本文能给需要的读者带来帮助和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67823f1a935627c900fe6881
