什么是 PWA？
PWA 全称为 Progressive Web Apps，是一种结合 Web 技术和 Native App 用户体验的新型应用模式。具有安装快、占用空间小、响应速度快等优点，被广泛使用于电商、新闻、游戏等领域，已成为前端开发者必须掌握的技能之一。
PWA 技术包括哪些？
PWA 技术包含以下几个方面：
Service Worker：负责请求拦截、缓存管理、后台推送等。
App Shell 模型：一种占位符（Shell）+ 数据展示（Content）的设计思想。
Web App Manifest：定义应用的图标、样式、启动方式等。
离线情况处理：能够在断网状态下让网页仍显示，并给出对应的提示。
推送通知：能够在后台发送消息给用户。
应用安装引导：引导用户将 PWA 安装到本地系统。
Service Worker
Service Worker 是实现 PWA 技术的核心，是一种运行于浏览器背后的 JavaScript 运行环境。主要作用有以下几个方面：
拦截和处理网络请求：缓存优先原则，先从缓存读取数据，如果没有再从网络请求数据。
离线缓存能力：将静态资源缓存到本地，让应用即使在离线情况下能够正常使用。
后台消息推送：让用户在应用离开或关闭的情况下也能够接收到重要信息。
Service Worker 的代码必须放在 HTTPS 环境下才能够正常使用。
下面是一个简单的 Service Worker 实现代码示例：
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
--------------
------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---App Shell 模型
App Shell 模型是一种设计理念，主要思路是将应用的整个骨架结构缓存到本地，只保留数据需要动态加载，这样用户访问应用时就能够更快获取到内容了。
最简单的实现方法是将应用的 HTML、CSS、JS 文件缓存到客户端，然后渲染号称一张空白页面，等待数据动态加载进来来展示。
Web App Manifest
Web App Manifest 是一个 JSON 文件，用于描述 PWA 应用的信息和行为。主要包括以下几个方面：
应用名称和图标
应用启动 URL
应用主题色
应用的默认语言
应用的离线模式
下面是一个简单的 Web App Manifest 实现代码示例：
-
------- --------
------------- --------
-------- -
-
------ -----------
------- ------------
-------- ---------
-
--
------------ ----
-------------- ----------
------------------- ----------
---------- ------------
-离线情况处理
PWA 应用具有离线访问的能力，即使用户在脱网状态下也能够正常浏览应用。我们可以通过 Service Worker 来实现缓存所有静态资源的方式，使得在断网状态下也能够使用。
推送通知
PWA 应用还能够进行真正的推送通知，不必再依靠第三方应用。这个功能基于 Web Push API 和 Push Notification API 来实现。
下面是一个简单的推送通知实现代码示例：
----------------------------- --------------- -
--------------------- - ---- --------- -------
--- ----- - ----- --------------
--- ---- - ---- --- ----- -- ---- ----
--- ---- - -----------
----------------
----------------------------------------- -
----- -----
----- -----
-------- ----- ---- -----
----- -
---- --------------------------
-
--
--
---
------------------------------------------ --------------- -
------------------------- ------ ----- ------------------------
---------------------------
--- --- - ----------------------------
----------------
------------------
----- --------
------------------------------- -
--- ---- - - -- - - --------------------- ---- -
--- ------ - -----------------
-- ----------- --- --- -- ------- -- ------- -
------ ---------------
-
-
-- -------------------- -
------ ------------------------
-
--
--
---应用安装引导
最后，我们需允许用户将 PWA 安装到本地系统。Chrome 和 Safari 已经支持了 PWA 应用的安装，并且许多应用程序也在其网站上提供浏览器安装的按钮。
下面是一个简单的应用安装引导实现代码示例：
--- -------------------
---------------------------------------------- ----- -- -
-----------------------
------------------ - ------
--------------------
---
--------------------------------------- -- -- -
----------------------------
----------------------------------------------- -- -
-- --------------------- --- ----------- -
----------------- -------- --- ---- ---------
- ---- -
----------------- --------- --- ---- ---------
-
---
---结论
本文介绍了 PWA 技术的各方面，其中包含了 Service Worker、App Shell 模型、Web App Manifest、离线情况处理、推送通知以及应用安装引导等方面，希望能对读者有所帮助。欢迎大家在下方留言分享自己的想法，也欢迎关注我的博客获取更多有价值的前端技术资讯。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67179b1fad1e889fe22295e4