ホーム画面への追加をPWAに統合する方法

公開: 2021-05-13

ホーム画面に追加（略してA2HS）は、ユーザーのホーム画面からのアプリの起動を含む完全なネイティブアプリエクスペリエンスを可能にするため、プログレッシブWebアプリエクスペリエンスの基本です。

 推奨読書：PWA対ネイティブ：どちらがあなたに適していますか？

PWAにとって非常に重要な機能であるため、統合することはできません。そのため、今日のSimiCart PWAチュートリアルでは、A2HSが必要な理由、使用方法、およびPWAの作成方法について説明します。モバイルとデスクトップの両方でA2HS対応。

サポートするブラウザ

A2HSは、ブラウザ間の普遍的な機能に非常に近いものです。現在、Mobile Chrome / Android Webview（バージョン31以降）、Opera for Android（バージョン32以降）、Firefox for Android（バージョン58以降）でサポートされています。詳細については、CanIUseのWebサイトをご覧ください。

PWAのホーム画面への追加の実行

PWAの[ホーム画面に追加]が有効になっている（A2HSが有効になっている）サイトに出くわすと、そのサイトをホーム画面に追加できることを通知するバナーがユーザーインターフェイスの下部に表示されます。

HarlowBros-ホーム画面にPWAを追加 — *Harlow Bros –SimiCartの誇り高い作品*

これは、ブラウザが提供するデフォルトのインストールプロモーションであり、特定のインストール可能な基準が満たされた場合に発生します。通知自体は、ユーザーが最初にWebサイトにアクセスしたときに表示され、約90日後に再び表示されます。

WebアプリをモバイルでA2HS対応にする方法

インストール可能な基準

Webアプリをインストール可能にするには、次の条件を満たしている必要があります。

まだインストールされていません
ユーザーエンゲージメントヒューリスティックを満たしています（ユーザーは少なくとも30秒間ページを操作する必要があります）
安全な（HTTPS）接続から提供されます
サービスワーカーを登録する
適切に構成されたマニフェストファイルがある
そして最も重要なことは、使用中のブラウザーがbeforeinstallpromptイベントをサポートしている必要があることです。 beforeinstallpromptイベントをサポートするブラウザーの完全なリストについては、CanIUseを参照してください。

入門

デモンストレーションの目的で、この記事では、インストール可能なPWAを作成するためのベースとしてcreate-react-appプロジェクトを使用します。 create-react-appは、シングルページアプリケーションを作成するための単純なReactコマンドです。

注： create-react-appには、少なくともノード>=10.16およびnpm>=5.6が必要です。

Node.jsコマンドプロンプトを開き、次のコマンドを実行します。

 npx create-react-app pwa-a2hs
cd pwa-a2hs
ヤーンスタート

マニフェストファイルを作成する

通常、WebマニフェストはWebアプリのルートフォルダーの奥深くにあり、アプリのタイトル、さまざまなアイコンへのパス、背景色など、Webサイトに必要なすべての情報をJSON形式で含むファイルです。 Webマニフェストファイルは、ユーザーエクスペリエンスのさまざまな段階でWebアプリを適切に表示できるため、機能するWebアプリにとって非常に重要です。

マニフェストジェネレーターを使用して、アプリのサイズが最適化されたアイコンとともにファイルを自動的に生成することをお勧めします。

マニフェストジェネレータを使用すると、次のような内容のmanifest.zipファイルを作成できます。

