@vue/cli-plugin-pwa #

vue-cli 的 pwa 插件

此插件添加的服务工作者仅在生产环境中启用（例如，仅当您运行 npm run build 或 yarn build 时）。在开发模式下启用服务工作者不是推荐的做法，因为它会导致使用先前缓存的资产，而最新的本地更改不会被包含。

相反，在开发模式下，会包含 noopServiceWorker.js。此服务工作者文件实际上是一个“无操作”文件，它将重置为同一主机：端口组合注册的任何先前服务工作者。

如果您需要在本地测试服务工作者，请构建应用程序并从您的构建目录运行一个简单的 HTTP 服务器。建议使用浏览器的隐身窗口以避免与浏览器缓存发生冲突。

配置 #

配置通过 vue.config.js 文件的 pwa 属性或 package.json 中的 "vue" 字段进行处理。

• pwa.workboxPluginMode

  这允许您在底层 workbox-webpack-plugin 支持的两种模式之间进行选择。

  • 'GenerateSW'（默认）将导致每次重建 Web 应用程序时创建一个新的服务工作者文件。

  • 'InjectManifest' 允许您从现有的服务工作者文件开始，并创建一个包含“预缓存清单”注入其中的该文件的副本。

  “使用哪个插件？”指南可以帮助您在这两种模式之间进行选择。

• pwa.workboxOptions

  这些选项将传递到底层的 workbox-webpack-plugin。

  有关支持哪些值的更多信息，请参阅 GenerateSW 或 InjectManifest 的指南。

• pwa.name

  • 默认：package.json 中的“name”字段

    用作生成的 HTML 中 apple-mobile-web-app-title 元标签的值。请注意，您需要编辑 public/manifest.json 以匹配此值。

• pwa.themeColor

  • 默认：'#4DBA87'

• pwa.msTileColor

  • 默认：'#000000'

• pwa.appleMobileWebAppCapable

  • 默认：'no'

    这默认为 'no'，因为 11.3 之前的 iOS 不支持 PWA。有关更多详细信息，请参阅 这篇文章。

• pwa.appleMobileWebAppStatusBarStyle

  • 默认：'default'

• pwa.assetsVersion

  • 默认：''

    如果您需要向图标和清单添加版本以防范浏览器的缓存，则使用此选项。这将向图标和清单的 URL 追加 ?v=<pwa.assetsVersion>。

• pwa.manifestPath

  • 默认：'manifest.json'

    应用程序清单的路径。如果路径是 URL，则插件在构建期间不会在 dist 目录中生成 manifest.json。

• pwa.manifestOptions

  • 默认：{}

    该对象将用于生成 manifest.json

    如果以下属性未在对象中定义，则将使用 pwa 的选项或默认选项。

    • name: pwa.name
    • short_name: pwa.name
    • start_url: '.'
    • display: 'standalone'
    • theme_color: pwa.themeColor

• pwa.manifestCrossorigin

  • 默认：undefined

    生成的 HTML 中清单链接标签中 crossorigin 属性的值。如果您 的 PWA 位于经过身份验证的代理后面，您可能需要设置此值。有关更多详细信息，请参阅 跨源值。

• pwa.iconPaths

  • 默认值

    {
      faviconSVG: 'img/icons/favicon.svg',
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/msapplication-icon-144x144.png'
    }
    

    更改这些值以使用图标的不同路径。从 v4.3.0 开始，您可以使用 null 作为值，并且该图标将不会被包含。

示例配置 #

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

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

在已创建的项目中安装 #

vue add pwa

注入的 webpack-chain 规则 #

• config.plugin('workbox')