Skip to content

Safariモバイルウェブプッシュ（iOSおよびiPadOS）

Safari v16.4 はモバイルウェブプッシュに対応しており、iOS と iPadOS のプッシュ通知でモバイルユーザーを再度エンゲージできるようになりました。

この記事では、サファリのモバイルプッシュを設定するために必要な手順を説明する。

統合のステップ

まず、標準的な Web プッシュ統合ガイドを読み、それに従ってください。以下のステップは、iOS と iPadOS サポートの Safari で Web プッシュをサポートするためにのみ必要です。

ステップ1:マニフェスト・ファイルを作成する

ウェブ・アプリケーション・マニフェストは、ユーザーのホーム画面にインストールされたときに、ウェブサイトがどのように表示されるかを制御するJSONファイルである。

例えば、App Switcherが使用する背景のテーマカラーやアイコン、ネイティブアプリのようにフルスクリーンでレンダリングするかどうか、アプリをランドスケープモードで開くかポートレートモードで開くかなどを設定できる。

ウェブサイトのルート・ディレクトリに、以下の必須フィールドを含む新しいmanifest.json ファイルを作成する。

1
2
3
4
5
6
7
8
9

{
  "name": "your app name",
  "short_name": "your app name",
  "display": "fullscreen",
  "icons": [{
    "src": "favicon.ico",
    "sizes": "128x128",
  }]
}

サポートされるフィールドの全リストはこちらで見ることができる。

ウェブサイトの<head> 要素に、マニフェストファイルがホストされている場所を指す次の<link> タグを追加する。

1

<link rel="manifest" href="/manifest.json" />

ステップ3:サービスワーカーを追加する

Web プッシュ統合ガイドで説明されているように、Web サイトには Braze service-worker ライブラリをインポートするサービスワーカーファイルが必要です。

ステップ4: ホーム画面に追加する

ChromeやFirefoxのような主要ブラウザとは異なり、あなたのウェブサイトがユーザーのホーム画面に追加されていない限り、サファリiOS/iPadOSでプッシュ許可をリクエストすることはできない。

[ホーム画面に追加] 機能を使用すると、ユーザーはあなたの Web サイトをブックマークし、あなたのサイトのアイコンをホーム画面に追加できます。

ウェブサイトをブックマークし、ホーム画面に保存するためのオプションを示すiPhone

ステップ5: ネイティブのプッシュプロンプトを表示する

アプリがホーム画面に追加されると、ユーザーがアクション（ボタンのクリックなど）を起こしたときにプッシュ許可をリクエストできるようになる。これを行うには、requestPushPermission メソッドを使用するか、コードなしのプッシュプライマーのアプリ内メッセージを使用します。

通知を「許可する」か「許可しない」かを尋ねるプッシュプロンプト

以下に例を示します。

1
2
3
4
5
6
7
8
9

import { requestPushPermission } from "@braze/web-sdk";

button.onclick = function(){
    requestPushPermission(() => {
        console.log(`User accepted push prompt`);
    }, (temporary) => {
        console.log(`User ${temporary ? "temporarily dismissed" : "permanently denied"} push prompt`);
    });
};

次のステップ:

次に、自分自身にテスト・メッセージを送って、統合を検証する。統合が完了したら、プッシュオプトイン率を最適化するために、コードなしのプッシュプライマーメッセージを使用することができる。

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!