そして、 manifest.webmanifestは次のようになります。

 {{
    "theme_color"： "＃f69435"、
    "background_color"： "＃f69435"、
    「ディスプレイ」：「スタンドアロン」、
    "スコープ"： "/"、
    "start_url"： "。"、
    「名前」：「PWA-A2HS」、
    "short_name"： "PWA"、
    「説明」：「A2HS機能のデモPWA」、
    「アイコン」：[
        {{
            "src"： "/icon-192x192.png"、
            "サイズ"： "192x192"、
            "タイプ"： "image / png"
        }、
        {{
            "src"： "/icon-256x256.png"、
            "サイズ"： "256x256"、
            "タイプ"： "image / png"
        }、
        {{
            "src"： "/icon-384x384.png"、
            "サイズ"： "384x384"、
            "タイプ"： "image / png"
        }、
        {{
            "src"： "/icon-512x512.png"、
            "サイズ"： "512x512"、
            "タイプ"： "image / png"
        }
    ]
}

次に、生成されたマニフェストファイルの内容を/public/フォルダーにコピーし、このフォルダー内のデフォルトのmanifest.jsonファイルを削除して、次の手順に進みます。

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

マニフェストファイルの構成が完了したら、それをWebサイトのルートディレクトリに保存して、後で相対パス（ /manifest.webmanifest ）を使用して呼び出すことができるようにします。マニフェストファイルの設定を完了するには、HTMLヘッダーで参照します。（ \pwa-a2hs\public\index.html ）、次のように：

 <頭>
    <meta charset = "utf-8" />
    <link rel = "icon" href = "％PUBLIC_URL％/ favicon.ico" />
    <meta name = "viewport" content = "width = device-width、initial-scale = 1" />
    <meta name = "theme-color" content = "＃000000" />
    <メタ
      name = "description"
      content="create-react-appを使用して作成されたWebサイト"
    />
    <link rel = "apple-touch-icon" href = "％PUBLIC_URL％/ logo192.png" />
    <link rel = "manifest" href = "％PUBLIC_URL％/ manifest.webmanifest" />
       <title> PWA A2HS </ title>
  </ head>

インストールフローを設定します

Webアプリをインストール可能にするために必要なのは、Webアプリマニフェストだけではありません。 Webアプリをインストール可能にして、PWAに一歩近づけるために、いくつかの追加の構成を行う必要があります。

サービスワーカーを作成する

Service Workerはネットワークリクエストを傍受し、PWAで有名なさまざまなアプリのような機能を有効にします。 pwa-a2hs\publicにservice-worker.jsファイルを作成し、次のコンテンツを入力します。

 self.addEventListener（'fetch'、function（event）{
  event.respondWith（
      caches.match（event.request）.then（function（response）{
          応答を返す|| fetch（event.request）;
      }）
  ）;
}）;

ここでは、 fetchイベントをリッスンする必要があります。これは、ホーム画面への追加エクスペリエンスにとって非常に重要であるためです。フェッチイベントがないと、Reactアプリはインストール可能性の要件を満たすことができません。

サービスワーカーを登録する

そして、 service-worker.jsが機能するためには、 index.htmlの<body>の最後にこのコードを挿入して登録する必要があります。

 //index.html
<スクリプト>
    if（'serviceWorker' in navigator）{
      //ルートでホストされているサービスワーカーを登録します
      //デフォルトのスコープを使用するサイト。
      navigator.serviceWorker.register（'/ service-worker.js'）。then（function（registration）{
        console.log（'Service Workerの登録に成功しました：'、registration）;
      }、/ * catch * / function（error）{
        console.log（'サービスワーカーの登録に失敗しました：'、エラー）;
      }）;
    } そうしないと {
      console.log（'サービスワーカーはサポートされていません。'）;
    }
  </ script>

それをテストする時が来ました！

これで、PWAがインストール可能になります。フロントエンドを更新すると、タスクバー（デスクトップ）または小さな通知バナー（モバイル）にインストールボタンが表示されます。

[インストール]をクリックすると、デスクトップ/ホーム画面に次のようなPWAショートカットが表示されます。

A2HSエクスペリエンスにはまだまだあります

上記は、ブラウザが提供するインストールプロモーションを使用したホーム画面エクスペリエンスへの基本的な追加にすぎません。ワンランク上のものにするために、beforeinstallpromptイベントを保存して、PWAインストールを促進するためのさまざまなパターンでインストールフローを手動でトリガーすることもできます。

サインアップページのインストールボタン — サインアップページに**[インストール**]ボタンを表示する

カスタムインストールボタンを使用すると、アプリのインストールの恩恵を受ける特定のユーザーをターゲットにすることで、ユーザーの旅を混乱させることを回避できます。また、プロモーションUIをどこにどこに配置するかを検討することで、PWAは競合他社よりも優れたパフォーマンスを発揮する可能性が高く、その結果、アプリのコンバージョン率が大幅に向上します。