Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.
Merged
Changes from all 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
26 changes: 13 additions & 13 deletions docs/docs/add-a-manifest-file.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
title: Adding a Manifest File
title: マニフェストファイルの追加
---

If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may have noticed a lackluster score in the "Progressive Web App" category. Let's address how you can improve that score.
[Lighthouse による監査](/docs/audit-with-lighthouse/) を実行したとき、「プログレッシブウェブアプリ」カテゴリのスコアが低いことに気付くかも知れません。ここでは、そのスコアを改善する方法を紹介します。

But first, what exactly _are_ PWAs?
はじめに、PWA とはなんでしょうか?

They are regular websites that take advantage of modern browser functionality to augment the web experience with app-like features and benefits. Check out [Google's overview](https://developers.google.com/web/progressive-web-apps/) of what defines a PWA experience and the [Progressive web apps (PWAs) doc](/docs/progressive-web-app/) to learn how a Gatsby site is a progressive web app.
これらは、モダンブラウザーの機能を利用して、通常のウェブサイトにアプリのような機能と利点を備えて、ウェブ体験を強化したものです。Gatsby サイトをプログレッシブウェブアプリにしている方法の詳細については、PWA の体験と [プログレッシブウェブアプリ (PWA) のドキュメント](/docs/progressive-web-app/)の定義に関する [Google の概要](https://developers.google.com/web/progressive-web-apps/)をご覧ください。

The inclusion of a web app manifest is one of the three generally accepted [baseline requirements for a PWA](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1).
ウェブアプリマニフェストを含めることは、一般的な [PWA の基本要件](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1)の 3 つのうちの 1 つです。

Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest/):
[Google](https://developers.google.com/web/fundamentals/web-app-manifest/) からの引用:

> The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop.
> ウェブアプリマニフェストは、ウェブアプリケーションと、それがユーザーのモバイルデバイスやデスクトップにインストールされたときの動作をブラウザーに伝えるシンプルな JSON ファイルです。

[Gatsby's manifest plugin](/packages/gatsby-plugin-manifest/) configures Gatsby to create a `manifest.webmanifest` file on every site build.
[Gatsby のマニフェストプラグイン](/packages/gatsby-plugin-manifest/) はすべてのサイトのビルドで `manifest.webmanifest` を作成するように Gatsby を構成します。

## Using `gatsby-plugin-manifest`
## `gatsby-plugin-manifest` の使い方

1. Install the plugin:
1. プラグインをインストールします。

```shell
npm install --save gatsby-plugin-manifest
```

2. Add a favicon for your app under `src/images/icon.png`. The icon is necessary to build all images for the manifest. For more information look at the docs of [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md).
2. `src/images/icon.png` にアプリのファビコンを追加します。このアイコンはマニフェストにある全ての画像を作成するために必要です。詳細は [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md) のドキュメントをご覧ください。

3. Add the plugin to the `plugins` array in your `gatsby-config.js` file.
3. `gatsby-config.js` の `plugins` にプラグインを追記します。

```javascript:title=gatsby-config.js
{
Expand All @@ -53,4 +53,4 @@ npm install --save gatsby-plugin-manifest
}
```

That's all you need to get started with adding a web manifest to a Gatsby site. The example given reflects a base configuration -- check out the [plugin reference](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) for more options.
Gatsby サイトにウェブマニフェストを追加するために必要なことはたったこれだけです。ここでは基本構成を例に反映する方法を紹介しています。その他のオプションについては、 [プラグインリファレンス](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) をご覧ください。