Skip to content

Safari Mobile Web プッシュ(iOS およびiPadOS)

Safari v16.4 はモバイルウェブプッシュをサポートしています。つまり、iOS およびiPadOS でモバイルユーザにプッシュ通知を再び適用できます。

この記事では、safari のモバイルプッシュのセットアップに必要な手順について説明します。

統合手順

まず、標準のWeb プッシュ統合ガイド を読み、それに従ってください。次の手順は、Safari for iOS およびiPadOS サポートでWeb プッシュをサポートする場合にのみ必要です。

ステップ 1:マニフェストファイルの作成

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

たとえば、App Switcher が使用する背景テーマの色とアイコンを、ネイティブアプリに似たフルスクリーンとしてレンダリングするかどうか、またはアプリを横向きまたは縦向きモードで開くかどうかを設定できます。

Web サイトのルートディレクトリに、次の必須フィールドを含む新しい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",
  }]
}

サポートされるフィールドの完全なリストは、here にあります。

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

1

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

ステップ 3: サービスワーカーの追加

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

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

Chrome やFirefox などの主要なブラウザとは異なり、Web サイトがユーザのホーム画面に追加されていない限り、Safari iOS/iPadOS でプッシュ権限を要求することはできません。

ホーム画面に追加機能を使用すると、ユーザはウェブサイトをブックマークし、貴重なホーム画面の不動産にアイコンを追加できます。

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

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

アプリがホーム画面に追加されると、ユーザがアクション(ボタンをクリックするなど) を実行したときにプッシュ権限を要求できるようになります。これは、requestPushPermission メソッドを使用するか、no-code push primer in-app message を使用して行うことができます。

"allow" または"don't allow" Notifications に尋ねるプッシュプロンプト{: style=”max-width:40%”}

以下に例を示します。

```typescript 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); }); () ```

次のステップ

次に、test message を送信して、統合を検証します。統合が完了したら、no-code push primer messagesを使用してプッシュオプトインレートを最適化できます。

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