この記事は翻訳作業中です。

ホーム画面に追加(またはA2HSと略記)はモダンなスマートフォンブラウザで利用できる機能で、開発者は簡単かつ気軽に、お気に入りのウェブアプリケーション(またはウェブサイト)を表すショートカットを自分のホーム画面に追加することができるので、今後はこのショートカットを一回タップすればアクセスできるようになる。このガイドでは、A2HSの使用方法と、ユーザーがこの機能を利用できるようにするために開発者として行う必要のあることについて説明します。

なぜA2HS?

A2HS is thought to be part of the Progressive Web App philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. Part of this is the simple gesture of accessing an app by tapping its icon on your Home screen, and then having it appear neatly in its own window. A2HS makes this possible.

どのブラウザがA2HSをサポートしている?

A2HSは、モバイルでのバージョン31以降のChrome/Android の Webview、バージョン32以降のAndroid用Opera、バージョン58以降のAndroid用Firefoxでサポートされています。

どうやって使う?

We've written a very simple example web site (see our demo live, and also see the source code) that doesn't do much, but was developed with the necessary code to allow it to be added to a Home screen, as well as a service worker to enable it to be used offline. The example displays a series of fox pictures.

If you have Firefox for Android available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/. You'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "Add to Home screen" icon displayed for any site that has the necessary features in place.

Tapping this will show a confirmation banner — pressing the big + ADD TO HOME SCREEN button completes the action, adding the app to the Home screen. (Note: In Android 8 and higher, a system-level "Add to Home screen" permission dialog will be shown first.)

If you have Mobile Chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your Home screen.

Note: You can find out a lot more about Chrome install banners from the article Web App Install Banners.

If you choose not to add it to your Home screen at this point, you can do so later using the Add to Home screen icon in the main Chrome menu.

Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do.

Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it.

How do you make an app A2HS-ready?

To enable your app to be added to a Home screen, it needs the following:

  • To be served over HTTPs — the web is increasingly being moved in a more secure direction, and many modern web technologies (A2HS included) will work only on secure contexts.
  • To have a manifest file with the correct fields filled in, linked from the HTML head.
  • To have an appropriate icon available for displaying on the Home screen.
  • Chrome additionally requires the app to have a service worker registered (e.g., so it can function when offline).

Manifest

The web manifest is written in standard JSON format and should be placed somewhere inside your app directory (in the root is probably best) with the name  somefilename.webmanifest (we've chosen manifest.webmanifest). It contains multiple fields that define certain information about the web app and how it should behave.

 Note: The .webmanifest extension is specified in the Media type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. .json.

The fields needed for A2HS are as follows:

  • background_color: Specifies a background color to be used in some app contexts. The most relevant one to A2HS is the splash screen displayed when the app icon on the Home screen is tapped and it first starts to load (this currently appears only when apps have been added to the Home screen by Chrome).
  • display: Specifies how the app should be displayed. To make it feel like a distinct app (and not just a web page), you should choose a value such as fullscreen (no UI is shown at all) or standalone (very similar, but system-level UI elements such as the status bar might be visible).
  • icons: Specifies icons for the browser to use when representing the app in different places (such as on the task switcher, or more important, the Home screen). We've included only one in our demo.
  • name/short_name: These fields provide an app name to be displayed when representing the app in different places. name provides the full app name, and short_name provides a shortened name to be used when there is insufficient space to display the full name. You are advised to provide both if your app's name is particularly long.
  • start_url: Provides a path to the asset that should be loaded when the added-to-Home screen app is launched. Note that this has to be a relative URL pointing to the site index, relative to the url of the manifest. Also, be aware that Chrome requires this before it will display the install banner, whereas Firefox doesn't require it for showing the home-with-a-plus icon.

The manifest for our sample app looks like this:

{
  "background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

Appropriate icon

As shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. You can include more sizes if you want; Android will choose the most appropriate size for each different use case. You could also decide to include different types of icons so devices can use the best one they are able to (e.g., Chrome already supports the WebP format).

Note that the type member in each icon's object specifies the icon's mimetype, so the browser can quickly read what type the icon is, and then ignore it and move to a different icon if it doesn't support it.

In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the Android icon design guidelines).

To finish setting up your manifest, you need to reference it from the HTML of your application's home page:

<link rel="manifest" href="manifest.webmanifest">

Browsers that support A2HS will know where to look for your manifest once this is in place.

What does A2HS not give you?

Bear in mind that when you add an app to your Home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. To make your app work offline, you have to use the Service Worker API to handle storing the assets offline, and if required, Web storage or IndexedDB to store its data.

In our example app, we've just used a service worker to store all necessary files. The service worker is registered against the site with the final code block in the index.js file. We then cache all the site's assets using the Cache API, and serve them from the cache instead of the network using the code in the sw.js file.

See also

ドキュメントのタグと貢献者

このページの貢献者: k-kuwahara
最終更新者: k-kuwahara,