什么是 PWA？
PWA (Progressive Web Apps) 是一种新型的 Web 应用程序，它可以再不必安装应用的情况下像本地应用一样提供快速、可靠以及消息推送等体验。PWA 最大的优势在于其离线访问功能，该功能是通过 Service Worker 和缓存实现的。
Service Worker 简介
Service Worker 是一段运行在浏览器后台的 JavaScript 脚本，它可以控制网站或应用与网络交互的过程并在无网络连接时提供数据。为了保证 Service Worker 的运行安全性，他只能被 HTTPS 协议的站点使用。
在 Vue.js 应用中引入 Service Worker
安装 workbox-webpack-plugin
workbox-webpack-plugin 是一个 webpack 插件，它可以帮助我们在打包过程中自动生成 service worker 文件并管理缓存资源。
npm install workbox-webpack-plugin --save-dev
创建 Service Worker 文件
在项目根目录下创建 sw.js 文件，并编写基础 Service Worker 代码。
-- -------------------- ---- ------- -------------------------------- -- -- - -------------------- ------ ---------- --- --------------------------------- -- -- - -------------------- ------ ----------- --- ------------------------------ -- -- ----
配置 workbox-webpack-plugin
在 vue.config.js 中配置 workbox-webpack-plugin。
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new WorkboxPlugin.GenerateSW(),
],
},
};在使用 GenerateSW 插件时，workbox 会生成一个 service-worker.js 文件并引入你所需要的资源，在 sw.js 中我们只需要监听 message 事件，并实现 cache 功能即可。
workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
self.addEventListener('message', (e) => {
if (e.data === 'skipWaiting') {
self.skipWaiting();
}
});注册 Service Worker
在 main.js 中注册该 Service Worker 文件：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------ - ------ --- ---------------------- -- -
-------------------- ------ ------------ ---------- ---- ------ ------------------------
-- ----- -- -
-------------------- ------ ------------ ------- ---------
---
---
-缓存资源
在 Service Worker 中可以将需要缓存的资源加入缓存中，以保证离线访问时能够正常显示页面。在 service worker 的 install 事件中添加以下代码：
-- -------------------- ---- -------
----- ---------- - ------------------
-- ------
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ --------------
----
--------------
---------------
-------------
---
--
--
---总结
通过 workbox-webpack-plugin 我们不再需要手动编写复杂的 Service Worker 缓存逻辑，只需要进行简单的配置即可生成并管理 service-worker.js 文件。PWA 为 Web 应用程序提供了更多优化空间，值得我们在实际开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a00fc7d4982a6ebc5f5af