プッシュ通知を使用してWebAppをPWAとして変換する方法

公開: 2022-03-20

この記事では、FirebaseCloudMessagingを使用してプッシュ通知を使用してWebアプリケーションまたはWebサイトをPWAに変換する方法について説明します。

現代の世界では、ほとんどのWebアプリケーションがPWA（プログレッシブWebアプリ）に変換されています。これは、オフラインサポート、プッシュ通知、バックグラウンド同期などの機能を提供するためです。 PWA機能により、Webアプリケーションはネイティブアプリのようになり、リッチなユーザーエクスペリエンスが提供されます。

たとえば、TwitterやAmazonなどの優れた企業は、ユーザーエンゲージメントを高めるためにWebアプリをPWAに変換しています。

PWAとは何ですか？

PWA =（Webアプリ）+（一部のネイティブアプリ機能）

PWAは同じWebアプリ（HTML + CSS + JS）です。これは、以前と同じように、すべてのブラウザーでWebアプリと同じように機能します。ただし、最新のブラウザにWebサイトをロードすると、ネイティブ機能を使用できます。これにより、Webアプリが以前よりも強力になり、フロントエンドでアセットをプリフェッチしてキャッシュできるため、よりスケーラブルになり、バックエンドサーバーへのリクエストが減ります。

PWAとWebアプリの違い

インストール可能：Webアプリはネイティブアプリのようにインストールできます
プログレッシブ：Webアプリと同じように機能しますが、いくつかのネイティブ機能があります
ネイティブアプリのエクスペリエンス：ユーザーは、インストールすると、ネイティブのようにWebアプリを使用およびナビゲートできます。
簡単にアクセス可能：当社のWebアプリとは異なり、ユーザーがアクセスするたびにWebアドレスを入力する必要はありません。インストールすると、シングルタップで開くことができます。
アプリケーションのキャッシュ：PWAの前は、Webアプリで実装された唯一のキャッシュメカニズムは、ブラウザーでのみ使用可能なHTTPキャッシュを使用することです。しかし、PWAを使用すると、Webアプリでは使用できないクライアント側のコード自体を使用してキャッシュすることができます。
（App / Play）ストアの公開： PWAはGooglePlayストアとIOSAppStoreで公開できます。

アプリケーションをPWAに変換すると、より強力になるだけです。

なぜビジネスはPWAを考慮すべきなのか

ほとんどのクライアントが私たちに連絡を取り、最初にWebアプリソリューションの開発を依頼し、次にAndroidおよびiOSアプリを依頼します。私たちがやろうとしているのは、別のチームによってWebアプリからAndroid / IOSアプリに同じ機能を構築することだけです。これには、より多くの開発コストと市場投入までの時間がかかります。

しかし、予算が限られているクライアントや、製品の市場投入までの時間がより重要であると考えるクライアントもいます。

クライアントの要件のほとんどは、PWA機能自体で満たすことができます。彼らには、PWAのみを提案し、Playstoreにデプロイする場合は、TWAを使用してPWAをAndroidアプリとして変換することを提案します。

要件が本当にPWAでは満たすことができないネイティブアプリケーション機能を必要とする場合。クライアントは、必要に応じて両方のアプリケーションを開発できます。しかし、そのシナリオでも。 Androidの開発が完了するまで、PWAをPlayストアにデプロイできます。

例：Titan Eyeplus

当初、彼らはPWAアプリを開発し、TWA（Trusted Web Activity）を使用してPlayストアに展開しました。彼らがAndroidアプリケーションの開発を完了したら。彼らは実際のAndroidアプリケーションをPlayストアにデプロイしました。彼らは、PWAを使用して市場投入までの時間と開発コストの両方を達成しました。

PWAの機能

PWAは、Webアプリケーションにネイティブアプリのような機能を提供します。

主な機能は次のとおりです。

インストール可能：ネイティブアプリのようにインストールされるWebアプリケーション。
キャッシング：アプリケーションのキャッシングが可能であり、アプリケーションをオフラインでサポートします。
プッシュ通知：プッシュ通知をサーバーから送信して、ユーザーを当社のWebサイトに誘導することができます。
ジオフェンス：デバイスの場所が変更されるたびに、イベントによってアプリケーションに通知できます。
支払いリクエスト：ネイティブアプリのような優れたユーザーエクスペリエンスを使用して、アプリケーションで支払いを有効にします。

