@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.name

  • Default: “name” field in package.json

    Used as the value for the apple-mobile-web-app-title meta tag in the generated HTML. Note you will need to edit public/manifest.json to match this.

  • 默认: package.json中"name"

    Used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML. Note you will need to edit `public/manifest.json` to match this.
    

    在生成的HTML中用作“apple-mobile-web-app-title”元标签的值。注意，您需要编辑 public/manifest.json来匹配这个。

---

• 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位于经过身份验证的代理之后，您可能需要设置此选项。请参阅跨源值了解更多细节。

---

• pwa.iconPaths

  • Defaults:

    {
      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'
    }
    

    Change these values to use different paths for your icons. As of v4.3.0, you can use null as a value and that icon will not be included.

    更改这些值为图标使用不同的路径。从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')