极速搭建 PWA 项目 —— 使用 Vue.js + Workbox 打造离线 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

如果你想要让你的 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：

// javascriptcn.com 代码示例
const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new GenerateSW({
        include: [/\.html$/, /\.js$/, /\.css$/, /\.png$/, /\.jpg$/, /\.gif$/],
        runtimeCaching: [
          {
            urlPattern: new RegExp('/api/'),
            handler: 'networkFirst'
          }
        ]
      })
    ]
  }
}

在上面的代码中，GenerateSW 会将我们应用程序中的资源缓存起来。

第四步：启动应用程序

现在我们可以启动我们的应用程序：

$ npm run serve

第五步：测试 PWA 功能

访问 http://localhost:8080/，然后切换到离线模式进行测试。你会发现 PWA 依然可以正常运行。

总结

在本文中，我们介绍了 PWA 的优点和如何使用 Vue.js 和 Workbox 打造 PWA 应用。使用 PWA 技术可以让你的 Web 应用更快、更可靠，并且可以在无网情况下继续使用，给用户带来更好的使用体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528de9a7d4982a6ebb6b3e4