web-dev-qa-db-ja.com

Webプッシュ通知：Webプッシュの使用方法PHP Library？

Web通知をWebサイトに追加したい。 Googleで検索し、それに関するいくつかのチュートリアルを見つけました。これらのチュートリアルで説明したように、訪問者にサブスクリプションボックスを表示することを管理し、そのデータを保存することもできます。

Main.js

'use strict';

const applicationServerPublicKey = 'BBw_opB12mBhg66Dc94m7pOlTTHb5oqFAafbhN-BNeazWk8woAcSeHdgbmQaroCYssUkqFfoHqEJyCKw';

const pushButton = document.querySelector('.js-Push-btn');

let isSubscribed = false;
let swRegistration = null;

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .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);
  }
  return outputArray;
}



if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push is supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}


function initialiseUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

sw.js

'use strict';

self.addEventListener('Push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Motoroids Lab';
  const options = { 
    body: 'Motoroids',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});


self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click Received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );
});

しかし、今私は立ち往生しています。どれだけ試してみても、サーバーからプッシュメッセージを送信する方法を理解するのは難しいです:(

サーバーでSSLを有効にしました。 composer require minishlink/web-Pushコマンドを使用して、PHP Web Pushライブラリとサーバーへの依存関係をインストールしました。

しかし、次は何ですか？彼らのドキュメントも理解できません。 https://github.com/web-Push-libs/web-Push-php

ここで助けが必要です。それがどのように機能し、どのように機能するかを理解するのを助けてください。

ありがとうございました

phpbrowserpush-notificationweb-push
11
Rocky Sena

Webプッシュの一般的な紹介については、 https://web-Push-book.gauntface.com/ をご覧ください。 プッシュの仕組み および ユーザーのサブスクライブ の章は特に興味深いはずです。要約すれば：

  • クライアント側では、pushManager.subscribeを呼び出してサブスクリプションを作成する必要があります。詳細 こちら 。
  • このサブスクリプションをサーバーに送信する必要があります。たとえば、サーバーにサブスクリプション（エンドポイント、keys.p256dh、keys.auth）を送信するAJAXリクエストを作成します。詳細情報 here 。
  • サーバー上でPHP Web Pushライブラリを使用してプッシュメッセージを送信します。まず、このライブラリをキーペアで構成する必要があります。次に、サブスクリプション（エンドポイント、keys.p256dh 、keys.auth）プッシュメッセージを送信します。詳細情報 ここ 。
13
Martijn