プッシュ通知をPWAに統合する方法

公開: 2021-04-28

今日のチュートリアルでは、Firebaseを使用してプッシュ通知をPWAに統合します。具体的には、HTTPSリクエストを使用してメッセージを送信できるクラウドメッセージング機能を使用します。

プログレッシブウェブアプリとプッシュ通知

プログレッシブウェブアプリは絶えず変化する動きであるため、テクノロジー自体がネイティブアプリの対応するアプリと同等（機能的に）になっているのは驚くことではありません。

 推奨読書：PWA対ネイティブ：どちらがあなたに適していますか？

通知トリガーを使用すると、ユーザーのデバイスが機内モードになっている場合でも、開発者は通知をスケジュールできます。
Jon Krafcik、Chrome Dev Summit 2019

プッシュ通知トリガー-ChromeDevSummit 2019 — *Chrome 80の新機能である**通知トリガー**により、機内モードでも通知が有効になります*

これらすべての根本的な変更が実施されているため、PWAにさらに多くの収益をもたらすためにそれを利用しないのは無駄です。また、このチュートリアルを使用して独自のプッシュ通知機能を簡単に設定できるため、それほど複雑なことでもありません。

 推奨読書：Eコマース用のプログレッシブWebアプリ（PWA）の9つの必須機能

プッシュ通知をPWAに統合する方法

今日のチュートリアルでは、 Firebaseを使用してプッシュ通知をPWAに統合します。具体的には、HTTPSリクエストを使用してメッセージを送信できるクラウドメッセージング機能を使用します。

前提条件

Firebaseアカウント（Firebase内でプロジェクトを作成するため）
プログレッシブウェブアプリ。簡単なデモンストレーションとして、コマンドを使用して作成できる基本的なPWAであるcreate-react-appを使用します。

PWAプッシュ通知：Firebaseプロジェクトを作成する — *Firebaseでプロジェクトを作成する*

ステップ1 ：基本的なPWAを作成する

create-react-appを使用して基本的なPWAを作成するので、最初にNodeJSをダウンロードしましょう。 NodeJSのインストールが完了したら、 NodeJSコマンドプロンプトを開き、次のコマンドを実行します。

指定したディレクトリに簡単なReactアプリを作成するには：

 npx create-react-appyour-pwa-directory

現在の作業ディレクトリを新しく作成したReactアプリに変更します。

 cdyour-pwa-directory

FirebaseJavaScriptライブラリをプロジェクトに追加します。

 npm install firebase --save

ステップ2： `push-notification.js`作成します

次のステップは、すべての通知処理を担当するモジュールを作成することです。 <your-pwa-directory>\srcに、 push-notification.jsという名前のファイルを作成します。

まず、Firebaseを初期化し、プロジェクトのキーを渡す関数を作成しましょう。プロジェクトのキーを見つけるには、Firebase>プロジェクトの概要→プロジェクトの設定に移動し、次のアイコンをクリックします。

これにより、PWA用のFirebaseSDKを含む別のページに移動します。

プロジェクトのキーができたので、次のコードをpush-notification.jsに追加しましょう。

 'firebase'からfirebaseをインポートします。
export const initializeFirebase =（）=> {
  firebase.initializeApp（{
    apiKey： "XXXXXXXXXXXXX"、
    authDomain： "XXXXXXXXXXXXX"、
    databaseURL： "XXXXXXXXXXXXX"、
    projectId： "XXXXXXXXXXXXX"、
    storageBucket： "XXXXXXXXXXXXX"、
    MessagingSenderId： "XXXXXXXXXXXXX"、
    appId： "XXXXXXXXXXXXX"
  }）;
}

これで、すべての通知処理を担当する関数を作成したので、それをインポートして呼び出す必要があります。次のようにindex.jsを編集します。

 'react'からReactをインポートします。
'react-dom'からReactDOMをインポートします。
インポート'./index.css';
'./App'からアプリをインポートします。
import * as serviceWorkerRegistration from'./serviceWorkerRegistration';
'./reportWebVitals'からreportWebVitalsをインポートします。
'firebase'からfirebaseをインポートします。
import {initializeFirebase} from'./push-notification';
ReactDOM.render（<App />、document.getElementById（'root'））;
initializeFirebase（）;

ステップ3：サービスワーカーを作成する

Service Workersは、プログレッシブWebアプリの背後にあるテクノロジーの名前であり、オフライン機能、プッシュ通知、およびリソースキャッシュを強化します。

SimiCart、プログレッシブWebアプリについて知っておくべきことすべて

onMessageイベントを受信するには、Service Workerが必要です。そのため、ユーザーのデバイスに通知を送信できます。デフォルトでは、Firebaseはfirebase-messaging-sw.jsというファイルを自動的に検索します。

ファイルが提供されるディレクトリにfirebase-messaging-sw.jsを追加しましょう。私たちのプロジェクトはcreate-react-appプロジェクトであるため、このfirebase-messaging-sw.jsはパブリックフォルダーに配置されます。

 importScripts（'https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js'）;
