Question

我一直在尝试在Web应用程序上推送通知。我一直在关注google's codelabs并获得帮助，直到达到“处理推杆事件”部分为止，我一直都很成功。我完全按照他们所说的做，我可能在哪里出错？我对此很陌生，所以请帮助并感谢所有愿意回答的人

我的主要脚本代码如下

    'use strict';

const applicationServerPublicKey = 'BEEbOQcOmPNlAHvkHCdVGPehs3y45L-30_71yyrRbxNRp7Q3bCEGWoCnq5dxeiB2nwGWfTc5BOrbEWsU2FGXgtk';

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 initializeUI() {
    pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // 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 (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked.';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }


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

  pushButton.disabled = false;
}

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(err) {
    console.log('Failed to subscribe the user: ', err);
    updateBtn();
  });
}

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

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

  swRegistration = swReg;
  initializeUI();
})

我的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 = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

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

我在控制台中收到以下错误消息：

由于附加了DevTools，因此取消了由超时计时器终止的Service Worker。

Answer 1

    'use strict';

const applicationServerPublicKey = 'BKqJnZ7e-r7DMOqpx2mm-BCWDCm1Urvt2KnwwmFe7v5QEfMMl139SlNGi6T6FSUmcNVJhXEI6_uLiauw1AFuMJc';
//BKqJnZ7e+r7DMOqpx2mm+BCWDCm1Urvt2KnwwmFe7v5QEfMMl139SlNGi6T6FSUmcNVJhXEI6/uLiauw1AFuMJc=
const pushButton = document.querySelector('.js-push-btn');

let isSubscribed = false;
let swRegistration = null;

function urlB64ToUint8Array(base64String) 
{
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  //console.log(padding + base64String.length);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');
  const rawData = window.atob(base64);
  //console.log(base64);
  //console.log(rawData);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) 
  {
    outputArray[i] = rawData.charCodeAt(i);
  }
  console.log(outputArray);
  return outputArray;
}

//1
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(swReg);
      console.log('Service Worker is registered', swReg);

      swRegistration = swReg;

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

//2
function updateBtn() 
{
  if (Notification.permission === 'denied') 
  {
    pushButton.textContent = 'Push Messaging Blocked.';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }
  if (isSubscribed) 
  {
    pushButton.textContent = 'Disable Push Messaging';
  } 
  else 
  {
    pushButton.textContent = 'Enable Push Messaging';
  }
  pushButton.disabled = false;
}

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

//3
function initializeUI() 
{
  pushButton.addEventListener
  (
    'click', function() 
    {
      pushButton.disabled = true;
      if (isSubscribed) 
      {
        unsubscribeUser();
      } 
      else 
      {
        subscribeUser();
      }
    }
  );
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription().then
  (
    function(subscription) 
    {
      isSubscribed = !(subscription === null);
      updateSubscriptionOnServer(subscription);
      if (isSubscribed) 
      {
        console.log('User IS subscribed.');
      } 
      else 
      {
        console.log('User is NOT subscribed.');
      }
      updateBtn();
    }
  );
}

//4
function subscribeUser() 
{
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe
  (
    {
      userVisibleOnly: true,
      applicationServerKey: applicationServerKey
    }
  )
  .then
  (
    function(subscription) 
    {
      console.log('User is subscribed.');

      updateSubscriptionOnServer(subscription);

      isSubscribed = true;

      updateBtn();
    }
  )
  .catch
  (
    function(err) 
    {
      console.log('Failed to subscribe the user: ', err);
      updateBtn();
    }
  );
}

//5
function updateSubscriptionOnServer(subscription) 
{
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails = document.querySelector('.js-subscription-details');
  if (subscription) 
  {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } 
  else 
  {
    subscriptionDetails.classList.add('is-invisible');
  }
}

//6
function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

Web App推送通知，无法在浏览器上推送通知

1 个答案: