doc: Add an example of a fully PWA-compliant config for pwa-plugin (#…

…1769)
vuejs · Aug 30, 2019 · a81ef8a · a81ef8a
1 parent 6d47c9e
commit a81ef8a
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 7 deletions.
diff --git a/packages/docs/docs/plugin/official/plugin-pwa.md b/packages/docs/docs/plugin/official/plugin-pwa.md
@@ -22,6 +22,37 @@ module.exports = {
 }
 ```
 
+::: tip
+To make your site fully PWA-compliant, you need to:
+
+- provide a web app manifest and icons in `.vuepress/public`,
+- add correct [head links](/config/#head) in `.vuepress/config.js` (see example below).
+
+For more details, see [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
+:::
+
+Here is an example of a fully PWA-compliant configuration with VuePress:
+
+```javascript
+module.exports = {
+  head: [
+    ['link', { rel: 'icon', href: '/logo.png' }],
+    ['link', { rel: 'manifest', href: '/manifest.json' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
+    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
+    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
+    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
+  ],
+  ['@vuepress/pwa', {
+      serviceWorker: true,
+      updatePopup: true
+  }],
+}
+```
+
 ## Options
 
 ### serviceWorker
@@ -39,10 +70,8 @@ There is a aliased module `@sw-event` module that will also be emitting the foll
 - `sw-offline`
 - `sw-error`
 
-::: tip PWA NOTES
-The `serviceWorker` option only handles the service worker. To make your site fully PWA-compliant, you will need to provide the Web App Manifest and icons in `.vuepress/public`. For more details, see [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
-
-Also, only enable this if you are able to deploy your site with SSL, since service worker can only be registered under HTTPs URLs.
+::: tip
+Since you can only register service workers under HTTPs URLs, make sure you can deploy your site with SSL before enabling this option.
 :::
 
 ### generateSWConfig

diff --git a/packages/docs/docs/zh/plugin/official/plugin-pwa.md b/packages/docs/docs/zh/plugin/official/plugin-pwa.md
@@ -22,6 +22,37 @@ module.exports = {
 }
 ```
 
+::: tip
+为了让你的网站完全地兼容 PWA，你需要:
+
+- 在 `.vuepress/public` 提供 Manifest 和 icons
+- 在 `.vuepress/config.js` 添加正確的 [head links](/config/#head)(参见下面例子).
+
+更多细节，请参见 [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
+:::
+
+这是一个在VuePress中完全地兼容 PWA 的例子：
+
+```javascript
+module.exports = {
+  head: [
+    ['link', { rel: 'icon', href: '/logo.png' }],
+    ['link', { rel: 'manifest', href: '/manifest.json' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
+    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
+    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
+    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
+  ],
+  ['@vuepress/pwa', {
+      serviceWorker: true,
+      updatePopup: true
+  }],
+}
+```
+
 ## 选项
 
 ### serviceWorker
@@ -39,9 +70,8 @@ module.exports = {
 - `sw-offline`
 - `sw-error`
 
-::: tip PWA NOTES
-`serviceWorker` 选项仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在 `.vuepress/public` 提供 Manifest 和 icons，更多细节，请参见 [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
-此外，只有您能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。
+::: tip
+只有在你能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。
 :::
 
 ### generateSWConfig