如何向 PWA 添加通知

您是否想过如何将那些烦人（但有用）的通知添加到您的渐进式 Web 应用程序中？

那么在本教程中，我将向您展示如何操作！

我们正在建造什么？

现场演示

https://pwa-notification-td.firebaseapp.com/

开始之前

我们将使用通知 API

通知 API：通知 API 的通知接口用于配置和向用户显示桌面通知。这些通知的外观和具体功能因平台而异，但通常都提供了一种异步向用户提供信息的方式。

*注意：*通知 API 与推送 API 不同。

是时候动手了

1）克隆此 repo：
https://github.com/devpato/pwa-notifications

2) 您将看到 3 个文件夹。其中最重要的是 START 文件夹和 FINAL 文件夹。在 FINAL 文件夹中，您可以看到最终的代码，但出于本教程的目的以及您的学习目的，我们只需关注 START 文件夹即可。

3）导航到脚本文件夹内的 main.js 文件

4）添加以下代码：

const notificationButton = document.getElementById('enableNotifications');
let swRegistration = null;

notificationButton是在我们的应用中触发通知的按钮。如果您访问 index.html，您将看到我已经为您创建的按钮。

swRegistration只是一个存储我们的服务工作者的全局变量。

注意： sw.js 文件位于根文件夹中。Service Worker 就位于根目录中。

5）现在让我们创建一个名为initializeApp的函数。此函数将处理应用程序首次加载时需要触发的所有内容。

//First, we check if having service workers and notifications are //supported.
function initializeApp() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    console.log('Service Worker and Push is supported');

    //Register the service worker
    navigator.serviceWorker
      .register('../../sw.js')
      .then(swReg => {
        console.log('Service Worker is registered', swReg);
        // We are storing the service worker, globally
        swRegistration = swReg;
      })
      .catch(error => {
        console.error('Service Worker Error', error);
      });
  } else {
    console.warn('Push messaging is not supported');
    notificationButton.textContent = 'Push Not Supported';
  }
}

要了解有关 PushManger 的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/API/PushManager

6) 应用首次加载时，我们需要调用initializeApp()函数。为此，请在函数声明之前添加调用。

7) 现在我们需要创建一个名为initializeUi的新函数。该函数如下所示：

function initializeUi() {
  notificationButton.addEventListener('click', () => {
    //Do something here
  });
}

此函数的唯一目的是将点击事件附加到notificationButton。因此，当用户点击按钮时，就会发生一些事情。

8) 现在在 initializeApp() (我们之前创建的函数) 内部，我们在swRegistration = swReg;表达式之后立即调用initializeUi(); ：

function initializeApp() {
 ...
    navigator.serviceWorker
      .register('../../sw.js')
      .then(swReg => {
        ....
        // We are storing the service worker, globally
        swRegistration = swReg; 
        initializeUi();
      })
 ...
}

通过这样做，一旦服务工作者注册成功，我们将初始化 UI。

9）现在该创建一个名为displayNotification的新函数了。该函数如下所示：

function displayNotification() {
  //Ask user if we show notifications
  if (window.Notification && Notification.permission === 'granted') {
    //notification();
    // We will create this function in a further step.
  }
  // If the user hasn't told whether he wants to be notified or not
  // Note: because of Chrome, we cannot be sure the permission property
  // is set, therefore it's unsafe to check for the "default" value.
  else if (window.Notification && Notification.permission !== 'denied') {
    Notification.requestPermission(status => {
      if (status === 'granted') {
        //notification();
      } else {
        alert('You denied or dismissed permissions to notifications.');
      }
    });
  } else {
    // If the user refuses to get notified
    alert(
      'You denied permissions to notifications. Please go to your browser or phone setting to allow notifications.'
    );
  }
}

10) 回到点击回调中的 initializeUi() 方法，找到“Do something here”这个提示。将这一行替换为：

  displayNotification();

您的代码将如下所示：

function initializeUi() {
  notificationButton.addEventListener('click', () => {
    displayNotification();
  });
}

11）最后，我们将创建一个通知功能，其中将包含我们想要在通知中显示的信息。

function notification() {
  const options = {
    body: 'Testing Our Notification',
    icon: './bell.png'
  };
  swRegistration.showNotification('PWA Notification!', options);
}

12) 在displayNotification()函数内部，你会看到我们正在调用notification()，但它被注释掉了。只需取消注释即可触发代码。

13）最终代码如下：
https://github.com/devpato/pwa-notifications/blob/master/final/scripts/main.js

14) 在浏览器中测试通知。如果您想在真实设备上测试，则需要部署它并确保已部署的应用使用https进行服务。您可以使用Firebase 托管来实现这一点。

使用 Firebase 进行 Web 部署

你可能已经注意到，我们注册了一个 Service Worker，但因为没有必要，所以没有添加任何代码。在下一个教程中，我们将使用 Service Worker 进行更多操作。在该教程中，我将向你展示如何使用Firebase Cloud Messaging从服务器发送推送通知。所以，稍等片刻，我们将探索更多关于 Service Worker 的功能 ;)

使用 Firebase（云消息传递）的 PWA 推送通知-pt1

文章来源：https://dev.to/thisdotmedia/how-to-add-notifications-to-your-pwa-2mmg