什么是 PWA？
PWA 即渐进式 Web 应用程序（Progressive Web Application），是一种新型的 Web 应用开发方式。PWA 技术结合了 Web 应用和原生应用的优势，可以拥有类似原生应用的用户体验、离线访问能力、推送通知功能等，同时也保留了 Web 应用的特点：安装简单、跨平台、无需下载安装即可访问等。
PWA 技术如何提高应用访问速度？
PWA 技术主要通过以下线路提高应用访问速度：
1. 缓存数据
PWA 技术通过 Service Worker 缓存数据，使得在下次访问应用时无需再次发送网络请求，从而提高应用访问速度。
-- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
------------------------------------------ -
------ ---
------------- -- -
-------------------- ------ ------
-------------- -- -
-------------------- ------ ------ ----
--
-
-- ----
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
-- ---------- -
------ --------
-
------ ------------------------------------ -- -
----- --------------- - ----------------
------------------------------------ -- -
------------------------ ----------------
--
------ --------
--
--
-
--2. 预缓存静态资源
PWA 技术在应用启动时通过 Service Worker 预缓存静态资源，使得在应用运行时静态资源能够本地快速读取，从而提高应用的响应速度。
-- -------------------- ---- -------
-- -------
----- ---------- - ----------
----- ----------- - -
----
--------------
-----------------
--------------
---------------
-
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ -------------------------
--
-
--3. 代码分离
PWA 技术通过代码分离技术，将应用代码划分为不同的模块，使得在应用运行时只需加载必需的代码模块，从而提高应用载入速度。
// 代码分离
import { add } from './math'
const a = 1
const b = 2
const c = add(a, b)
console.log(c)PWA 技术的例子
下面是一个使用 PWA 技术开发的例子：https://paper-plane.app。
在该应用中，PWA 技术主要有以下应用：
1. 可靠性提示
当访问应用时出现网络问题时，浏览器会提示用户该应用在离线状态下仍然可用。
2. 加载速度预测
当访问应用时，浏览器会预测应用的加载速度，并在加载完成后提示用户应用的加载速度。
3. 离线访问
当用户在没有网络连接的情况下访问应用时，应用仍然可以运行。
4. 主屏幕应用图标
用户可以将应用添加到主屏幕，并与原生应用的应用图标一起显示。
总结
PWA 技术可以有效提高 Web 应用的用户体验和访问速度，结合现代浏览器的能力，可以打造出拥有原生应用一样优秀的用户体验的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465eff5968c7c53b069a412