diff --git a/docs/content/en/manifest.md b/docs/content/en/manifest.md index 1ce4509c..7793917e 100644 --- a/docs/content/en/manifest.md +++ b/docs/content/en/manifest.md @@ -23,20 +23,20 @@ pwa: { ## Default options -| Property | Type | Default | Description | -| --------------------------------- | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------- | -| `name` \*1 | `String` | `package.json`'s name property | [maximum of 45 characters] | -| `short_name` \*1 | `String` | `package.json`'s name property | [maximum of 12 characters] | -| `description` \*2 | `String` | `package.json`'s description property | | -| `icons` \*1 | `Array` | `[]` | (See the [icon module]) | -| `start_url` \*1 | `String` | `routerBase + '?standalone=true'` | It has to be relative to where the manifest is placed | -| `display` \*1 | `String` | `'standalone'` | | -| `background_color` \*2 | `String` | `'#ffffff'` | | -| `theme_color` \*2 | `String` | `pwa.meta.theme_color` | This module's meta theme-color (see the [meta module]) | -| `dir` | `String` | `'ltr'` | `ltr` or `rtl`. Used with `lang` | -| `lang` | `String` | `'en'` | Recommended if used `dir` | -| `useWebmanifestExtension` \*3 | `Boolean` | `false` | Whether to use `webmanifest` file extension (or default `json`) | -| `publicPath` | `String` | A combination of `routerBase` and `options.build.publicPath` | | +| Property | Type | Default | Description | +| ---------------------------------------- | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------- | +| `name` \*1 | `String` | `package.json`'s name property | [maximum of 45 characters] | +| `short_name` \*1 | `String` | `package.json`'s name property | [maximum of 12 characters] | +| `description` \*2 | `String` | `package.json`'s description property | | +| `icons` \*1 | `Array` | `[]` | (See the [icon module]) | +| `start_url` \*1 | `String` | `routerBase + '?standalone=true'` | It has to be relative to where the manifest is placed | +| `display` \*1 | `String` | `'standalone'` | | +| `background_color` \*2 | `String` | `'#ffffff'` | | +| `theme_color` \*2 | `String` | `'#ffffff'` | This module's meta theme-color (see the [meta module]) | +| `dir` | `String` | `'ltr'` | `ltr` or `rtl`. Used with `lang` | +| `lang` | `String` | `'en'` | Recommended if used `dir` | +| `useWebmanifestExtension` \*3 | `Boolean` | `false` | Whether to use `webmanifest` file extension (or default `json`) | +| `publicPath` | `String` | A combination of `routerBase` and `options.build.publicPath` | | - \*1 Mandatory (according [to Google](https://web.dev/add-manifest)). Although [official documentation](https://w3c.github.io/manifest/#json-schema) only mentions `name` and `icons` diff --git a/docs/content/en/meta.md b/docs/content/en/meta.md index 41a2c3d4..c85784f3 100644 --- a/docs/content/en/meta.md +++ b/docs/content/en/meta.md @@ -5,7 +5,6 @@ position: 3 category: Modules --- - [![npm](https://img.shields.io/npm/dt/@nuxtjs/meta.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/meta) [![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/meta/latest.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/meta) @@ -23,6 +22,7 @@ pwa: { ## options ### `charset` + - Default: `utf-8` ### `viewport` @@ -31,10 +31,12 @@ pwa: { - Meta: `viewport` ### `mobileApp` + - Default: `true` - Meta: `mobile-web-app-capable` ### `mobileAppIOS` + - Default: `false` - Meta: `apple-mobile-web-app-capable` @@ -44,10 +46,12 @@ Please read this resources before you enable `mobileAppIOS` option: - https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb ### `appleStatusBarStyle` + - Default: `default` - Meta: `apple-mobile-web-app-status-bar-style` There are three options for the status bar style: + 1. `default`: The default status bar style for Safari PWAs; white background with black text and icons. 2. `black`: Black background with white text and icons. 3. `black-translucent`: Transparent background with white text and icons. It is [not possible](https://stackoverflow.com/a/40786240/8677167) to have a transparent status bar with black text and icons. @@ -55,55 +59,69 @@ There are three options for the status bar style: Note that with `black-translucent`, the web content is displayed on the entire screen, partially obscured by the status bar. These articles will help you decide an appropriate value: + - https://medium.com/appscope/changing-the-ios-status-bar-of-your-progressive-web-app-9fc8fbe8e6ab. - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW4 ### `favicon` + - Default: `true` (to use options.icons) - Meta: `shortcut icon` + `apple-touch-icon` ### `name` -- Default: *npm_package_name* + +- Default: _npm_package_name_ - Meta: `title` ### `author` -- Default: *npm_package_author_name* + +- Default: _npm_package_author_name_ - Meta: `author` ### `description` -- Default: *npm_package_description* + +- Default: _npm_package_description_ - Meta: `description` ### `theme_color` -- Default: `undefined` + +- Default: `'#ffffff'` - Meta: `theme-color` ### `lang` + - Default: `en` - Meta: `lang` ### `ogType` + - Default: `website` - Meta: `og:type` ### `ogSiteName` + - Default: same as options.name - Meta: `og:site_name` ### `ogTitle` + - Default: same as options.name - Meta: `og:title` ### `ogDescription` + - Default: same as options.description - Meta: `og:description` ### `ogHost` + Specify the domain that the site is hosted. Required for ogImage. + - Default: `undefined` - Meta: `N/A` ### `ogImage` + - Default: `true` - Meta: `og:image` and sub-tags @@ -112,28 +130,32 @@ These types are accepted: - Boolean: the icons from the `icon` module are used. - String: the path is used. - Object: - * `path`: specify the path. - * `width`, `height`: specify the dimensions, respectively. - * `type`: specify the MIME type. + - `path`: specify the path. + - `width`, `height`: specify the dimensions, respectively. + - `type`: specify the MIME type. ### `ogUrl` + - Default: ogHost (if defined) - Meta: `og:url` - ### `twitterCard` + - Default: `undefined` - Meta: `twitter:card` ### `twitterSite` + - Default: `undefined` - Meta: `twitter:site` ### `twitterCreator` + - Default: `undefined` - Meta: `twitter:creator` ### `nativeUI` + - Default: `false` By setting `meta.nativeUI` to `true` (Defaults to `false`) `viewport` defaults to `width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui` and `mobileAppIOS` will be enabled if not explicitly set to `false` which is suitable for native looking mobile apps. diff --git a/src/manifest.ts b/src/manifest.ts index 20c0864f..018fbcfc 100755 --- a/src/manifest.ts +++ b/src/manifest.ts @@ -15,7 +15,7 @@ export function manifest (nuxt, pwa: PWAContext) { start_url: routerBase + '?standalone=true', display: 'standalone', background_color: '#ffffff', - theme_color: pwa.meta.theme_color, + theme_color: pwa.meta.theme_color || '#ffffff', lang: 'en', useWebmanifestExtension: false, fileName: 'manifest.[hash].[ext]', diff --git a/src/meta.ts b/src/meta.ts index 1aaee0f7..759fc911 100755 --- a/src/meta.ts +++ b/src/meta.ts @@ -17,7 +17,7 @@ export function meta (nuxt, pwa: PWAContext, moduleContainer) { favicon: true, mobileAppIOS: undefined, appleStatusBarStyle: undefined, - theme_color: undefined, + theme_color: '#ffffff', lang: 'en', ogType: 'website', ogSiteName: true,