そして、将来的にはさらに多くの機能が登場します。

その他の機能は次のとおりです。

ショートカット：マニフェストファイルに追加されたすばやくアクセス可能なURL。
Web共有API：アプリケーションが他のアプリケーションから共有データを受信できるようにします。
バッジAPI：インストールされているPWAの通知数を表示します。
定期的なバックグラウンド同期API：ネットワークに接続されるまでユーザーのデータを保存します。
連絡先ピッカー：ユーザーのモバイルから連絡先を選択するために使用されます。
ファイルピッカー：ローカルシステム/モバイル上のファイルにアクセスするために使用されます

ネイティブアプリケーションに対するPWAの利点

ネイティブアプリはPWAよりもパフォーマンスが高く、PWAよりも多くの機能を備えています。それでも、ネイティブアプリに比べていくつかの利点があります。

PWAは、Android、IOS、デスクトップなどのクロスプラットフォームで実行されます。
それはあなたの開発コストを削減します。
ネイティブアプリと比較して、機能の展開が簡単です。
PWA（ウェブサイト）はSEOに対応しているため、簡単に見つけることができます
HTTPSでのみ機能するため安全

ネイティブアプリに対するPWAのデメリット

ネイティブアプリと比較して、利用できる機能は限られています。
PWA機能は、すべてのデバイスをサポートすることが保証されているわけではありません。
PWAのブランディングは、アプリストアやプレイストアでは入手できないため、低くなっています。

android Trusted Web Activity（TWA）を使用して、PlayストアでAndroidアプリとしてPWAを展開できます。それはあなたのブランディングに役立ちます。

WebアプリをPWAに変換するために必要なもの

変換する場合は、任意のWebアプリまたはWebサイトをPWAに変換します。

Service-Worker：キャッシュ、プッシュ通知、リクエストのプロキシ用のPWAアプリのコア。
マニフェストファイル：Webアプリケーションに関する詳細が含まれています。以前は、ホーム画面にネイティブアプリのようにアプリケーションをダウンロードしていました。
アプリのロゴ：アプリアイコンの高品質画像512 x512px。ホーム画面、スプラッシュ画面などのPWAに必要なアプリのロゴ。したがって、任意のツールを使用して、APPの1：1の比率の画像のセットを作成する必要があります。
レスポンシブデザイン：ウェブアプリは、さまざまな画面サイズで動作するようにレスポンシブである必要があります。

サービスワーカーとは：

サービスワーカー（クライアント側スクリプト）は、Web APPと外部の間のプロキシであり、Webアプリのプッシュ通知を配信し、キャッシングをサポートします。

Service Workerは、メインのJavaScriptから独立して実行されます。そのため、DOMAPIにアクセスできません。 IndexedDB API、Fetch API、CacheStorageAPIにのみアクセスできます。ただし、メッセージを使用してメインスレッドと通信できます。

サービスワーカーが提供するサービス：

オリジンドメインからのHTTPリクエストをインターセプトします。
サーバーからプッシュ通知を受信します。
アプリケーションのオフラインでの可用性

Service Workerはアプリケーションを制御し、リクエストを操作できますが、独立して実行されます。そのため、man-in-the-middle攻撃を回避するには、オリジンドメインをHTTPSで有効にする必要があります。

マニフェストファイルとは

マニフェストファイル（manifest.json）には、ブラウザーに通知するPWAアプリに関する詳細が含まれています。

name：アプリケーションの名前
short_name：アプリケーションの短縮名。提供されている場合
プロパティ名とshort_nameの両方を使用すると、ブラウザはshort_nameを取ります。
description：アプリケーションを説明するための説明。
start_url：PWAの起動時にアプリケーションのホームページを指定します。
アイコン：ホーム画面などのPWAの画像のセット。
background_color：PWAアプリケーションでスプラッシュ画面の背景色を設定します。
表示：PWAアプリに表示するようにブラウザーUIをカスタマイズします。
theme_color：PWAアプリのテーマの色。
scope：PWAで検討するアプリケーションのURLスコープ。デフォルトは、配置されているマニフェストファイルの場所です。
ショートカット：PWAアプリケーションのクイックリンク。

