解释 Vue CLI 中的 PWA (Progressive Web App) 支持，以及它如何增强应用的离线能力。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位前端的侠士们，早上好！今天咱们来聊聊 Vue CLI 里面的 PWA，让你的 Vue 应用也能“上天入地”，即使在网络不给力的时候，也能“苟”住，甚至还能“秀”一把！

啥是 PWA？别怕，没那么玄乎！

PWA，全称 Progressive Web App，翻译过来就是“渐进式 Web 应用”。啥叫渐进式？简单来说，它不是一种全新的技术，而是一系列 Web 技术和设计模式的组合，目标是让你的 Web 应用拥有媲美原生 App 的体验。

你可以把它想象成一个“变形金刚”，一开始它只是一个普通的网页，但是通过一些“魔法”（技术），它就能逐渐变身，拥有离线访问、添加到桌面、推送通知等原生 App 才有的能力。

PWA 的魅力在哪？

可靠性 (Reliable): 即使在低速网络或离线状态下也能立即加载。想象一下，在地铁里刷网页，突然没信号了，普通网页直接“404”，而 PWA 还能显示上次加载的内容，是不是感觉棒棒哒？
快速 (Fast): 对用户交互快速响应，提供流畅的用户体验。谁也不喜欢卡顿的网页，PWA 通过各种优化手段，让你的应用像闪电一样快。
吸引人 (Engaging): 像原生 App 一样，可以添加到桌面，接收推送通知，让用户感觉它就像一个真正的 App。就像你的“女朋友”一样，时时刻刻都在你的“手机桌面”上提醒你。

Vue CLI 和 PWA：天生一对！

Vue CLI 已经内置了对 PWA 的支持，让你能够轻松地将 PWA 功能添加到你的 Vue 项目中。这就像买了一台自带“PWA 引擎”的汽车，你只需要稍微调教一下，就能让它跑得更快更稳。

第一步：安装 PWA 插件

首先，确保你已经安装了 Vue CLI。如果还没有，那就先安装一下：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

然后，进入你的 Vue 项目目录，运行以下命令来安装 PWA 插件：

vue add @vue/pwa

这个命令会做以下几件事：

安装 workbox-webpack-plugin 和 register-service-worker 这两个关键的依赖包。
在你的 public 目录下创建一个 manifest.json 文件，用于描述你的 PWA 应用的信息。
在你的 src/registerServiceWorker.js 文件中注册一个 Service Worker，负责处理缓存和离线访问。
修改 vue.config.js 文件，添加 PWA 相关的配置。

第二步：配置文件（manifest.json）

manifest.json 文件是 PWA 的“身份证”，它包含了你的应用的名称、图标、启动画面等信息。打开 public/manifest.json 文件，你会看到类似这样的内容：

