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.

Sign up for GitHub

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

feat: set default theme_color #426

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: set default theme_color #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
28 changes: 14 additions & 14 deletions docs/content/en/manifest.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,20 @@ pwa: {

## Default options

| Property | Type | Default | Description |
| --------------------------------- | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------- |
| `name` <sup>\*1</sup> | `String` | `package.json`'s name property | [maximum of 45 characters] |
| `short_name` <sup>\*1</sup> | `String` | `package.json`'s name property | [maximum of 12 characters] |
| `description` <sup>\*2</sup> | `String` | `package.json`'s description property | |
| `icons` <sup>\*1</sup> | `Array<Object>` | `[]` | (See the [icon module]) |
| `start_url` <sup>\*1</sup> | `String` | `routerBase + '?standalone=true'` | It has to be relative to where the manifest is placed |
| `display` <sup>\*1</sup> | `String` | `'standalone'` | |
| `background_color` <sup>\*2</sup> | `String` | `'#ffffff'` | |
| `theme_color` <sup>\*2</sup> | `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` <sup>\*3</sup> | `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` <sup>\*1</sup> | `String` | `package.json`'s name property | [maximum of 45 characters] |
| `short_name` <sup>\*1</sup> | `String` | `package.json`'s name property | [maximum of 12 characters] |
| `description` <sup>\*2</sup> | `String` | `package.json`'s description property | |
| `icons` <sup>\*1</sup> | `Array<Object>` | `[]` | (See the [icon module]) |
| `start_url` <sup>\*1</sup> | `String` | `routerBase + '?standalone=true'` | It has to be relative to where the manifest is placed |
| `display` <sup>\*1</sup> | `String` | `'standalone'` | |
| `background_color` <sup>\*2</sup> | `String` | `'#ffffff'` | |
| `theme_color` <sup>\*2</sup> | `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` <sup>\*3</sup> | `Boolean` | `false` | Whether to use `webmanifest` file extension (or default `json`) |
| `publicPath` | `String` | A combination of `routerBase` and `options.build.publicPath` | |

- <sup>\*1</sup> Mandatory (according [to Google](https://web.dev/add-manifest)).
Although [official documentation](https://w3c.github.io/manifest/#json-schema) only mentions `name` and `icons`
Expand Down
40 changes: 31 additions & 9 deletions docs/content/en/meta.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -23,6 +22,7 @@ pwa: {
## options

### `charset`

- Default: `utf-8`

### `viewport`
Expand All @@ -31,10 +31,12 @@ pwa: {
- Meta: `viewport`

### `mobileApp`

- Default: `true`
- Meta: `mobile-web-app-capable`

### `mobileAppIOS`

- Default: `false`
- Meta: `apple-mobile-web-app-capable`

Expand All @@ -44,66 +46,82 @@ 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.

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

Expand All @@ -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.
2 changes: 1 addition & 1 deletion src/manifest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]',
Expand Down
2 changes: 1 addition & 1 deletion src/meta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down