WebアプリをPWAに変換する

デモの目的で、静的ファイルを使用してGeekflareWebサイトのフォルダー構造を作成しました。

index.html –ホームページ
記事/
- index.html –記事ページ
著者/
- index.html –著者ページ
ツール/
- index.html –ツールページ
お得な情報/
- index.html –お得なページ

すでにWebサイトまたはWebアプリをお持ちの場合は、以下の手順に従ってPWAに変換してみてください。

PWAに必要な画像を作成する

まず、アプリのロゴを取得し、5つの異なるサイズで1：1の比率のサイズにトリミングします。 https://tools.crawlink.com/tools/pwa-icon-generator/を使用して、さまざまな画像サイズをすばやく取得しました。だからあなたもそれを使うことができます。

マニフェストファイルを作成する

次に、アプリの詳細を含むWebアプリケーションのmanifest.jsonファイルを作成します。デモ用に、GeekflareWebサイトのマニフェストファイルを作成しました。

 {{
	"名前"： "オタクフレア"、
	"short_name"： "Geekflare"、
	"description"： "Geekflareは、高品質のテクノロジーと金融に関する記事を作成し、ビジネスと人々の成長を支援するツールとAPIを作成しています。"、
	"start_url"： "/"、
	「アイコン」：[{
		"src"： "assets / icon / icon-128x128.png"、
		「サイズ」：「128x128」、
		"タイプ"： "image / png"
	}、{
		"src"： "assets / icon / icon-152x152.png"、
		"サイズ"： "152x152"、
		"タイプ"： "image / png"
	}、{
		"src"： "assets / icon / icon-192x192.png"、
		"サイズ"： "192x192"、
		"タイプ"： "image / png"
	}、{
		"src"： "assets / icon / icon-384x384.png"、
		"サイズ"： "384x384"、
		"タイプ"： "image / png"
	}、{
		"src"： "assets / icon / icon-512x512.png"、
		「サイズ」：「512x512」、
		"タイプ"： "image / png"
	}]、
	"background_color"： "＃EDF2F4"、
	「ディスプレイ」：「スタンドアロン」、
	"theme_color"： "＃B20422"、
	"スコープ"： "/"、
	「ショートカット」：[{
			"名前"： "記事"、
			"short_name"： "記事"、
			"説明"： "セキュリティ、システム管理者、デジタルマーケティング、クラウドコンピューティング、開発、およびその他の多くのトピックに関する1595件の記事。"、
			"url"： "/ articles"、
			「アイコン」：[{
				"src"： "/assets/icon/icon-152x152.png"、
				「サイズ」：「152x152」
			}]
		}、
		{{
			"名前"： "作者"、
			"short_name"： "作成者"、
			「説明」：「Geekflare-作者」、
			"url"： "/ authors"、
			「アイコン」：[{
				"src"： "/assets/icon/icon-152x152.png"、
				「サイズ」：「152x152」
			}]
		}、
		{{
			"名前"： "ツール"、
			"short_name"： "ツール"、
			「説明」：「Geekflare-ツール」、
			"url"： "/ tools"、
			「アイコン」：[{
				"src"： "/assets/icon/icon-152x152.png"、
				「サイズ」：「152x152」
			}]
		}、
		{{
			"名前"： "取引"、
			"short_name"： "取引"、
			「説明」：「Geekflare-お得な情報」、
			"url"： "/ Deals"、
			「アイコン」：[{
				"src"： "/assets/icon/icon-152x152.png"、
				「サイズ」：「152x152」
			}]
		}
	]
}

サービスワーカーを登録する

ルートフォルダにスクリプトファイルregister-service-worker.jsとservice-worker.jsを作成します。

最初のregister-service-worker.jsは、DOMAPIにアクセスできるメインスレッドで実行されるjavascriptファイルです。ただし、service-worker.jsは、メインスレッドから独立して実行されるサービスワーカースクリプトであり、その存続期間も短いです。イベントがサービスワーカーを呼び出すたびに実行され、プロセスが終了するまで実行されます。

メインスレッドのjavascriptファイルを確認することで、ServiceWorkerが登録されているかどうかを確認できます。そうでない場合は、サービスワーカースクリプト（service-worker.js）を登録できます。

以下のスニペットをregister-service-worker.jsに貼り付けます。

 if（'serviceWorker' in navigator）{
    window.addEventListener（'load'、function（）{
        navigator.serviceWorker.register（'/service-worker.js'）;
    }）;
}

以下のスニペットをservice-worker.jsに貼り付けます

self.addEventListener（'install'、（event）=>{//サービスワーカーがインストールするときのイベント
    console.log（'インストール'、イベント）;
    self.skipWaiting（）;
}）;

self.addEventListener（'activate'、（event）=>{//サービスワーカーがアクティブ化されたときのイベント
    console.log（'activate'、event）;
    self.clients.claim（）;を返します。
}）;

self.addEventListener（'fetch'、function（event）{//HTTPリクエストインターセプター
    event.respondWith（fetch（event.request））; //キャッシュロジックなしですべてのhttpリクエストを送信します
    /*event.respondWith(
        caches.match（event.request）.then（function（response）{
            応答を返す|| fetch（event .request）;
        }）
    ）; *///新しいリクエストをキャッシュします。 すでにキャッシュにある場合は、キャッシュを使用します。
}）;

オフラインサポートのためにキャッシュを有効にする方法に集中しませんでした。 WebアプリをPWAに変換する方法についてのみ説明します。

HTMLページのallheadタグにマニフェストファイルとスクリプトを追加します。

 <link rel = "manifest" href = "/manifest.json">
<script src = "/ register-service-worker.js"> </ script>

追加した後、ページを更新します。これで、モバイルChromeに以下のようにアプリケーションをインストールできます。

ホーム画面で、アプリが追加されます。

WordPressを使用している場合。既存のPWAコンバータプラグインを使用してみてください。 vueJSまたはreactJSの場合、上記の方法に従うか、既存のPWAnpmモジュールを使用して開発を高速化できます。 PWA npmモジュールは、オフラインサポートキャッシングなどですでに有効になっているためです。

プッシュ通知を有効にする

Webプッシュ通知はブラウザーに送信され、ユーザーがアプリケーションをより頻繁に使用/操作できるようにします。を使用して有効にできます

通知API：プッシュ通知をユーザーに表示する方法を構成するために使用されます。
プッシュAPI：サーバーからブラウザに送信される通知メッセージを受信するために使用されます。

アプリケーションでプッシュ通知を有効にする最初のステップは、Notification APIを確認し、通知を表示するための許可をユーザーから取得することです。そのために、以下のスニペットをコピーして、register-service-worker.jsに貼り付けてください。

 if（'Notification' in window && Notification.permission！='granted'）{
    console.log（'ユーザーの許可を求める'）
    Notification.requestPermission（status => {  
        console.log（'ステータス：' +ステータス）
        displayNotification（'Notification Enabled'）;
    }）;
}


const displayNotification = NotificationTitle => {
    console.log（'通知の表示'）
    if（Notification.permission =='許可'）{
        navigator.serviceWorker.getRegistration（）。then（reg => {
            console.log（reg）
            const options = {
                    本文：'プッシュ通知を許可していただきありがとうございます！'、
                    アイコン：'/assets/icons/icon-512x512.png'、
                    振動：[100、50、100]、
                    データ： {
                      dateOfArrival：Date.now（）、
                      primaryKey：0
                    }
                  };
    
            reg.showNotification（notificationTitle、options）;
        }）;
    }
};

すべてがうまくいった場合。アプリケーションから通知が届きます。

pwa-notification-api-displaying-notification

ウィンドウの「通知」は、通知APIがそのブラウザでサポートされていることを示します。 Notification.permissionは、ユーザーが通知を表示することを許可されたことを通知します。ユーザーがアプリケーションを許可した場合、値は「付与」されます。ユーザーが拒否した場合、値は「ブロック」されます。

FirebaseCloudMessagingを有効にしてサブスクリプションを作成する

今、本当の部分が始まります。サーバーからユーザーに通知をプッシュするには、ユーザーごとに一意のエンドポイント/サブスクリプションが必要です。そのために、Firebaseクラウドメッセージングを使用します。

最初のステップとして、このリンクhttps://firebase.google.com/にアクセスしてFirebaseアカウントを作成し、[開始]を押します。

名前を付けて新しいプロジェクトを作成し、続行を押します。 Geekflareという名前で作成します。
次のステップでは、GoogleAnalyticsがデフォルトで有効になっています。今は必要ないことを切り替えて、続行を押すことができます。必要に応じて、後でFirebaseコンソールで有効にすることができます。
プロジェクトが作成されると、次のようになります。

次に、プロジェクト設定に移動し、クラウドメッセージングをクリックしてキーを生成します。

上記の手順から、3つのキーが得られます。

プロジェクトサーバーキー
Webプッシュ証明書の秘密鍵
Webプッシュ証明書の公開鍵

次に、以下のスニペットをregister-service-worker.jsに貼り付けます。

 constupdateSubscriptionOnYourServer=サブスクリプション=>{
    console.log（'ここにajaxコードを記述して、ユーザーサブスクリプションをDBに保存します'、subscription）;
    // fetch、jquery、axiosを使用して独自のajaxリクエストメソッドを記述し、後で使用できるようにサブスクリプションをサーバーに保存します。
};

const subscribeUser = async（）=> {
    const swRegistration = await navigator.serviceWorker.getRegistration（）;
    const applicationServerPublicKey ='BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; //Webpush証明書の公開鍵を貼り付けます
    const applicationServerKey = urlB64ToUint8Array（applicationServerPublicKey）;
    swRegistration.pushManager.subscribe（{
      userVisibleOnly：true、
      applicationServerKey
    }）
    .then（（サブスクリプション）=> {
        console.log（'ユーザーは新しくサブスクライブされました：'、サブスクリプション）;
        updateSubscriptionOnServer（subscription）;
    }）
    .catch（（err）=> {
        if（Notification.permission ==='denied'）{
          console.warn（'通知の許可が拒否されました'）
        } そうしないと {
          console.error（'ユーザーのサブスクライブに失敗しました：'、err）
        }
    }）;
};
const urlB64ToUint8Array =（base64String）=> {
    const padding ='=' .repeat（（4-base64String.length％4）％4）
    const base64 =（base64String +パディング）
        .replace（/ \-/ g、'+'）
        .replace（/ _ / g、'/'）

    const rawData = window.atob（base64）;
    const outputArray = new Uint8Array（rawData.length）;

    for（let i = 0; i <rawData.length; ++ i）{
        outputArray [i] = rawData.charCodeAt（i）;
    }
    outputArrayを返します。
};

const checkSubscription = async（）=> {
    const swRegistration = await navigator.serviceWorker.getRegistration（）;
    swRegistration.pushManager.getSubscription（）
    .then（サブスクリプション=> {
        if（!!サブスクリプション）{
            console.log（'ユーザーはすでにサブスクライブされています。'）;
            updateSubscriptionOnYourServer（subscription）;
        } そうしないと {
            console.log（'ユーザーはサブスクライブされていません。ユーザーを新しくサブスクライブします'）;
            subscribeUser（）;
        }
    }）;
};

checkSubscription（）;

以下のスニペットをservice-worker.jsに貼り付けます。

 self.addEventListener（'push'、（event）=> {
  const json = JSON.parse（event.data.text（））
  console.log（'データのプッシュ'、event.data.text（））
  self.registration.showNotification（json.header、json.options）
}）;

これですべてがフロントエンドに設定されました。サブスクリプションを使用することにより、ユーザーがプッシュサービスを拒否されなくなるまで、いつでもユーザーにプッシュ通知を送信できます。

node.jsバックエンドからプッシュ

web-pushnpmモジュールを使用して簡単にすることができます。

nodeJSサーバーからプッシュ通知を送信するためのスニペットの例。

 const webPush = require（'web-push'）;
    // pushSubscriptionは、フロントエンドからDBに保存するために送信したサブスクリプションに他なりません。
    const pushSubscription = {"endpoint"："https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys": ："BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    //Web証明書の公開鍵
    const vapidPublicKey ='BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //Web証明書の秘密鍵
    const vapidPrivateKey='Web証明書の秘密鍵';

    varペイロード=JSON.stringify（{
      "オプション"：{
        "body"： "バックエンドからのPWAプッシュ通知テスト"、
        "バッジ"： "/assets/icon/icon-152x152.png"、
        "アイコン"： "/assets/icon/icon-152x152.png"、
        「振動」：[100、50、100]、
        "データ"： {
          "id"： "458"、
        }、
        "行動"： [{
          「アクション」：「表示」、
          "タイトル"："表示"
        }、{
          「アクション」：「閉じる」、
          「タイトル」：「閉じる」
        }]
      }、
      「ヘッダー」：「Geekflareからの通知-PWAデモ」
    }）;

    var options = {
      vapidDetails：{
        件名：'mailto：[メール保護]'、
        publicKey：vapidPublicKey、
        privateKey：vapidPrivateKey
      }、
      TTL：60
    };

    webPush.sendNotification（
      pushSubscription、
      ペイロード、
      オプション
    ）.then（data => {
      res.json（{status：true、message：'通知が送信されました'}）;を返します。
    }）。catch（err => {
      res.json（{status：false、message：err}）;を返します。
    }）;

上記のコードは、サブスクリプションにプッシュ通知を送信します。サービスワーカーのプッシュイベントがトリガーされます。

PHPバックエンドからのプッシュ

PHPバックエンドの場合、web-push-phpコンポーザーパッケージを使用できます。以下のプッシュ通知を送信するには、サンプルコードを確認してください。

 <？php if（！defined（'BASEPATH'））exit（'直接スクリプトアクセスは許可されていません'）;

require__DIR__。'/../vendor/autoload.php';
Minishlink \ WebPush\WebPushを使用します。
Minishlink \ WebPush\Subscriptionを使用します。

//DBに保存されているサブスクリプション
$ subsrciptionJson ='{"endpoint"： "https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg"、 " "：" BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y "}}';
$payloadData =配列（
'オプション'=>配列（
                'body' =>'バックエンドからのPWAプッシュ通知テスト'、
                'バッジ'=>'/assets/icon/icon-152x152.png'、
                'icon' =>'/assets/icon/icon-152x152.png'、
                '振動'=> 
                配列 （
                  0 => 100、
                  1 => 50、
                  2 => 100、
                ）、
                'データ'=> 
                配列 （
                  'id' => '458'、
                ）、
                'アクション'=> 
                配列 （
                  0 => 
                  配列 （
                    'アクション'=>'ビュー'、
                    'タイトル'=>'表示'、
                  ）、
                  1 => 
                  配列 （
                    'アクション'=>'閉じる'、
                    'タイトル'=>'閉じる'、
                  ）、
                ）、
）、
'header' =>'Geekflareからの通知-PWAデモ'、
）;

//認証
$ auth = [
    'GCM' =>'プロジェクトの秘密鍵'、//非推奨でオプション、互換性の理由でのみここにあります
    'VAPID' => [
        'subject' =>'mailto：[email protected]'、// mailto：またはあなたのウェブサイトアドレスにすることができます
        'publicKey' =>'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'、//（推奨）非圧縮公開鍵P-256をBase64-URLでエンコード
        'privateKey' =>'Web証明書の秘密鍵'、//（推奨）実際には、Base64-URLでエンコードされた秘密鍵の秘密乗数
    ]、
];

$ webPush = new WebPush（$ auth）;

$ subsrciptionData = json_decode（$ subsrciptionJson、true）;


// webpush 6.0
$ webPush-> sendOneNotification（
  Subscription :: create（$ subsrciptionData）、
  json_encode（$payloadData）//オプション（デフォルトはnull）
）;

結論

これにより、WebアプリケーションをPWAに変換する方法についてのアイデアが得られることを願っています。この記事のソースコードはここで確認でき、デモはここで行えます。サンプルコードを使用してバックエンドからプッシュ通知を送信することにより、プッシュ通知をテストしました。