docs(pwa): update default pwa.manifestOptions

Author: Barba828

docs/core-plugins/pwa.md

@@ -19,10 +19,10 @@ file, or the `"vue"` field in `package.json`.
  [`workbox-webpack-plugin`](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/).
 
  - `'GenerateSW'` (default), will lead to a new service worker file being created
-  each time you rebuild your web app.
+ each time you rebuild your web app.
 
  - `'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.
+ and creates a copy of that file with a "precache manifest" injected into it.
 
  The "[Which Plugin to Use?](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#which-plugin-to-use)"
  guide can help you choose between the two modes.
@@ -78,11 +78,42 @@ file, or the `"vue"` field in `package.json`.
  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`
+ - name: `pwa.name`
+ - short_name: `pwa.name`
+ - start_url: `'.'`
+ - display: `'standalone'`
+ - theme_color: `pwa.themeColor`
+ - background_color: `#000000`
+ - icon:
+
+ - Defaults:
+
+ ```js
+ [
+ {
+ src: "./img/icons/android-chrome-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ },
+ {
+ src: "./img/icons/android-chrome-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ },
+ {
+ src: "./img/icons/android-chrome-maskable-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ {
+ src: "./img/icons/android-chrome-maskable-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ ];
+ ```
 
 - **pwa.manifestCrossorigin**
 

packages/@vue/cli-plugin-pwa/README.md

@@ -19,10 +19,10 @@ file, or the `"vue"` field in `package.json`.
  [`workbox-webpack-plugin`](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/).
 
  - `'GenerateSW'` (default), will lead to a new service worker file being created
-  each time you rebuild your web app.
+ each time you rebuild your web app.
 
  - `'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.
+ and creates a copy of that file with a "precache manifest" injected into it.
 
  The "[Which Plugin to Use?](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#which-plugin-to-use)"
  guide can help you choose between the two modes.
@@ -78,11 +78,42 @@ file, or the `"vue"` field in `package.json`.
  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`
+ - name: `pwa.name`
+ - short_name: `pwa.name`
+ - start_url: `'.'`
+ - display: `'standalone'`
+ - theme_color: `pwa.themeColor`
+ - background_color: `#000000`
+ - icon:
+
+ - Defaults:
+
+ ```js
+ [
+ {
+ src: "./img/icons/android-chrome-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ },
+ {
+ src: "./img/icons/android-chrome-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ },
+ {
+ src: "./img/icons/android-chrome-maskable-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ {
+ src: "./img/icons/android-chrome-maskable-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ ];
+ ```
 
 - **pwa.manifestCrossorigin**