Question

现在我可以发送＆＃34;你好＆＃34;作为通知。现在我想发送一个文本框的值作为notification.below是我正在使用的代码。我需要做些什么改变？

这是我的index.html：

  <html>
  <body>
      <h1>Web Push Notification</h1>
      <button id="push-subscription-button">Push notifications !
      </button><br><br> 
      <input name="message" id="message" value="" 
       placeholder="Message"/><br><br>

     <button id="send-Push-Button">Send Push notifications</button>

     <script type="text/javascript" src="app.js"></script>  
    </body>
    </html>


     Here is send_push_notification.php:

   <?php
    require __DIR__ . '/../vendor/autoload.php';
    use Minishlink\WebPush\WebPush;


    $subscription = json_decode(file_get_contents('php://input'), 
   true);

 $auth = array(
'VAPID' => array(

    'subject' => '',
    'publicKey' => '',
    'privateKey' => ' '
     ),
 );

     $webPush = new WebPush($auth);

    $res = $webPush->sendNotification(
    $subscription['endpoint'],
     "Hello",
    $subscription['key'],
    $subscription['token'],
    true
    );

  app.js:

  document.addEventListener("DOMContentLoaded", () => {
  const applicationServerKey = "`enter code here`";
  let isPushEnabled = false;

   const pushButton = document.querySelector('#push-subscription-
   button');
    if (!pushButton) {
    return;
    }

pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        push_unsubscribe();
    } else {
        push_subscribe();
    }
  });

     if (!('serviceWorker' in navigator)) {
    console.warn("Service workers are not supported by this browser");
    changePushButtonState('incompatible');
    return;
   }

     if (!('PushManager' in window)) {
    console.warn('Push notifications are not supported by this 
    browser');
    changePushButtonState('incompatible');
    return;
    }

    if (!('showNotification' in ServiceWorkerRegistration.prototype)) 
     {
    console.warn('Notifications are not supported by this browser');
    changePushButtonState('incompatible');
    return;
    }


    if (Notification.permission === 'denied') {
    console.warn('Notifications are denied by the user');
    changePushButtonState('incompatible');
    return;
   }

       navigator.serviceWorker.register("serviceWorker.js")
      .then(() => {
      console.log('[SW] Service worker has been registered');
      push_updateSubscription();
     }, e => {
      console.error('[SW] Service worker registration failed', e);
      changePushButtonState('incompatible');
    });

    function changePushButtonState (state) {
    switch (state) {
        case 'enabled':
            pushButton.disabled = false;
            pushButton.textContent = "Disable Push notifications";
            isPushEnabled = true;
            break;
        case 'disabled':
            pushButton.disabled = false;
            pushButton.textContent = "Enable Push notifications";
            isPushEnabled = false;
            break;
        case 'computing':
            pushButton.disabled = true;
            pushButton.textContent = "Loading...";
            break;
        case 'incompatible':
            pushButton.disabled = true;
            pushButton.textContent = "Push notifications are not 
        compatible with this browser";
            break;
        default:
            console.error('Unhandled push button state', state);
            break;
      }
  }

   function urlBase64ToUint8Array(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;
     }

    function push_subscribe() {
    changePushButtonState('computing');

    navigator.serviceWorker.ready
    .then(serviceWorkerRegistration => 
     serviceWorkerRegistration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: 
        urlBase64ToUint8Array(applicationServerKey),
    }))
    .then(subscription => {
         // Subscription was successful
        // create subscription on your server
        return push_sendSubscriptionToServer(subscription, 'POST');
       })
        .then(subscription => subscription && 
        changePushButtonState('enabled')) // update your UI
       .catch(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('Notifications are denied by the user.');
            changePushButtonState('incompatible');
        } else {

            console.error('Impossible to subscribe to push 
             notifications', e);
              changePushButtonState('disabled');
        }
       });
     }

         function push_updateSubscription() {
         navigator.serviceWorker.ready.then(serviceWorkerRegistration 
         => serviceWorkerRegistration.pushManager.getSubscription())
        .then(subscription => {
        changePushButtonState('disabled');

        if (!subscription) {

            return;
        }


        return push_sendSubscriptionToServer(subscription, 'PUT');
    })
    .then(subscription => subscription && 
    changePushButtonState('enabled')) 
    .catch(e => {
        console.error('Error when updating the subscription', e);
    });
   }

    function push_unsubscribe() {
    changePushButtonState('computing');


    navigator.serviceWorker.ready
    .then(serviceWorkerRegistration => 
     serviceWorkerRegistration.pushManager.getSubscription())
    .then(subscription => {

        if (!subscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            changePushButtonState('disabled');
            return;
        }

        // We have a subscription, unsubscribe
        // Remove push subscription from server
        return push_sendSubscriptionToServer(subscription, 'DELETE');
    })
    .then(subscription => subscription.unsubscribe())
    .then(() => changePushButtonState('disabled'))
    .catch(e => {

        console.error('Error when unsubscribing the user', e);
        changePushButtonState('disabled');
    });
   }

function push_sendSubscriptionToServer(subscription, method) {
    const key = subscription.getKey('p256dh');
    const token = subscription.getKey('auth');

    return fetch('push_subscription.php', {
        method,
        body: JSON.stringify({
            endpoint: subscription.endpoint,
            key: key ? btoa(String.fromCharCode.apply(null, new 
            Uint8Array(key))) : null,
            token: token ? btoa(String.fromCharCode.apply(null, new 
            Uint8Array(token))) : null
        }),
       }).then(() => subscription);
      }



        const sendPushButton = document.querySelector('#send-push-
        button');
        if (!sendPushButton) {
         return;
      }

       sendPushButton.addEventListener('click', () =>
    navigator.serviceWorker.ready
    .then(serviceWorkerRegistration => 
     serviceWorkerRegistration.pushManager.getSubscription())
    .then(subscription => {

        if (!subscription) {

     alert('Please enable push notifications');
          return; 
        }

      var msg= document.getElementById("message").value;
     // alert(msg);

       const key = subscription.getKey('p256dh');
       const token = subscription.getKey('auth');

        fetch('send_push_notification.php', {

            method: 'POST',
            body: JSON.stringify({

                endpoint:subscription.endpoint,
                key: key ? btoa(String.fromCharCode.apply(null, new 
                 Uint8Array(subscription.getKey('p256dh')))) : null,
                token: token ? btoa(String.fromCharCode.apply(null, 
                 new Uint8Array(subscription.getKey('auth')))) : null,
            })
        })
      })
      );
    });

我应该在哪里获取文本框值并将其替换为＆＃34; hello＆＃34;在send-push-notification.php？

Answer 1

查看https://sciactive.github.io/pnotify/

真的让代码变得简单。

new PNotify({
  title: 'Regular Notice',
  text: 'Check me out! I\'m a notice.'
});

如何将文本框的值作为Web推送通知发送？

1 个答案: