什么是 PWA
PWA，全称为 "Progressive Web App"，即 "渐进式 Web 应用程序"，是一种可以让 Web 应用更像本地应用的技术。其优点在于：
- 安装简单：PWA 无需下载、安装即可使用，通过 PWA 添加到主屏幕后就能像原生应用一样运行。
- 资源占用更小：PWA 使用的 javascript 脚本与网页的脚本是同一份，并不需要另行加载。因此，在资源占用上，PWA 更加节省用户的流量和设备的存储空间。
- 响应速度更快：PWA 的数据预加载、缓存机制等技术，可以使页面响应速度更快，让用户获取所需信息更快速。
它可以兼容多个平台和设备，包括安卓、iOS、Windows、MacOS 等。这也使得 PWA 及其开发技术越来越受到开发者们的关注。
啥是 SW-Precache
Service Worker (服务工作线程)是基于 Web Workers 技术的一种浏览器JavaScript线程，它运行在浏览器背后，为前端开发者提供了缓存机制，可以让前端程序具备离线读取功能，及时响应用户请求。
SW-Precache 是对 Service Worker 的一个封装，用于提供一个可缓存资源列表，并自动生成一个 Service Worker 文件。
利用 SW-Precache 可以让 PWA 更加高效，在不同网络环境下提供更快，更稳定的访问体验。
SW-Precache 的使用
在使用 SW-Precache 前，必须要先确认自己使用的开发框架是否支持 Service Worker。
首先使用 SW-Precache 需要安装 sw-precache 工具：
- --- ------- -- -----------
使用方式可以如下：
-- ---------------------
-------------- - -
---------------- -
------------------------------
----------------------------------------------
--
------------ --------
--------------- --
----------- -------------------------------
-------- --------------
--
-sw-precache-config.js 是存储缓存资源列表的位置。
其中 staticFileGlobs 用于匹配需要缓存的文件列表。如上面示例所示，此处以二进制文件为例。'静态文件 Blob' 是需要缓存的文件列表
接着在命令行中执行以下指令，即可自动生成 Service Worker 文件。
- -- -------------------- - ----------- -------- ---------------------
这样，我们就利用 SW-Precache 自动为我们生成了一个 Service Worker 文件。
额外的： 当我们在浏览器访问了 SW-Precache 指定的资源时，浏览器会自动缓存这些文件。
总结
通过本文的学习，我们了解了 PWA 的好处，学会了使用 SW-Precache 的方法。
PWA 已经越来越受到开发者的青睐，并且越来越应用在具体的项目开发中。它的安装简单、响应速度更快、占用存储空间更小的优点，使得其成为未来趋势。对于我们开发者来说，更好地开发、了解 PWA 技术本身，将更好地提升我们的项目质量，并且更符合用户的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c9b12a5ad90b6d0417d2cd