PWA をインストール可能にするには

前回の記事では、 js13kPWAサービスワーカーによってオフラインで動作する方法を見てきましたが、さらに、対応しているモバイルブラウザーでは、ネイティブアプリであるかのようにウェブアプリをユーザーがインストールできるようにすることができます。 この記事では、ウェブマニフェストと「ホーム画面に追加」と呼ばれる機能を使用して、これを実現する方法を説明します。

これらの技術によって、アプリはブラウザーを起動して URL を入力するのではなく、デバイスのホーム画面から直接起動することができるようになります。 ウェブアプリが第一級市民としてネイティブアプリの隣に座ることができるのです。 従ってよりアクセスしやすく、ブラウザーの周囲のウェブページ以外の部分なしの全画面で実行されるため、もっとネイティブアプリのようにすることができます。

要求事項

ウェブサイトをインストール可能にするには、以下のものが必要になります。

  • 正しくフィールドが入力されたウェブマニフェスト
  • 安全な(HTTPS)ドメインから提供されるウェブサイト
  • デバイス上のアプリを表すアイコン
  • アプリをオフラインで動作させるために登録されたサービスワーカー(現時点では Android の Chrome にのみ必要です)

マニフェストファイル

重要な要素はウェブマニフェストファイルです。 このファイルには、ウェブサイトに関するすべての情報が JSON 形式でリストされます。

通常はウェブアプリのルートフォルダにあります。 これには、便利な情報が含まれています — アプリのタイトル、モバイル OS でアプリを表示するために使用できるさまざまなサイズのアイコンへのパス(ホーム画面のアイコンなど)、読み込み時やスプラッシュ画面で使用する背景色など。 この情報は、インストール時およびホーム画面にブラウザーがウェブアプリを正しく表示するために必要です。

js13kPWA ウェブアプリの js13kpwa.webmanifest ファイルは、次のコード行を介して index.html ファイルの <head> セクションに含まれています。

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

: 過去にマニフェストに使用されてきた一般的な拡張機能がいくつかあります — manifest.webapp は Firefox OS アプリのマニフェストで一般的であり、多くの場合、コンテンツは JSON 構造で編成されているためウェブマニフェストには manifest.json を使用します。 しかし、.webmanifest 拡張子は W3C マニフェスト仕様(英語)で明示的に言及されているので、それに固執しましょう。

ファイルの内容は次のようになります。

{
    "name": "js13kGames Progressive Web App",
    "short_name": "js13kPWA",
    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
    "icons": [
        {
            "src": "icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        // ...
        {
            "src": "icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/pwa-examples/js13kpwa/index.html",
    "display": "fullscreen",
    "theme_color": "#B12A34",
    "background_color": "#B12A34"
}

ほとんどのフィールドは一目瞭然ですが、ドキュメントを細分化して詳細に説明しましょう。

  • name: ウェブアプリの正式な名前。
  • short_name: ホーム画面に表示する省略した名前。
  • description: アプリが何をするのかを説明する一つ二つの文章。
  • icons: 一連のアイコン情報 — ソース URL、サイズ、種類。 ユーザーのデバイスに最適なものが選択されるように、少なくともいくつか含めるようにしてください。
  • start_url: アプリの起動時に起動する index ドキュメント。
  • display: アプリの表示方法 — fullscreen(全画面)、standalone(スタンドアロン)、minimal-ui(minimal-ui は iOS 8 ではサポートされなくなりました)、browser(ブラウザー)のいずれかです。
  • theme_color: テーマカラー — オペレーティングシステムで使用される UI の基本色です 。
  • background_color: 背景色 — インストール中およびスプラッシュ画面で使用します。

ウェブマニフェストの最低限の要件は、name と少なくとも1つのアイコン(srcsizestype)です。 descriptionshort_namestart_url は推奨です。 上記以外にも使用できるフィールドがあります — 詳細については、ウェブアプリマニフェストのリファレンスを確認してください。

ホーム画面に追加

「ホーム画面に追加」(Add to home screen、略して a2hs)は、モバイルブラウザーによって実装され、アプリのウェブマニフェストにある情報を取得して、それらを使用してデバイスのホーム画面上のアプリをアイコンと名前で表す機能です。 これは、上記のように、アプリが必要な要件をすべて満たしている場合にのみ機能します。

ユーザーがサポートしているモバイルブラウザーで PWA にアクセスすると、アプリを PWA としてインストールすることが可能であることを示すバナーが表示されます。

js13kPWA のホーム画面に追加のポップアップ。

ユーザーがこのバナーをクリックすると、インストールバナーが表示されます。 そのバナーは、マニフェストファイルからの情報に基づいて、ブラウザーによって自動的に作成されます — 名前とアイコンがプロンプトに表示されます。

js13kPWA のインストールバナー。

ユーザーがボタンをクリックすると、アプリがどのように表示されるかを示し、間違いなくアプリを追加するかどうかをユーザーに選択させる最後のステップがあります。

js13kPWA のホーム画面に追加のポップアップ。

確認すると、アプリがホーム画面にインストールされます。

その後、ユーザーはそれを起動してすぐに使い始めることができます。 PWA の場合は(使用しているブラウザーまたはモバイルオペレーティングシステムによっては)、アイコンの右下隅に小さなブラウザー画像が表示され、ユーザにウェブの性質を知らせることがあります。

スプラッシュ画面

一部のブラウザーでは、マニフェストの情報からスプラッシュ画面も生成されます。 これは、PWA の起動時に表示されます。

この画面の作成には、アイコンとテーマカラーと背景色が使用されます。

まとめ

この記事では、ウェブマニフェストとホーム画面に追加を使用して、PWA をインストール可能にする方法について説明しました。

ホーム画面に追加の詳細については、必ずホーム画面に追加のガイドをお読みください。 ブラウザーのサポートは現在、Android の Firefox 58 以降、Mobile Chrome および Android Webview 31 以降、および Android の Opera 32 以降に制限されていますが、近い将来に改善されるはずです。

それでは、PWA パズルの最後のピース、つまりプッシュ通知による再エンゲージメントに移りましょう。