如果你想要让你的 Web 应用更加快捷、流畅，甚至可以在无网情况下继续使用，那么你就需要使用 Progressive Web Application 技术。本文将详细介绍如何使用 Vue.js 和 Workbox 打造离线 Web 应用。
什么是 PWA？
Progressive Web Application，简称 PWA，是一种提供类似原生应用体验的 Web 应用程序。PWA 可以在多个平台上运行，包括桌面浏览器和移动设备浏览器。PWA 最大的特点是可以离线使用，这意味着即使用户没有网络连接，也可以使用 PWA。
PWA 的优点
- 快速可靠
与传统网页相比，PWA 更快、更可靠。因为 PWA 使用了缓存技术，在用户第一次访问网站时会将所有资源缓存下来，用户之后的访问就可以直接使用本地缓存，不需要从服务器上重新请求资源，因此加载速度更快。
- 离线可用
因为 PWA 使用了缓存技术，所以即使在没有网络连接的情况下用户也可以使用 PWA。
- 可以添加到主屏幕
PWA 可以像原生应用一样添加到用户设备的主屏幕上，方便用户的快速访问。
使用 Vue.js 和 Workbox 打造 PWA 应用
下面我们将使用 Vue.js 和 Workbox 打造一个简单的 PWA 应用，包括缓存资源、离线显示等功能。
第一步：新建 Vue 项目
首先我们需要新建一个 Vue 项目：
$ vue create my-pwa-app
第二步：安装 Workbox
接下来我们需要安装 Workbox。
$ npm install workbox-webpack-plugin --save-dev
第三步：配置 Workbox
在 vue.config.js 中配置 Workbox：
-- -------------------- ---- -------
----- - ---------- - - ----------------------------------
-------------- - -
----------------- -
-------- -
--- ------------
-------- ----------- -------- --------- --------- --------- ----------
--------------- -
-
----------- --- ----------------
-------- --------------
-
-
--
-
-
-在上面的代码中，GenerateSW 会将我们应用程序中的资源缓存起来。
第四步：启动应用程序
现在我们可以启动我们的应用程序：
$ npm run serve
第五步：测试 PWA 功能
访问 http://localhost:8080/，然后切换到离线模式进行测试。你会发现 PWA 依然可以正常运行。
总结
在本文中，我们介绍了 PWA 的优点和如何使用 Vue.js 和 Workbox 打造 PWA 应用。使用 PWA 技术可以让你的 Web 应用更快、更可靠，并且可以在无网情况下继续使用，给用户带来更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6528de9a7d4982a6ebb6b3e4