ホーム画面に追加

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

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

なぜ A2HS か

A2HS はプログレッシブウェブアプリの思想の一環となるよう考えられています。 — ウェブアプリにネイティブアプリと同等の使い勝手を与えることで、今日のエコシステム戦争に参戦できるものです。この部分はホーム画面のアイコンをタップするという簡単な操作でアプリを起動できるものであり、きちんとした独自のウィンドウに表示されます。 A2HS ではこれを実現します。

A2HS に対応しているブラウザー

A2HS は、モバイルでのバージョン31以降の Chrome/Android の Webview、バージョン32以降の Android 用 Opera、バージョン58以降の Android 用 Firefoxで対応しています。

利用方法

A2HSを説明するために最小構成のサンプルページを作成しました(デモページはここから, ソースコードは こちらから)。このページ自体に大した機能はありませんが、ページを端末のホーム画面に追加してサービスワーカーのお陰でページをオフラインで使用可能にするために必要なコードが書かれています。このページは何枚かのキツネの写真を表示します。

もしAndroid版Firefoxを使用可能であれば、ぜひそれを使ってhttps://mdn.github.io/pwa-examples/a2hs/ にアクセスしデモページを表示してみてください。すると何枚かのフォックスの写真が出迎えてくれるでしょう。ただそれより重要なのは、アドレスバーのところにプラスマーク(+)が入った家のシルエットのアイコンが追加されていることです。このアイコンこそがA2HSボタンで、要件を満たしたウェブサイトを読み込んだとき表示されます。

このボタンをタップすると、このページをホーム画面に追加するかどうかの確認バナーが表示されます。ここで+ ADD TO HOME SCREEN を選択するとウェブアプリがホーム画面に追加されます。

注記: Android8以降の端末では、確認バナーの前にA2HS機能を許可するかどうかのシステムレベルのダイアログが表示されます。

もしChromeをお使いの場合は操作方法がやや異なります。Chromeではページを読み込むと自動的にホーム画面に追加するかどうかのポップアップが現れます。

Note: Chromeでもバナーを表示したい場合はWeb App Install Bannersの記事が役立ちます。

このポップアップで「追加しない」を選んでしまったけれど、やっぱりインストールを行ないたい場合はChromeのメニューを開いて「ホーム画面に追加」を押せば追加することができます。

ホーム画面に追加したウェブアプリは、どのブラウザをお使いの場合でもフルネームではなく短縮名のほうで表示されます。これはほかのネイティブアプリの挙動と同じです。

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

アプリを A2HS 対応にするには

ウェブアプリをA2HS対応にするには、次の要件を満たしている必要があります。

  • ウェブアプリがHTTPSで配信されていること ― ウェブはいまよりセキュアなほうへ向かっておりA2HSを含むモダンなウェブ技術はセキュアな通信の上でのみ動くようになっています
  • 正しくフィールドが記入されたマニフェストファイルが含まれていて、それがHTMLの<head>部分にリンクされていること
  • ホーム画面に追加した時に正しく表示されるように適切なアイコンが含まれていること
  • Chrome additionally requires the app to have a service worker registered (e.g., so it can function when offline).

マニフェスト

マニフェストファイルはJSON形式で書かれ、ウェブアプリ内のどこかに設置される必要があります(置き場所はルートディレクトリにするのがよいです)。またファイルの拡張子は.webmanifest にします。ここではmanifest.webmanifest といファイル名にしました。このファイルにはウェブアプリについての情報やどのような挙動をするのかについての設定が記されています。

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.

注記: 拡張子.webmanifest はW3CのWebAppManifestについてのドキュメントの中の Media type registration の節のなかで定義されています。ただ、多くの場合ブラウザは拡張子.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"
}

適切なアイコン

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).

マニフェストファイルをHTMLにリンクする

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.

A2HS でできないこと

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.

デスクトップでの A2HS

While originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too.

Note: At the time of writing, the functionality described below was only supported in newer versions of Chrome — by default on Windows, and behind the #enable-desktop-pwas flag on macOS.

インストールボタンを追加する

PWAインストール機能をデスクトップでも実現するには、まずインストールボタンをドキュメントに追加する必要があります。デスクトップではモバイル端末とは違い自動的にポップアップなどが出るわけではなくユーザーがトリガーを設定してやる必要があるのです。

<button class="add-button">ホーム画面に追加</button>

例えばこんなふうにデザインします:

.add-button {
  position: absolute;
  top: 1px;
  left: 1px;
}

インストールを扱うための JavaScript

At the bottom of our index.js file, we added some JavaScript to handle the installation. First of all, we declare a deferredPrompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially:

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';

We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a beforeinstallprompt event. We can then use a handler like the one below to handle the installation:

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });
});

So here we:

  • Call Event.preventDefault() to stop Chrome 67 and earlier from calling the install prompt automatically (this behavior changed in Chrome 68).
  • Store the event object in the deferredPrompt variable so it can be used later on to perform the actual installation.
  • Set the button to display: block so it appears in the UI for the user to click.
  • Set a click handler for the button.

The click handler contains the following steps:

  • Hide the button again with display: none — it is no longer needed once the app is installed.
  • Use the prompt() method available on the beforeinstallprompt event object (stored in deferredPrompt) to trigger showing the install prompt.
  • Respond to the user's interaction with the prompt using the userChoice property, again available on the beforeinstallprompt event object.
  • Set deferredPrompt to null since it is no longer needed.

So when the button is clicked, the install prompt appears.

If the user selects Install, the app is installed (available as standalone desktop app), and the Install button no longer shows (the onbeforeinstallprompt event no longer fires if the app is already installed). When you open the app, it will appear in its own window:

If the user selects Cancel, the state of the app goes back to how it was before the button was clicked.

Note: The code for this section was mostly taken from App install banners/Add to Home Screen by Pete LaPage.

関連情報