バッジと通知を使用してユーザーを再エンゲージメントする

プログレッシブ Web Apps (PWA) は、キャッシュ内のデータの更新や、デバイスが接続を回復したときにメッセージを送信するなど、アプリが実行されていない場合に機能します。 これを行うには、「 バックグラウンドで PWA を同期して更新する」で説明されている次の API を使用します。

• バックグラウンド同期 API
• 定期的なバックグラウンド同期 API
• バックグラウンド フェッチ API

バックグラウンド タスクが完了した後でユーザーをアプリに再エンゲージメントするには、通知とバッジを使用できます。 これを行うには、次の API を使用します。

• App Badging API
• 通知 API

バッジは使いやすく、頻繁に使用できます。 バッジはユーザーのワークフローを中断しません。また、受信したメッセージの数など、少量の情報を表示する場合に便利です。

通知は、アプリがシステムの通知センターに参加し、画像やテキスト情報を表示するのに役立ちます。 通知は、アプリの状態の重要な変更についてユーザーに警告するのに役立ちます。 ただし、通知はユーザーのワークフローを中断する傾向があるため、ほとんど使用しないでください。

アプリ アイコンにバッジを表示する

PWA は、 App Badging API を使用して、アプリ アイコンにバッジを表示できます。 バッジは空にすることも、数値を含めることもできます。

サポートを確認する

App Badging API を使用する前に、まず、次のように、アプリが実行されているブラウザー エンジンで App Badging API がサポートされているかどうかをチェックします。

if (navigator.setAppBadge) {
    console.log("The App Badging API is supported!");
}

バッジの表示

バッジを設定するには、アプリ フロントエンドまたはサービス ワーカーから次のコードを使用します。

// To display an empty badge
navigator.setAppBadge();

// To display a number in the badge
navigator.setAppBadge(42);

関数は setAppBadge Promise を返します。これは、バッジがいつ追加されたかを把握し、潜在的なエラーをキャッチするために使用できます。

navigator.setAppBadge(42).then(() => {
    console.log("The badge was added");
}).catch(e => {
    console.error("Error displaying the badge", e);
});

バッジをクリアする

アプリ アイコンのバッジを削除するには、フロントエンドまたはサービス ワーカーから次のコードを使用します。

navigator.clearAppBadge();

は clearAppBadge 、潜在的なエラーを処理するために使用できる Promise も返します。

バッジをクリアするもう 1 つの方法は、もう一度呼び出 setAppBadge すことですが、今度は値として渡します 0 。

navigator.setAppBadge(0);

アクション センターに通知を表示する

PWA は、 Notifications API を使用して通知を表示できます。

サポートを確認する

API を使用する前に、次のようにサポートされていることをチェックします。

if ("Notification" in window) {
    console.log("The Notifications API is supported");
}

アクセス許可を要求する

Notifications API は、メッセージを表示するためのユーザーのアクセス許可を要求した後にのみ使用できます。 アクセス許可を要求するには、次に示すように 関数を requestPermission 使用します。

アクセス許可の要求は、ユーザー アクションへの応答でのみ行う必要があります。 これは、ユーザーが通知を使用する機能をまだ操作していないときに、アクセス許可プロンプトでユーザーを中断しないようにするためのベスト プラクティスです。

button.addEventListener("click", () => {
    Notification.requestPermission().then(permission => {
        if (permission === "granted") {
            console.log("The user accepted");
        }
    });
});

アクセス許可の状態は、後でもう一度チェックできます。

if (Notification.permission === "granted") {
    console.log("The user already accepted");
}

通知を表示する

API がサポートされ、ユーザーが通知を受け入れたことがわかったら、オブジェクトを作成して通知を Notification 表示できます。

const notification = new Notification("Hello World!");

上記のコードではテキストのみの通知メッセージが表示されますが、追加 body と icon プロパティを含めることでメッセージをカスタマイズすることもできます。

const notification = new Notification("Hello World!", {
    body: "This is my first notification message",
    icon: "/assets/logo-192.png",
});

アプリのサービス ワーカーからの通知を表示することもできます。 これは、アプリが実行されていない間にサービス ワーカーが作業を行っている可能性があるため、便利です。 サービス ワーカーから通知を送信するには、 関数を使用します ServiceWorkerRegistration.showNotification 。

self.registration.showNotification("Hello from the Service Worker!");

関数は showNotification 、前の例で使用した Notification コンストラクターと同じ引数をサポートします。 関数では showNotification 、 プロパティもサポート actions されています。このプロパティは、次のセクションで説明します。

通知にアクションを追加する

通知では、ユーザーが実行するアクションを追加できます。 これは、 関数を使用して ServiceWorkerRegistration.showNotification 表示される永続的な通知でのみサポートされます。

self.registration.showNotification("Your content is ready", {
    body: "Your content is ready to be viewed. View it now?",
    icon: "/assets/logo-192.png",
    actions: [
        {
            action: "view-content",
            title: "Yes"
        },
        {
            action: "go-home",
            title: "No"
        }
    ]
});

ユーザーがいずれかのアクション ボタンをクリックすると、PWA はイベントをリッスンすることでクリックを notificationclick 処理できます。 イベントが notificationclick 受信されたら、通知を閉じて、いくつかのコードを実行します。

self.addEventListener('notificationclick', event => {
    // Close the notification.
    event.notification.close();

    // React to the action.
    if (event.action === 'view-content') {
        console.log("view-content action was clicked");
    } else if (event.action === 'go-home') {
        console.log("go-home action was clicked");
    } else {
        console.log("main body of the notification was clicked");
    }
}, false);

通知アクションの詳細については、「MDN での Notification.actions 」を参照してください。