Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: add an example of a fully PWA-compliant config for pwa-plugin #1769

Merged
merged 12 commits into from
Aug 30, 2019
Merged
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 33 additions & 4 deletions packages/docs/docs/plugin/official/plugin-pwa.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
kefranabg marked this conversation as resolved.
Show resolved Hide resolved
- add correct [head links](/config/#head) in `.vuepress/config.js` (see example below)
kefranabg marked this conversation as resolved.
Show resolved Hide resolved

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` }],
kefranabg marked this conversation as resolved.
Show resolved Hide resolved
['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` }],
kefranabg marked this conversation as resolved.
Show resolved Hide resolved
['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
Expand All @@ -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
Expand Down