1. Home
  2. テクノロジー
  3. iOS16.4からiOSのSafariでもWebプッシュが受け取れる様になったので試してみた！

iOS16.4からiOSのSafariでもWebプッシュが受け取れる様になったので試してみた！

sa
テクノロジー #モバイル
saikei /
目次

はじめに

こんにちは！ニフティライフスタイルでモバイルアプリの開発をしているsaikeiです。

遂に「iOS 16.4」からiOSでのWebプッシュが公式対応となりました！
今回は実際に「iOS 16.4 × Firebase Cloud Messaging」を用いて、iOSのSafariでプッシュ通知を検証したのでご紹介させていただきます！

iOSのWebプッシュの仕様

※ 以下は2023年3月28日にリリースされたiOS 16.4での挙動です。今後のアップデートで変更となる可能性があるのでご注意ください。

主なポイント

  1. Safariのみ対応
  2. PWAのみ対応
  3. プッシュ通知の許可確認ダイアログは「ユーザーの明示的な操作」が行われた場合のみ表示可能
  4. 通知受信時の「音・振動」には非対応
  5. 表示される通知への制約

解説

1. Safariのみ対応

今回、iOSでのWebプッシュに対応したのは「Safari」のみです。

そのため、Google Chromeを始めとするサードパーティ製のブラウザに関しては引き続き非対応となります。

2. PWAのみ対応

Safariで普通にブラウジングしている場合はWebプッシュのサポート外となり「プッシュ通知の許可確認ダイアログ」を表示することも出来ません。

また、プッシュ通知を受け取るためにはサイトを「ホーム画面に追加」してもらう必要があります。

※ PWA対応のサイトをホーム画面へ追加して初めてWebプッシュを受け取れる状態になります。

3. プッシュ通知の許可確認ダイアログは「ユーザーの明示的な操作」が行われた場合のみ表示可能

iOSのWebプッシュではネイティブアプリの様な「起動した瞬間にダイアログを表示する」という事は出来ない様になっています。

PCでブラウジングしていると「訪問時に即通知許可を求めてくる」サイトもありますが、iOSの場合はその様なタイミングでのダイアログ表示は出来ません。

4. 通知受信時の「音・振動」には非対応

通常のプッシュ通知の様に「音」や「振動」を用いた強い通知でユーザーを惹きつける事は出来ません。

※「設定」アプリの「通知」ページにサイトごとの項目が追加されますが「サウンド」の項目は非表示となっています。（1枚目がネイティブアプリ、2枚目がPWA）

5. 表示される通知への制約

ネイティブアプリとは異なり以下の制約があります。

  • 通知タイトルの下に「{サイト名}から」という一文が追加される
  • 画像付きプッシュ通知を送った場合でも通知上に画像は表示されない

検証環境

今回0からテストサイトを作成し検証を行ったので、その際に使用したリソースを以下に共有させていただきます！

Firebaseでプロジェクトを作成し _____DUMMY_____ の箇所を書き換える事で実際に試す事が出来ると思います。

環境説明

  • 常時SSL化済みのサイト（ https://~~~/ のサイト）
  • プッシュ通知はFirebase Cloud Messagingから送信する前提
  • FirebaseのJSライブラリはv8系を仕様

ファイル構造

root/
　├- index.html
　├- manifest.json              // PWA化のための設定ファイル
　├- firebase-messaging-sw.js   // バックグラウンドでプッシュ通知を受けるためのファイル（ServiceWorker）
　└- apple-touch-icon.png       // アイコン画像（無しでも可）

ファイル

📝 index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebPushテストサイト</title>
    <link rel="manifest" href="/manifest.json" />
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>
</head>

<body>
    <h1>WebPush テスト</h1>
    <dl>
        <dt><strong>通知許可状態</strong></dt>
        <dd id="status">-</dd>
        <dt><strong>FCMトークン</strong></dt>
        <dd id="fcm_token">-</dd>
    </dl>
    <button id="showPushNotificationDialogBtn">プッシュ通知許可ダイアログを表示</button>

    <script>
        // Firebaseの認証情報
        const firebaseConfig = {
            apiKey: "_____DUMMY_____",
            authDomain: "_____DUMMY_____",
            projectId: "_____DUMMY_____",
            storageBucket: "_____DUMMY_____",
            messagingSenderId: "_____DUMMY_____",
            appId: "_____DUMMY_____"
        };
        firebase.initializeApp(firebaseConfig);
        const messaging = firebase.messaging();

        // Firebase Cloud Messagingのトークンを取得
        function getFCMToken() {
            messaging.getToken({
                vapidKey: '_____DUMMY_____'
            }).then((currentToken) => {
                if (currentToken) {
                    document.getElementById('status').innerText = "許可";
                    document.getElementById('fcm_token').innerText = currentToken;
                } else {
                    document.getElementById('status').innerText = "未登録";
                }
            });
        };

        // ボタンタップ時のイベントを設定
        var button = document.getElementById('showPushNotificationDialogBtn');
        button.addEventListener('click', function () {
            getFCMToken();
        }, false);
    </script>
</body>

</html>

📝 manifest.json

{
  "short_name": "Web Push テスト",
  "name": "Web Push テストサイト",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

参考：mozilla.org manifest.json

📝 firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');

firebase.initializeApp({
  apiKey: "_____DUMMY_____",
  authDomain: "_____DUMMY_____",
  projectId: "_____DUMMY_____",
  storageBucket: "_____DUMMY_____",
  messagingSenderId: "_____DUMMY_____",
  appId: "_____DUMMY_____"
});

const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
});

参考： Firebase公式リポジトリ（ quickstart-js/messaging/firebase-messaging-sw.js ）

🖼 apple-touch-icon.png

画像をルートディレクトリに apple-touch-icon.png として配置する事で、ホーム画面追加時のアイコンを指定する事ができます。

※ Webプッシュ時のアイコンもこの画像が使用されます

さいごに

一部の開発者が待ち望んだiOSでのWebプッシュが遂にリリースされましたね！

他OSと比べると制約が厳しい面もありますが、基本的にはユーザーにメリットのある制約になっている様に思いました。
（Safariでブラウジングしている最中に、突然通知許可ダイアログが表示されると戸惑ってしまいますしね）

しかし「サイトをホーム画面に追加する」という操作に慣れていないユーザーも多そうなので、ココをどう誘導するかもポイントになってきそうです。

ネイティブアプリからの完全置き換えには厳しそうですが、アプリをインストールして貰うより格段にハードルは低いので今後色々な所で活用できそうですね！

この記事をシェア

掲載内容は、記事執筆時点の情報をもとにしています。

Related Posts