OpenWeb でのプッシュ通知

プッシュ通知の実装の詳細については、ウェブのプッシュ通知のドキュメントをご覧ください。

開発者の部屋に尋ねられたら、どのモバイル デバイスの機能が 常に上位に表示されます。

プッシュ通知を使用すると、ユーザーは自分が訪れたサイトからの更新情報を受け取ることをオプトインできます。 カスタマイズした魅力的なコンテンツで 効果的に再アプローチできます

Chrome バージョン 42 以降、Push APINotification API は、 開発できます。

Chrome の Push API は、次のようなテクノロジーを利用しています。 ウェブアプリ マニフェスト Service Worker です。 今回の投稿では、これらのテクノロジーを一つひとつ見ていきますが、これはほんの最低限のものにすぎません。 プッシュメッセージングを 立ち上げることができますこれらのコンセプトについて マニフェストの他の機能と Service Worker のオフライン機能 上記のリンクをご確認ください。

また、Chrome の今後のバージョンで API に追加される内容、 最後によくある質問を紹介します

Chrome 用のプッシュ メッセージの実装

このセクションでは、push をサポートするために完了する必要がある各手順について説明します。 ウェブアプリで行えます

Service Worker を登録する

メッセージの push メッセージを実装するための Service Worker が、 できます。これは、push メッセージを受信すると、その時点で ブラウザが Service Worker を起動できます。Service Worker は、 イベントを発生させて、そのイベントの処理方法を決定できます。 push メッセージです。

ウェブアプリで Service Worker を登録する方法の例を次に示します。日時 登録が正常に完了したら initialiseState() を呼び出します。この関数により、 後ほど説明します

var isPushEnabled = false;



window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

ボタンクリック ハンドラは、プッシュ メッセージをサブスクライブまたは登録解除します。 isPushEnabled は、push の有効化を単純に追跡するグローバル変数です。 登録状況を確認できます。これらの用語は 確認します。

次に、service-worker.js を登録する前に、Service Worker がサポートされていることを確認します このファイルには、push メッセージを処理するためのロジックが含まれています。ここでは、 この JavaScript ファイルが Service Worker であることを ブラウザに伝えるだけです 確認しました

初期状態をセットアップする

Chrome でのプッシュ メッセージの UX の有効 / 無効の例。

Service Worker を登録したら、UI の状態を設定する必要があります。

ユーザーはシンプルな UI でサイトのプッシュ メッセージを有効または無効にできます。 変更が加えられても必ず最新の状態が保たれることを期待しますその他の プッシュ メッセージが有効になっている場合は、そのままにして戻ります。 push メッセージがすでに有効になっていることが UI にハイライト表示されます。

こちらのドキュメントに、UX ガイドラインの一部が記載されています。 この記事では技術的な側面に焦点を当てます。

この時点で、対処すべき状態は 2 つしかないとお考えかもしれません。 有効または無効にできます。ただし、これを取り巻く州は他にもいくつかあります。 注意が必要な通知の数が増えます

Chrome におけるさまざまな考慮事項とプッシュ状態を示す図

ボタンを有効にする前に、いくつかの API を確認する必要があります。 すべてがサポートされている場合は、UI を有効にして初期状態を プッシュ メッセージングがサブスクライブされているかどうかを示す。

