Skip to content

Commit

Permalink
Revert some changes (#21623)
Browse files Browse the repository at this point in the history
  • Loading branch information
DERJP authored Feb 21, 2020
1 parent 23fd837 commit 3894840
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions packages/gatsby-plugin-manifest/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# gatsby-plugin-manifest

The web app manifest(part of the [PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) specification) enabled by this plugin allows users to add your site to their home screen on most mobile browsers —
The web app manifest (part of the [PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) specification) enabled by this plugin allows users to add your site to their home screen on most mobile browsers —
[see here](http://caniuse.com/#feat=web-app-manifest). The manifest provides configuration and icons to the phone.

This plugin provides several features beyond manifest configuration to make your life easier, they are:
Expand Down Expand Up @@ -76,7 +76,7 @@ There are three modes in which icon generation can function: automatic, hybrid,
**_IMPORTANT:_** For best results, if you're providing an icon for generation it should be...

- ...at least as big as the largest icon being generated (512x512 by default).
- ...square (if it's not, transparent bars will add to make it square).
- ...square (if it's not, transparent bars will automatically be added to make it square).
- ...of one of the follow formats: JPEG, PNG, WebP, TIFF, GIF or SVG.

#### Automatic mode configuration
Expand Down Expand Up @@ -109,7 +109,7 @@ Add the following line to the plugin options
], // Add or remove icon sizes as desired
```

If you want to include more or fewer sizes, then the hybrid option is for you. Like automatic mode, you include a high-resolution icon from which to generate smaller icons. But unlike automatic mode, you provide the `icons` array config and icons are generated based on the sizes defined in your config. Here's an example `gatsby-config.js`:
If you want to include more or fewer sizes, then the hybrid option is for you. Like automatic mode, you include a high-resolution icon from which to generate smaller icons. But unlike automatic mode, you provide the `icons` array config and icons are generated based on the sizes defined in your config.

The hybrid option allows the most flexibility while still not requiring you to create all icon sizes manually.

Expand Down Expand Up @@ -138,13 +138,13 @@ In the manual mode, you are responsible for defining the entire web app manifest

#### Localization configuration

Localization allows you to create unique manifests for each localized version of your site. As many languages as you want are supported. Localization requires unique paths for each language (e.g. if your default about page is at `/about`, the German (`de`) version would be `/de/about`)
Localization allows you to create unique manifests for each localized version of your site. You can add as many languages as you want. Localization requires unique paths for each language (e.g. if your default about page is at `/about`, the German (`de`) version would be `/de/about`).

The default site language should be configured in your root plugin options. Any additional languages should be defined in the `localize` array. The root settings will be used as defaults if not overridden in a locale. Any configuration option available in the root is also available in the `localize` array.

`lang` and `start_url` are the only _required_ options in the array objects. `name`, `short_name`, and `description` are [recommended](https://www.w3.org/TR/appmanifest/#dfn-directionality-capable-members) to be translated if being used in the default language. All other config options are optional. This is helpful if you want to provide unique icons for each locale.

The [`lang` option](https://www.w3.org/TR/appmanifest/#lang-member) is part of the web app manifest specification and thus is required to be a [valid language tag](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
The [`lang` option](https://www.w3.org/TR/appmanifest/#lang-member) is part of the web app manifest specification and thus is required to be a [valid language tag](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).

Using localization requires name-based cache busting when using a unique icon in automatic mode for a specific locale. This is automatically enabled if you provide an `icon` in a specific locale without uniquely defining `icons`. If you're using icon creation in hybrid or manual mode for your locales, remember to provide unique icon paths.

Expand Down Expand Up @@ -213,7 +213,7 @@ module.exports = {

#### Disable legacy icons

iOS 11.3 added support for the web app manifest spec. Previous iOS versions won't recognize the icons defined in the webmanifest and the creation of `apple-touch-icon` links in `<head>` is needed. This plugin creates them by default. If you don't want those icons to be generated you can set the `legacy` option to `false` in plugin configuration:
iOS 11.3 added support for the web app manifest specification. Previous iOS versions won't recognize the icons defined in the webmanifest and the creation of `apple-touch-icon` links in `<head>` is needed. This plugin creates them by default. If you don't want those icons to be generated you can set the `legacy` option to `false` in the plugin configuration:

```js
// in gatsby-config.js
Expand Down Expand Up @@ -269,7 +269,7 @@ Cache busting works by calculating a unique "digest" of the provided icon and mo

**Options:**

- **\`query\`** - This is the default mode. File names are unmodified but a URL query is appended to all links. e.g. `icons/icon-48x48.png?digest=abc123`
- **\`query\`** - This is the default mode. File names are unmodified but a URL query is appended to all links. e.g. `icons/icon-48x48.png?digest=abc123`.

- **\`name\`** - Changes the cache busting mode to be done by file name. File names and links are modified with the icon digest. e.g. `icons/icon-48x48-abc123.png` (only needed if your CDN does not support URL query based cache busting). This mode is required and automatically enabled for a locale's icons if you are providing a unique icon for a specific locale in automatic mode using the localization features.

Expand Down Expand Up @@ -412,9 +412,9 @@ Internet Explorer is the only other major browser that doesn't support the web a
### Additional resources

This article from the Chrome DevRel team is a good intro to the web app
manifesthttps://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
manifesthttps://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

For more information see the w3 spec https://www.w3.org/TR/appmanifest/ or Mozilla docs https://developer.mozilla.org/en-US/docs/Web/Manifest.
For more information see the [W3C specification](https://www.w3.org/TR/appmanifest/) or [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/Manifest).

## Troubleshooting

Expand Down

0 comments on commit 3894840

Please sign in to comment.