importScripts（'https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js'）;
firebase.initializeApp（{
    apiKey： "XXXXXXXXXXXXX"、
    authDomain： "XXXXXXXXXXXXX"、
    databaseURL： "XXXXXXXXXXXXX"、
    projectId： "XXXXXXXXXXXXX"、
    storageBucket： "XXXXXXXXXXXXX"、
    MessagingSenderId： "XXXXXXXXXXXXX"、
    appId： "XXXXXXXXXXXXX"
}）;
const Messaging = firebase.messaging（）;

PWA Service Workerについてまだ聞いたことがない場合は、この驚くべきテクノロジーについてすべて学ぶための独占記事があります。

手順4：通知を送信するためのユーザー権限をリクエストする

プライバシーの時代です。不要な不正な通知を送信してユーザーを煩わせたくはありません。

ユーザーの許可をリクエストするには、これをpush-notification.jsに追加するだけです。

 'firebase'からfirebaseをインポートします。
 
export const initializeFirebase =（）=> {
  firebase.initializeApp（{
    apiKey： "XXXXXXXXXXXXX"、
    authDomain： "XXXXXXXXXXXXX"、
    databaseURL： "XXXXXXXXXXXXX"、
    projectId： "XXXXXXXXXXXXX"、
    storageBucket： "XXXXXXXXXXXXX"、
    MessagingSenderId： "XXXXXXXXXXXXX"、
    appId： "XXXXXXXXXXXXX"
  }）;
}
 
export const askForPermissionToReceiveNotifications = async（）=> {
  試す {
    const Messaging = firebase.messaging（）;
    Messaging.requestPermission（）;を待つ
    const token = await Messaging.getToken（）;
    console.log（'トークンは次のとおりです：'、token）;
    
    トークンを返します。
  } catch（error）{
    console.error（error）;
  }
}

また、この関数はどこかから呼び出す必要があるため、ボタンをクリックするだけで追加します。 /src/ディレクトリのapp.jsファイルを次のように編集します。

 './logo.svg'からロゴをインポートします。
インポート'./App.css';
import {askForPermissionToReceiveNotifications} from'./push-notification';

関数App（）{
  戻る （
    <div className = "App">
      <header className = "App-header">
        <img src = {logo} className = "App-logo" alt = "logo" />
        <p>
          <code> src / App.js </ code>を編集し、保存して再読み込みします。
        </ p>
        <a
          className = "App-link"
          href = "https://reactjs.org"
          target = "_ blank"
          rel = "noopener noreferrer"
        >>
          Reactを学ぶ
        </a>
		 <button onClick = {askForPermissionToReceiveNotifications}>
          クリックして通知を受け取ります
        </ button>
      </ header>
    </ div>
  ）;
}

デフォルトのアプリをエクスポートします。

それでは、プロジェクトを開始しましょう。クリックして通知を受け取るボタンが次のように表示されます。

ボタンをクリックすると、許可を求めるポップアップが表示されます。

[許可]をクリックして、ブラウザのコンソールを確認します。トークンを通知するメッセージが表示されます。

次のステップで必要になるため、このトークンを別の場所に保存します。

ステップ5：Postmanでプッシュ通知を送信する

次の手順では、Postmanを使用して、Firebaseのクラウドメッセージングサービスを使用して通知を送信します。

Postmanで、次の情報を使用してPOSTリクエストを作成します。

リクエストURL ：https://fcm.googleapis.com/fcm/send

ヘッダー：POSTリクエストのヘッダーには、次のキーが必要です。

許可： key = SERVER_KEY

コンテンツタイプ：application / json

注： SERVER_KEYは、Firebase設定の[クラウドメッセージング]タブにあります

本文：POSTリクエストの本文に次のコードを入力します。

 {{
    "通知"： {
        「タイトル」：「SimiCart」、
        "body"： "テストプッシュ通知"、
        "click_action"： "http：// localhost：3000 /"、
        「アイコン」：「https://i.imgur.com/5zO5cce.png」
    }
    "to"： "USER_TOKEN"
}

USER_TOKENを、手順4で取得したトークンに置き換えます（ [クリックして通知を受信する]ボタンをクリックして）。BodytypeをrawおよびJSONとして選択することを忘れないでください。

[送信]をクリックすると、右下隅に通知がポップアップ表示されます。

注：これらの通知は、アプリがバックグラウンドにあるか最小化されている場合にのみ表示されます。

おめでとう！これで、PWAが通知を送信できるようになりました。

結論

このガイドを終えると、自信を持って独自のプッシュ通知機能を設定できるようになることを願っています。プログレッシブウェブアプリは新しいテクノロジーであるため、テクノロジーに精通していないユーザーにとっては複雑なことです。そのため、PWAでの長年の経験であらゆるニーズに対応できるSimiCartなどのソリューションプロバイダーがすぐに利用できます。

simicartPWAを探索する

プッシュ通知をPWAに統合する方法

プログレッシブウェブアプリとプッシュ通知

プッシュ通知をPWAに統合する方法

前提条件

ステップ1 ：基本的なPWAを作成する

ステップ2： push-notification.js作成します

ステップ3：サービスワーカーを作成する

手順4：通知を送信するためのユーザー権限をリクエストする

ステップ5：Postmanでプッシュ通知を送信する

結論

ステップ2： `push-notification.js`作成します