これらのチェックの結果の大半は UI が無効になるので、 初期状態を無効に設定します。こうすれば ページの JavaScript に問題がある場合(たとえば、JS ファイルを ユーザーが JavaScript を無効にしている場合。

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

この初期状態では、上記のチェックを initialiseState() メソッド(Service Worker の登録後)に実装されます。

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

この手順の概要:

  • showNotification が ServiceWorkerRegistration で利用可能であることを確認します。 説明します。これがないと、Service Worker からの通知を表示できません。 push メッセージを受信すると発生します。
  • 現在の Notification.permission が何かを確認し、 "denied"。権限が拒否された場合、通知を表示できません ユーザーがブラウザで権限を手動で変更するまで、この状態が維持されます。
  • プッシュ メッセージングがサポートされているかどうかを確認するには、PushManager が 指定することもできます。
  • 最後に、pushManager.getSubscription() を使用して、 判断しますその場合、定期購入の詳細を 適切な情報があることを確認し、API でその内容を示す 有効かどうかを判定できますCloud Monitoring で 後ほど説明します。

navigator.serviceWorker.ready が解決するまで待機し、 プッシュボタンの有効化もできます push メッセージをサブスクライブできます。

次のステップでは、ユーザーがプッシュ メッセージを有効にしようとしても、 その前に Google Developer Console プロジェクトを設定しておく必要があります マニフェストにパラメータを追加して Firebase Cloud Messaging(FCM)を使用する (旧称 Google Cloud Messaging(GCM))です。

Firebase Developer Console でプロジェクトを作成する

Chrome は FCM を使用して push メッセージの送受信を処理します。ただし、 FCM API を使用する場合は、Firebase Developer Console でプロジェクトを設定する必要があります。

以下の手順は、Chrome、Android 版 Opera、Samsung に固有のものです。 ブラウザが FCM を使用している。他のブラウザでこれがどのように機能するかについては、この記事の後半で説明します。

新しい Firebase デベロッパー プロジェクトを作成する

最初に、https://console.firebase.google.com/ で新しいプロジェクトを作成する必要があります。 [新しいプロジェクトを作成]をクリックします

新しい Firebase プロジェクトのスクリーンショット

プロジェクト名を追加してプロジェクトを作成すると、このプロジェクトが表示されます。 ダッシュボード:

Firebase プロジェクト ホーム

このダッシュボードで、上部のプロジェクト名の横にある歯車アイコンをクリックします。 [プロジェクトの設定] をクリックします。

Firebase プロジェクトの設定メニュー

設定ページで [Cloud Messaging] をクリックします。タブ

Firebase プロジェクトの Cloud Messaging メニュー

このページには、プッシュ メッセージング用の API キーが記載されています。このキーは後で使用します。 次のスライドでウェブアプリ マニフェストに入力する必要がある、 。

ウェブアプリ マニフェストを追加する

push の場合、gcm_sender_id フィールドのあるマニフェスト ファイルを追加する必要があります。 push サブスクリプションが成功します。このパラメータが必要なのは、 Chrome、Android 向け Opera、Samsung ブラウザ(FCM / GCM を使用)。

gcm_sender_id は、ブラウザでユーザーをチャンネル登録する際に使用されます。 FCM 対応のデバイスです。つまり、FCM はユーザーのデバイスを識別して、 送信者 ID が対応する API キーと一致していることと、ユーザーが プッシュ メッセージの送信を許可しました。

以下は、非常にシンプルなマニフェスト ファイルです。

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

gcm_sender_id の値を 追加します。

マニフェスト ファイルをプロジェクトに保存したら(manifest.json は、 など)は、HTML から参照するために、 できます。

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

これらのパラメータを含むウェブ マニフェストを追加しないと、例外が発生します メッセージを push できるようにユーザーを登録しようとすると、 "Registration failed - no sender id provided" または "Registration failed - permission denied"

プッシュ メッセージングに登録する

マニフェストの設定が完了したので、サイトの JavaScript に戻ります。

サブスクライブするには、ニュース メディア上で subscribe() メソッドを呼び出す必要があります。 PushManager オブジェクトを作成し、 ファイアウォール ルールで ServiceWorkerRegistration

送信元に push を送信する権限を付与するようユーザーに求めます。 通知を受け取れます。この権限がないと、次のことを正常に行うことができません 定期購読できます

Promise が返された場合 subscribe() メソッドによって解決されると、 PushSubscription endpoint を含むオブジェクト。

エンドポイントは、サービスごとにサーバーに保存する必要があります。 後でプッシュ メッセージを送信する際に必要になります。

次のコードは、プッシュ メッセージング用にユーザーをサブスクライブします。

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

この時点で、ウェブアプリはプッシュ メッセージを受信する準備が整っていますが、 push イベント リスナーを Service Worker ファイルに追加するまで続きます。

Service Worker の push イベント リスナー

push メッセージを受信したら(この後、実際に push メッセージを メッセージ)、push イベント、 Service Worker でディスパッチされます。 通知を表示します。

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

このコードは、プッシュ イベント リスナーを登録し、 事前定義されたタイトル、本文、アイコン、通知タグがあります。 この例では、event.waitUntil() が細かな点です。 メソッドを呼び出します。このメソッドは、 プロミスであり、 イベント ハンドラのライフタイム(または、サービスを維持したまま 呼び出すまでです。 決済済み この場合、event.waitUntil に渡される Promise は、返される Promise です。 showNotification() から。

通知タグは ID を使用して識別されます。同じ宛先に 2 つの push メッセージを送信し、 間にわずかな遅延が発生し、通知が 指定すると、ブラウザは最初の通知を表示し、それを プッシュ メッセージを受信すると 2 回目の通知が行われます。

一度に複数の通知を表示するには、別のタグを使用します。 タグがまったくありません 通知の表示のより詳細な例については、この後の 投稿します。ひとまず、操作を簡素化して、プッシュ メッセージの送信が 表示されます。

push メッセージの送信

push メッセージへのサブスクライブが完了し、Service Worker で FCM 経由でプッシュ メッセージを送信します。

これは、FCM を使用するブラウザにのみ適用されます。

PushSubscription.endpoint 変数をサーバーに送信すると、 エンドポイントが特殊です。URL の末尾にパラメータがあり、 registration_id である。

エンドポイントの例を次に示します。

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

FCM URL は次のとおりです。

https://fcm.googleapis.com/fcm/send

registration_id は次のようになります。

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

これは、FCM を使用するブラウザに固有のものです。通常のブラウザでは、 エンドポイントを取得するだけで 標準的な方法でそのエンドポイントを呼び出し URL に関係なく機能します

つまり、お使いのサーバーでエンドポイントが が FCM 用で、登録されている場合は登録 ID を抽出します。Python でこれを行うには 次のようなコードを作成できます。

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

登録 ID を取得したら、FCM API を呼び出すことができます。マイページ FCM API のリファレンス ドキュメントをご覧ください。

FCM を呼び出すときに覚えておくべき重要な側面は次のとおりです。

  • 値が key=&lt;YOUR_API_KEY&gt;Authorization ヘッダー API を呼び出すときに設定する必要があります。ここで &lt;YOUR_API_KEY&gt; は、 Firebase プロジェクトの API キー。
    • API キーは、FCM が適切な送信者 ID を見つけるために使用します。 ユーザーがプロジェクトに許可を与え、最後に そのプロジェクトの許可リストにサーバーの IP アドレスを登録します。
  • 適切な Content-Type ヘッダー(application/json または application/x-www-form-urlencoded;charset=UTF-8(ただし、名前が データを JSON またはフォームデータとして 送信できます
  • registration_ids の配列 - これが登録 ID です。 エンドポイントから抽出できます

ドキュメントを確認してください サーバーからプッシュ メッセージを送信する方法は Service Worker を簡単に確認するには、 cURL ブラウザにプッシュ メッセージを送信できます。

&lt;YOUR_API_KEY&gt;&lt;YOUR_REGISTRATION_ID&gt; を入れ替える を独自のものに置き換えて、ターミナルから実行します。

次のような通知が表示されます。

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
Chrome for Android のプッシュ メッセージの例。

バックエンド ロジックを開発する際は、Authorization ヘッダーと Cloud Storage API を POST 本文の形式は FCM エンドポイントに固有であるため、 条件付きでヘッダーを追加し、POST 本文をフォーマットします。 その他のブラウザ(将来的には Chrome)では、実装が必要になります。 ウェブプッシュ プロトコルを使用します。

Chrome に現在実装されている Push API の欠点は、 プッシュ メッセージでデータを送信できません。いや、なんでもない。その理由は、 将来的な実装では、ペイロード データを暗号化する必要が push メッセージング エンドポイントに送信されます。エンドポイントが どの push プロバイダであっても、 push メッセージです。これにより、低パフォーマンスのインフラストラクチャや HTTPS 証明書や中間者攻撃を検証するための push プロバイダを経由します。ただし、この暗号化にはまだ対応していないため、 それまでの間、取得を実行して必要な情報を取得する必要があります。 通知を入力します。

より詳細な push イベントの例

ここまで見てきた通知はごく基本的な内容で、サンプルを見る限り、 実際のユースケースに対応することはできません

現実的には、ほとんどのユーザーはサーバーから情報を取得することを希望します。 通知を表示する前に、これは、 特定の内容を含む通知のタイトルとメッセージ、さらに一歩進めた内容 キャッシュを使用して ユーザーが通知をクリックしたときに ブラウザを開くとすぐに、 その時間は利用できません。

次のコードでは、API からデータを取得し、レスポンスを そのオブジェクトを使用して通知を設定します。

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

ここでも、event.waitUntil() が Promise を受け取ることを強調する価値があります。 これにより、showNotification() によって Promise が返されます。 非同期の fetch() 呼び出しが完了するまでイベント リスナーが終了しないこと 通知が表示されます。

エラーが発生している場合でも通知が表示されます。これは、 設定しないと Chrome ではその汎用的な 通知が表示されるからです

ユーザーが通知をクリックしたときに URL を開く

ユーザーが通知をクリックすると、notificationclick イベントがディスパッチされます。 必要があります。ハンドラ内では、イベント ハンドラ内で たとえば、タブをフォーカスしたり、特定の URL のウィンドウを開いたりする場合などです。

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

この例では、ブラウザをサイトのオリジンのルートに開くよう、 既存の同一オリジンのタブがある場合はそれを開き、それ以外の場合は新しいタブを開きます。

Notification API でできることについては、いくつかの投稿が投稿されています。

ユーザーのデバイスの登録解除

ユーザーのデバイスを登録してプッシュ メッセージを受信しましたが、 登録を解除しますか?

ユーザーのデバイスの登録を解除するには、主に 次に対する unsubscribe() メソッド: PushSubscription サーバーからエンドポイントを削除します( プッシュ メッセージを送信する場合など)。次のコードは、 これを次のように行います。

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

購読を最新の状態に保つ

FCM とサーバーの間でサブスクリプションが同期しなくなることがあります。確認事項 サーバーは FCM API の送信 POST のレスポンス本文を解析し、 FCM ドキュメントで説明されているように、error:NotRegisteredcanonical_id の結果。

また、Service Worker とご利用のサービスの間でサブスクリプションが同期されないこともあります。 あります。たとえば、サブスクライブとサブスクライブ解除が成功すると、 ネットワーク接続が原因でサーバーを更新できないことがあります。ユーザーが 通知権限を取り消します。これにより、自動登録解除がトリガーされます。ハンドル 結果をチェックして 定期的にserviceWorkerRegistration.pushManager.getSubscription()(例: サーバーと同期します。また、 サブスクリプションを解約した場合は自動的に再登録され、 Notification.permission == 'granted'.

sendSubscriptionToServer() での処理方法を検討する必要があります endpoint の更新時に失敗したネットワーク リクエスト。その解決策の一つは、 Cookie 内の endpoint の状態をトラッキングする サーバーに最新の情報が必要かどうかを判断します。

以上のすべてのステップにより、 ウェブ版 Chrome 46 でリリースしました。仕様に沿った機能によって作業が簡単になる (push メッセージをトリガーする標準 API など)ですが、今回のリリースでは、 ウェブアプリへのプッシュ メッセージングの構築を今すぐ始めましょう。

ウェブアプリのデバッグ方法

プッシュ メッセージの実装中、バグは 2 つの場所のどちらかに現れます。 設定されます

このページのバグは DevTools。Service Worker をデバッグする 次の 2 つのオプションがあります。

  1. chrome://inspect > にアクセスします。Service Worker。このビューでは 多くの情報が収集されます。
  2. chrome://serviceworker-internals に移動すると、この Service Worker の状態を確認し、エラーがある場合はそれを確認します。このページは DevTools に同様の機能セットが追加されるまで、一時的な回避策です。

Service Worker を初めて利用する方々には、 [DevTools ウィンドウを開いて JavaScript の実行を一時停止する] チェックボックスを使用する Service Worker の起動時に行われます。このチェックボックスをオンにすると 実行を一時停止します。これにより、 Service Worker スクリプトを再開またはステップ実行して、 学習します

serviceworker-internals の [実行の一時停止] チェックボックスがある場所を示すスクリーンショット

FCM と Service Worker の push イベントの間に問題がある場合は、 この場合、問題をデバッグする方法はあまりありません。 Chrome が何かを受信したかどうかを確認できます。重要なのは サーバーが API 呼び出しを行うと、FCM からのレスポンスが成功するかどうかです。画面の表示形式は たとえば次のようになります。

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

"success": 1 レスポンスに注目してください。失敗と表示される場合は FCM 登録 ID と push の内容に問題があることを示唆しています。 メールが Chrome に送信されません。

Chrome for Android での Service Worker のデバッグ

現時点では、Chrome for Android での Service Worker のデバッグは明らかではありません。 chrome://inspect でデバイスを見つけ、 「Worker pid:....」という名前のリストアイテムこれにはサービスの URL が含まれます できます。

Chrome の検査で Service Worker が表示される場所を示すスクリーンショット

プッシュ通知の UX

Chrome チームはベスト プラクティスのドキュメントを作成 プッシュ通知の UX に関する推奨事項と、 いくつかご紹介します

Chrome とオープンウェブでのプッシュ メッセージの未来

このセクションでは、Chrome と Google Cloud の この実装で知っておくべき特定の部分と、 他のブラウザの実装とは異なります。

ウェブプッシュ プロトコルとエンドポイント

Push API 標準の利点は、 endpoint にあると、それらをサーバーに渡して push を送信します Web Push Protocol を実装して、メッセージを暗号化できます。

ウェブプッシュ プロトコルは、プッシュ プロバイダが実装できる新しい規格です。 push プロバイダが誰であるかをデベロッパーが気にする必要はありません。「 これにより、API キーの登録や特別なキーの送信が不要になります。 データを変換できます

Chrome は Push API を実装した最初のブラウザであり、FCM はそうではない ウェブプッシュ プロトコルをサポートしているため、Chrome では gcm_sender_id であり、FCM には RESTful API を使用する必要があります。

Chrome の最終目標は、Chrome と FCM でウェブプッシュ プロトコルを使用することです。

それまでは、エンドポイントの &quot;https://fcm.googleapis.com/fcm/send&quot; 他のエンドポイントとは別に処理する必要があります。つまり、ペイロード データを 認証キーを追加します。

ウェブプッシュ プロトコルの実装方法

Firefox Nightly は現在プッシュで動作しており、最初のブラウザになる可能性が高い ウェブプッシュ プロトコルを実装する必要があります。

よくある質問

仕様はどこで確認できますか?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

ウェブ プレゼンスに複数のオリジンがある場合や、ウェブ プレゼンスとネイティブ プレゼンスの両方がある場合、通知の重複を防ぐことはできますか?

現時点ではこの問題の解決方法はありませんが、Chromium で進捗状況を確認できます。

ユーザーのデバイス用になんらかの ID を用意し、 ネイティブ アプリとウェブアプリのサブスクリプション ID を照合し、 push メッセージの送信先を決定します。画面サイズ 生成された鍵をウェブアプリとネイティブ アプリ間で共有しますが、 それぞれに長所と短所があります

gcm_sender_id が必要な理由

これは、Chrome、Android 版 Opera、Samsung ブラウザが Firebase Cloud Messaging(FCM)API を使用する。目標は、kubectl の ウェブプッシュ プロトコルが標準が確定した時点で、FCM でサポートできるようになります。

Web Sockets や Server-Sent Events(EventSource)を使用しない理由

プッシュ メッセージを使用する利点は、ページが閉じている場合でも、 Service Worker が起動し、通知を表示できるようになります。Web Socket ページまたはブラウザを閉じたときに、EventSource の接続が閉じられます。

バックグラウンド イベントの配信が不要な場合はどうすればよいですか?

バックグラウンドでの配信が不要な場合は、Web Sockets が適しています。

通知を表示せずにプッシュ機能(サイレント バックグラウンド プッシュなど)を使用できるのはどのような場合ですか?

利用可能になる時期はまだ決まっていませんが、 バックグラウンド同期を実装する 決定や仕様は決まっていませんが、 バックグラウンド同期によるサイレント プッシュ

HTTPS が必要な理由開発中にこれを回避するにはどうすればよいですか?

Service Worker には、その Service Worker スクリプトが 意図したオリジンであり、中間者によるものではない 軽減されます。現時点では、ライブサイトで HTTPS を使用することになりますが、localhost は 作業に集中できます。

ブラウザ サポートの状況

Chrome は安定版でサポートしており、Mozilla は Firefox Nightly で push に取り組んでいます。 詳しくは、Push API の実装のバグをご覧ください。 また、通知の実装はこちらで確認できます。

一定期間が経過した通知を削除できますか?

現時点ではできませんが、今後サポートを追加していく予定です。 現在表示されている通知のリストです。目標を設定するユースケースがある場合は、 作成後の通知の有効期限についても 詳しくご説明いたします。ご意見がございましたら、Chrome チームに報告いたします。

ユーザーへのプッシュ通知の送信を停止するだけでよい場合 通知の保持期間は関係なく、 表示する場合は、FCM の有効期間(ttl)パラメータを使用できます。 詳細

Chrome のプッシュ メッセージ機能にはどのような制限がありますか?

この投稿では、いくつかの制限事項について概説しています。

  • Chrome で CCM をプッシュ サービスとして使用すると、 提供します。これらの課題の一部を取り除き、 実現します。
  • プッシュ メッセージを受信したときに通知を表示する必要があります。
  • パソコンの Chrome では、Chrome が実行されていない場合はメッセージを 受け取りません。これは、プッシュ メッセージを使用する ChromeOS や Android とは異なります。 常に受信されます。

Permissions API を使用する必要はないでしょうか?

Permission API が Chrome に実装されている。 ただし、すべてのブラウザで利用できるとは限りません。詳しくはこちらをご覧ください

通知をクリックしても前のタブが開かないのはなぜですか?

この問題は、現在サービスによって制御されていないページにのみ影響します できます。詳しくはこちらをご覧ください

ユーザーのデバイスがプッシュを受信した時点で通知が古くなっている場合はどうなりますか?

プッシュ メッセージを受信したときには、必ず通知を表示する必要があります。 通知を送信したいが、単に有用な通知だけを 「time_to_live」を使用すると、パラメータ(CCM) 有効期限を過ぎても FCM はプッシュ メッセージを送信しないようにします。

詳しくはこちらをご覧ください

10 件のプッシュ メッセージを送信したが、デバイスには 1 件だけ送信したい場合はどうなりますか?

FCM には「fold_key」があるパラメータを使用して、保留中のメッセージを置き換えるよう FCM に指示できます。 新しいメッセージで返されます。

詳しくはこちらをご覧ください