{
  "name": "My Awesome Vue App",
  "short_name": "Vue App",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

这里解释几个重要的字段：

name: 应用的完整名称，会显示在安装提示和应用列表中。
short_name: 应用的简称，在空间有限的地方使用。
icons: 应用的图标，不同的尺寸用于不同的设备和场景。
start_url: 应用启动时的 URL。
display: 应用的显示模式，standalone 表示以独立窗口模式运行，就像原生 App 一样。还有 fullscreen, minimal-ui, 和 browser 几种模式。
background_color: 应用启动时的背景颜色。
theme_color: 应用的主题颜色，用于浏览器的地址栏和其他 UI 元素。

你需要根据你的应用的需求修改这些字段，特别是 name, short_name 和 icons。确保提供不同尺寸的图标，以适应不同的设备。

第三步： Service Worker (registerServiceWorker.js)

registerServiceWorker.js 文件负责注册 Service Worker，它是 PWA 的核心技术之一。 Service Worker 就像一个“代理”，拦截网络请求，缓存资源，并提供离线访问的能力。打开 src/registerServiceWorker.js 文件，你会看到类似这样的内容：

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by service worker.n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

这个文件会在生产环境下注册 Service Worker，并监听 Service Worker 的各种事件，例如 ready, registered, cached, updatefound, updated, offline 和 error。你可以根据你的需求修改这些事件的处理逻辑。

第四步：配置 Vue CLI (vue.config.js)

vue.config.js 文件是 Vue CLI 的配置文件，你可以在这里配置 PWA 相关的选项。打开 vue.config.js 文件，你会看到类似这样的内容：

module.exports = {
  pwa: {
    name: 'My Awesome Vue App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      // swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  }
}

这里解释几个重要的选项：

name: 应用的名称，会覆盖 manifest.json 文件中的 name 字段。
themeColor: 应用的主题颜色，会覆盖 manifest.json 文件中的 theme_color 字段。
msTileColor: 应用在 Windows 磁贴上的颜色。
appleMobileWebAppCapable: 是否启用 Apple 的 Web App 功能，允许用户将应用添加到 iOS 设备的主屏幕。
appleMobileWebAppStatusBarStyle: 应用在 iOS 设备上的状态栏样式。
workboxPluginMode: Workbox 插件的模式，GenerateSW 表示自动生成 Service Worker 文件，InjectManifest 表示手动编写 Service Worker 文件。
workboxOptions: Workbox 插件的选项，可以配置缓存策略、路由规则等。

两种 Workbox 模式： GenerateSW vs InjectManifest

GenerateSW: 这是最简单的模式，它会自动生成 Service Worker 文件，并根据你的配置自动缓存静态资源。适用于简单的 PWA 应用，不需要复杂的缓存策略。
InjectManifest: 这种模式允许你手动编写 Service Worker 文件，并使用 Workbox 提供的 API 来处理缓存和路由。适用于复杂的 PWA 应用，需要自定义缓存策略和路由规则。

如果你选择了 InjectManifest 模式，你需要创建一个 dev/sw.js 文件，并在这里编写你的 Service Worker 代码。例如：

// dev/sw.js
import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies'
import { CacheableResponsePlugin } from 'workbox-cacheable-response'
import { ExpirationPlugin } from 'workbox-expiration'

// 预缓存静态资源
precacheAndRoute(self.__WB_MANIFEST);

// 缓存图片资源
registerRoute(
  /.(?:png|jpg|jpeg|svg|gif)$/,
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);

// 缓存 API 接口数据
registerRoute(
  /^https://api.example.com/,
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

这个例子展示了如何使用 Workbox 的 API 来预缓存静态资源、缓存图片资源和 API 接口数据。

precacheAndRoute: 预缓存静态资源，这些资源会在 Service Worker 安装时被缓存。
registerRoute: 注册路由，指定哪些 URL 需要使用哪种缓存策略。
CacheFirst: 优先从缓存中获取资源，如果缓存中没有，则从网络获取。
StaleWhileRevalidate: 先从缓存中获取资源，同时在后台更新缓存。
CacheableResponsePlugin: 允许缓存特定状态码的响应。
ExpirationPlugin: 自动清理过期缓存。

第五步：构建和部署

完成配置后，运行以下命令来构建你的应用：

npm run build
# 或者
yarn build

构建完成后，你会得到一个 dist 目录，包含了你的应用的静态资源。你可以将这个目录部署到任何支持静态资源托管的服务器上。

第六步：测试你的 PWA

部署完成后，你可以使用 Chrome DevTools 来测试你的 PWA。

打开 Chrome DevTools (按 F12)。
切换到 "Application" 标签。
在 "Manifest" 面板中，你可以查看你的 manifest.json 文件的信息。
在 "Service Workers" 面板中，你可以查看你的 Service Worker 的状态。
在 "Cache Storage" 面板中，你可以查看你的缓存内容。
在 "Network" 面板中，你可以模拟离线状态，测试你的应用的离线访问能力。

PWA 的核心技术： Service Worker

Service Worker 是 PWA 的核心技术之一，它是一个运行在浏览器后台的脚本，可以拦截网络请求，缓存资源，并提供离线访问的能力。

你可以把它想象成一个“保安”，守卫着你的应用，当用户请求资源时，它会先检查缓存中是否有这个资源，如果有，就直接从缓存中返回，如果没有，就从网络获取，并缓存起来，下次再请求这个资源时，就可以直接从缓存中返回了。

Service Worker 的生命周期包括以下几个阶段：

Registration (注册): 浏览器注册 Service Worker。
Installation (安装): Service Worker 安装，通常会在这里缓存静态资源。
Activation (激活): Service Worker 激活，可以清理旧的缓存。
Idle (空闲): Service Worker 处于空闲状态，等待事件触发。
Termination (终止): Service Worker 被浏览器终止。

PWA 的最佳实践

使用 HTTPS: Service Worker 只能在 HTTPS 协议下运行，这是为了安全考虑。
提供离线体验: 确保你的应用在离线状态下也能提供有用的信息，例如显示上次加载的内容，或者提供一个离线提示页面。
使用缓存策略: 选择合适的缓存策略，例如 CacheFirst, StaleWhileRevalidate, NetworkFirst 等，以优化你的应用的性能和离线访问能力。
定期更新缓存: 定期更新缓存，以确保用户能够获取最新的内容。
提供推送通知: 使用推送通知来吸引用户，让他们回到你的应用。

PWA 的局限性

浏览器兼容性: 虽然现代浏览器对 PWA 的支持越来越好，但是仍然有一些旧版本的浏览器不支持 PWA。
安全限制: Service Worker 有一些安全限制，例如不能访问 DOM，不能使用 localStorage 和 sessionStorage 等。
调试难度: Service Worker 的调试比较困难，需要使用 Chrome DevTools 等工具。

表格总结

特性	描述
可靠性	即使在低速网络或离线状态下也能立即加载。
快速性	对用户交互快速响应，提供流畅的用户体验。
吸引人	像原生 App 一样，可以添加到桌面，接收推送通知。
Service Worker	运行在浏览器后台的脚本，可以拦截网络请求，缓存资源，并提供离线访问的能力。
manifest.json	描述 PWA 应用的信息，例如名称、图标、启动画面等。
GenerateSW	Workbox 插件的模式，自动生成 Service Worker 文件。
InjectManifest	Workbox 插件的模式，手动编写 Service Worker 文件。
缓存策略	例如 `CacheFirst`, `StaleWhileRevalidate`, `NetworkFirst` 等，用于控制资源的缓存方式。
HTTPS	Service Worker 只能在 HTTPS 协议下运行。
浏览器兼容性	虽然现代浏览器对 PWA 的支持越来越好，但是仍然有一些旧版本的浏览器不支持 PWA。

结束语

PWA 是一种非常有前景的技术，它可以让你的 Web 应用拥有媲美原生 App 的体验。 Vue CLI 已经内置了对 PWA 的支持，让你能够轻松地将 PWA 功能添加到你的 Vue 项目中。

希望今天的讲座能够帮助你更好地理解 Vue CLI 中的 PWA 支持，并将其应用到你的项目中。记住，PWA 就像一个“变形金刚”，需要你不断地“升级”和“改造”，才能发挥出它的最大潜力。

好啦，今天的分享就到这里，大家有什么问题可以随时提问！祝大家编程愉快！

发表回复 取消回复

发表回复取消回复