前言
在打开网站时你是否曾经感到加载速度较慢、卡顿多发、不能离线访问等等情况？为了解决这些问题，Google提出了一种新技术 —— PWA (Progressive Web App)。
PWA 是一种应用程序，它可以像本地应用程序一样进行选择、安装和操作，但在浏览器中运行。也许 PWA 还没成为行业标准，但它却已经在许多地方得到了广泛的采用。
为什么要学习 PWA？
在现代 Web 开发中，PWA 给 Web 应用带来了很多便利。它可以改善 Web 应用的用户体验，并且 相比普通的 Web 应用，还有以下优点：
- 集成了应用弹出框及桌面提示，更类似于原生应用；
- 加载速度快，可以提供类似于单页面应用程序的效果；
- 工作离线或网络连接不佳的情况：使用 Service Workers 可以对离线时的数据进行缓存处理；
- 全端、跨平台，比如在 Windows、macOS、Linux 等系统上都能使用；
- 无需运行特定的操作系统或应用程序。
如此多的优点来得益于PWA的特定构建方法。接下来，我们将介绍 PWA 的前置知识以及从头开始构建 PWA 的过程。
前置知识
- HTML、CSS、JavaScript的基础知识
- Web APIs
- Promise
开始构建
- 建立基本文件
创建 index.html、index.js 和 sw.js 文件。
index.html 文件中需要做到：
- 添加 meta 标签，指定 icon 等主题信息，以便将 Web 应用程序安装到用户的主屏幕上；
- 加载
index.js文件； - 从cdn 载入 runtime.js 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-----
---------------
---------------------------- ---------------- ---------------- ----------------
--
----- ------------------ ----------------- --
------------------
----- -------------- --------------------- --
----- ---------- ------------------- --
----- ---------------------- ---------------------------- --
-------
------
------------ --- ---
---- ----------------
------- --------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- -------------------------------------------------------------------
------- --------------------------------------------------------------------
------- -------------------------
-------
-------我们在 <link> 标签中加入了 manifest 属性，将之前谷歌定义的 manifest 链接到 HTML 页面中。
在 index.js 文件中，需要做到：
- 确保我们处于支持 Service Worker 的环境中；
- 注册 Service Worker；
- 运行 Router 和 React Web 应用。
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -------- -- -
------------------------------------------------
-------- -------------- -
-- ------- ------ ----
------------
-------- ------ ------------ ---------- ---- ------ --
------------------
-
--
-------- ----- -
-- ------- ------ ----
-------------------- ------ ------------ ------- -- ----
-
-
--
-- 创建 Service Worker
我们已经实现了文件的注册，接下来让我们创建我们的 Service Worker，编写逻辑来缓存数据以供离线使用。
- 创建一个
sw.js文件； - 捕获
install事件并添加缓存逻辑； - 捕获
fetch事件并为请求添加缓存逻辑。
-- -------------------- ---- -------
-- ----------------------- ---- --------- ------------
----- ---------- - --------------
-------------------------------- -------- ------- -
--------------------- ------- ---------- ------- ------ -----
----------------
------------------------------------- ------- -
--------------------- ------- ------- ---- --- ----- --- ---------
------ --------------------------
--
-
--
------------------------------ -------- ------- -
--------------------- ------- ------- ------ ------- ------------------
------------------
----------------------------------------- ---------- -
-- ---------- -
--------------------- ------- -------- -------- ---- ------ -- ------------------
------ --------
- ---- -
--------------------- ------- -------- -------- ---- -------- -- ------------------
------ --------------------
-
--
-
--- 配置清单文件
清单文件的作用是向浏览器传递我们 Web 应用程序的基本信息，如名称、版本、主题颜色以及其他可供安装时使用的信息。
-- -------------------- ---- -------
-
------- ------
------------- ------
------------ ----
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
-- ----- ------------------
------ ------------------------
-------- --------
------- -----------
--
-
------ ------------------------
-------- --------
------- -----------
--
-
------ ------------------------
-------- --------
------- -----------
--
-
------ ------------------------
-------- --------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
-
--
------------ -
-
------- ------
-------------- -----------
------ ---
--
-
------- ------
-------------- ------------
------ ----------
-
--
----------------------- -
-
----------- -------
----- ------------------
------ ---------------------------------------------------------------
--
-
----------- ---------
----- ------------
------ ------------------------------------------------------
-
-
-结论
已完成 PWA 的初步构建。这只是 PWA 技术的冰山一角，PWA 技术的难点是如何做到让 Service Worker 完美实现离线缓存，以及如何减小缓存并支持更新等问题。希望本文对你了解 PWA 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714ecccad1e889fe2164478