Progressive web apps (PWA) 是一种新型的 web 应用程序，提供了类似于原生应用程序的体验。PWA 是一个全新的 web 应用程序，它使用现代化的网络技术，将 web 应用程序转化为可靠的、快速的、渐进式体验的顶级应用程序。PWA 的核心要点之一是它的 router，本篇文章就来讲讲如何在 PWA 中实现 router。
路由实现
路由是前端应用程序的一个关键部分。Router 将 URL 路径和应用程序中的具体定义进行对应，它是应用程序的核心，可以用来实现各种功能。在 PWA 应用程序中，路由通常是以 URL 形式呈现的，我们需要通过匹配 URL 路径来实现不同页面的跳转。
原理
PWA 应用程序与传统 web 应用程序的一个主要区别在于其具有离线模式。如果 PWA 应用程序的 router 不具备离线模式，用户在离线模式下打开应用程序时将无法查看内容。
实现 PWA 应用程序的路由，需要将应用程序分成多个子应用程序（Sub Apps），每个子应用程序包含一个 HTML 页面和一个 JavaScript 文件。这些子应用程序可以在应用程序启动时下载和缓存。在用户离线时，PWA 应用程序可以根据 URL 路径加载对应的子应用程序，从而实现离线访问。
实现
将应用程序分成多个子应用程序，需要在应用程序中创建一个 manifest 文件，用来指定子应用程序的相关信息，如名称、图标、路由等。以下是一个简单的 manifest 示例：
-
------- ---- -----
-------- -
-
------ --------------------
-------- --------
------- -----------
-
--
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
----------- -
-
------- -------
------- ----
------ -------------
---------- -------------
--
-
------- --------
------- ---------
------ --------------
---------- --------------
--
-
------- ----------
------- -----------
------ ----------------
---------- ----------------
-
-
-在 manifest 文件中，我们定义了应用程序名称、图标、启动 URL、显示模式等信息。在 sub_apps 属性中，我们定义了三个子应用程序，分别对应 Home、About、Contact 页面。每个子应用程序都包含了名称、路由、HTML 页面位置和 JavaScript 文件位置。
在加载子应用程序时，我们需要先检查缓存中是否已经存在对应的 HTML 页面和 JavaScript 文件。如果存在，则直接使用文件中的内容；如果不存在，则需要进行网络请求下载文件，并将文件存储到缓存中。
----- ------ -
----------------- ----- ---- -------- -
--------- - -----
--------- - -----
-------- - ----
------------ - --------
--------- - -----
----------- - -----
-
----- ------ -
-- ---------- -- ------------ -
-------
-
--------- - ----- -----------------------
-- ------------ -
----- -------- - ----- ----------------
--------- - ----- ----------------
----- -------------------- --- ------------------- - -------- - --------------- ----------- - ----
-
----------- - ----- ---------------------------
-- -------------- -
----- -------- - ----- --------------------
----------- - ----- ----------------
----- ------------------------ --- --------------------- - -------- - --------------- ------------------------ - ----
-
-
----- -------- -
--------- - -----
----------- - -----
-
-SubApp 类表示一个子应用程序，它包含了子应用程序的名称、路由、HTML 页面和 JavaScript 文件，并提供了 load 和 unload 方法。
load 方法用来加载子应用程序，它首先检查缓存中是否存在对应的 HTML 页面和 JavaScript 文件。如果存在，则直接使用文件中的内容；如果不存在，则需要进行网络请求下载文件，并将文件存储到缓存中。
unload 方法用来卸载子应用程序，它将缓存中的 HTML 页面和 JavaScript 文件清空，以释放内存空间。
----- ------ -
-------------------- -
------------ - --------
------------ - -----
-
----- --------------- -
--- ------ ------ -- ------------- -
-- ------------ --- --------- -
----- --------------
----- ------------------
------ -----
-
-
------ ------
-
----- ------------ -
-- -------------- -
----- ----------------------
-
----- --------- - -------------------------------
-- ------------- -
------------------- - ------------
-
-- --------------- -
----- ------ - ---------------------------------
------------------ - --------------
------------------------------
-
------------ - -------
-
-Router 类表示路由器，它包含了多个子应用程序，以及当前显示的子应用程序。当用户访问一个 URL 路径时，路由器会遍历所有的子应用程序，找到对应的子应用程序，并进行加载和切换。
route 方法用来路由 URL 路径，它遍历所有子应用程序，如果找到对应的子应用程序，则加载并切换；如果未找到，则返回 false。
swap 方法用来切换子应用程序，它首先卸载当前显示的子应用程序，并清空页面内容；然后将当前显示的子应用程序更改为指定的子应用程序，并在页面中加载 HTML 页面和 JavaScript 文件。
示例
下面是一个简单的 PWA 应用程序示例，它包含了三个子应用程序，对应了 Home、About、Contact 页面。当用户访问对应的 URL 路径时，会加载对应的子应用程序，并在页面中显示内容。
--------- -----
------
------
----- ----------------
---------- -----------
----- -------------- ----------------------
-------
------
--------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------
-------------
--------
----- ------ - --- --------
--- -------------- ---- ------------- ---------------
--- --------------- --------- -------------- ----------------
--- ----------------- ----------- ---------------- -----------------
---
----- -------- ------------------ -
-----------------------
----- ---- - -------------
----- ---- - --------------------------
----- -------- - --- --------- ---------------------------------
-- ------- ----------------------- -
-------------------- - -----
-
-
------------------------------------------- -- -
------------------------------ -------------
---
----------------------------------- ----- ----- -- -
----- ---------------------------------------
---
------------------------------- ----- ----- -- -
----- ---------------------------------------
---
---------
-------
-------在这个示例中，我们创建了一个主 HTML 页面，它包含了页面头部、导航栏、主体内容和 JavaScript 代码。在 JavaScript 代码中，我们创建了一个路由器，并添加了多个子应用程序。当用户点击导航栏链接或使用浏览器的前进或后退按钮时，JavaScript 代码会获取对应的 URL 路径，通过路由器进行路由，并在页面中显示对应的内容。
结论
在 PWA 应用程序中实现 router，是应用程序的一个关键部分。通过将应用程序分成多个子应用程序，在用户离线时可以按需加载和显示内容。在本文中，我们讲解了如何使用 manifest 文件、SubApp 类和 Router 类来实现 router，其核心就是通过检测 URL 路径，加载对应的 HTML 页面和 JavaScript 文件，并在页面中显示对应的内容。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719fa919babaf620fa00141