@vue/cli-plugin-pwa 中文翻译

@vue/cli-plugin-pwa

用于vue cli的pwa插件，关于配置介绍翻译

service worker 介绍：https://segmentfault.com/a/1190000016028780

The service worker added with this plugin is only enabled in the production environment (e.g. only if you run npm run build or yarn build). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included.

使用此插件添加的Service Worker仅在生产环境中启用（例如，仅当您运行“npm run build”或“yarn build”时）。建议不要在开发模式下启用ServiceWorker，因为这可能导致使用以前缓存的资源而不包括最新的本地更改的情况。

Instead, in the development mode the noopServiceWorker.js is included. This service worker file is effectively a ‘no-op’ that will reset any previous service worker registered for the same host:port combination.

相反，在开发模式中noopServiceWorker.js会包括在内。此service worker文件实际上是一个“no op”，它将重置以前为其注册的任何service worker 服务host:port。

If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It’s recommended to use a browser incognito window to avoid complications with your browser cache.

如果需要在本地测试service worker，请构建应用程序并从构建目录运行一个简单的HTTP服务器。为了避免浏览器缓存的复杂性，推荐新打开一个窗口。

配置

Configuration is handled via the pwa property of either the vue.config.js file, or the "vue" field in package.json.

pwa插件的配置是通过在vue.config.js文件或者package.json文件"vue"字段里修改pwa属性

• pwa.workboxPluginMode This allows you to choose between the two modes supported by the underlying workbox-webpack-plugin.

基于workbox-webpack-plugin插件你有两种模式可以选择

• 'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app.
• 'GenerateSW'（默认），每次你构建应用的时候，都会重新创建一个新的service worker
• 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a “precache manifest” injected into it.
• InjectManifest允许您从现有的service worker文件开始， 并创建该文件的副本，并将“预缓存清单”注入其中。

The “Which Plugin to Use?” guide can help you choose between the two modes.

workbox插件指南 点击插件插件指南，可以帮助您在两种模式之间进行选择。

• pwa.workboxOptions These options are passed on through to the underlying workbox-webpack-plugin. For more information on what values are supported, please see the guide for GenerateSW or for InjectManifest.

这些配置都是 workbox-webpack-plugin的配置，更多关于值的信息需要点击查下面的文档指南。

GenerateSW or for InjectManifest.

• pwa.themeColor
  • Default: '#4DBA87'
• pwa.msTileColor
  • Default: '#000000'

• pwa.appleMobileWebAppCapable
  • Default: 'no' This defaults to 'no' because iOS before 11.3 does not have proper PWA support. See this article for more details. 因为11.3之前的iOS没有适当的PWA支持。请参阅这篇文章了解更多细节。

• pwa.appleMobileWebAppStatusBarStyle
  • Default: 'default'

• pwa.assetsVersion
  • Default: '' This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append ?v=<pwa.assetsVersion> to the URLs of the icons and manifest. 这个选项是用来为icons 和 mainfest 添加版本，用来针对浏览器缓存问题。它将会在icons和mainfest url上追加?v=<pwa.assetsVersion>

• pwa.manifestPath
  • Default: 'manifest.json' The path of app’s manifest. If the path is an URL, the plugin won’t generate a manifest.json in the dist directory during the build. manifest路径，如果路径是个URL，构建时插件将不会在dist目录下产生mianfest.json

• pwa.manifestOptions
  • Default: {} The object will be used to generate the manifest.json If the following attributes are not defined in the object, the options of pwa or default options will be used instead.
    • name: pwa.name
    • short_name: pwa.name
    • start_url: '.'
    • display: 'standalone'
    • theme_color: pwa.themeColor

  这个对象用来生成manifest.json，如果没有定义将会按照下面生成默认值:

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

• pwa.manifestCrossorigin
  • Default: undefined Value for crossorigin attribute in manifest link tag in the generated HTML. You may need to set this if your PWA is behind an authenticated proxy. See cross-origin values for more details. 在生成的HTML中的manifest链接标记中为’ crossorigin '属性的值。如果您的PWA位于经过身份验证的代理之后，您可能需要设置此选项。请参阅跨源值了解更多细节。

配置例子

// 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')