如何將推送通知集成到您的 PWA 中

在我們今天的教程中，我們將使用 Firebase 將推送通知集成到 PWA 中，或者更具體地說，使用其中的雲消息傳遞功能，該功能支持使用 HTTPS 請求發送消息。

漸進式 Web 應用程序和推送通知

由於 Progressive Web App 是一個不斷變化的運動，因此看到該技術本身已經與它的本地應用程序對等（功能方面）就不足為奇了。

 推薦閱讀：PWA vs Native：哪個更適合你？

通知觸發器使開發人員能夠安排通知，即使用戶的設備處於飛行模式。

Jon Krafcik，2019 年 Chrome 開發者峰會

有了所有這些根本性的變化，如果不利用它為 PWA 帶來更多收入，那將是一種浪費。 它甚至不是太複雜的東西，因為您可以使用本教程輕鬆設置自己的推送通知功能。

 推薦閱讀：電子商務漸進式 Web 應用程序 (PWA) 的 9 個必備功能

如何將推送通知集成到您的 PWA 中

在我們今天的教程中，我們將使用Firebase將推送通知集成到 PWA 中，特別是其中的雲消息傳遞功能，它可以使用 HTTPS 請求發送消息。

先決條件

• 一個 Firebase 帳戶（因為您將在 Firebase 中創建一個項目）
• 漸進式 Web 應用程序。 為了簡化演示，我們將使用 create-react-app，它是可以使用命令創建的基本 PWA

第 1 步：創建基本 PWA

由於我們將使用 create-react-app 創建一個基本的 PWA，讓我們先下載 NodeJS。 安裝完 NodeJS 後，打開NodeJS 命令提示符並運行以下命令。

在您指定的目錄中創建一個簡單的 React 應用程序：

 npx create-react-app your-pwa-directory

將當前工作目錄更改為您新創建的 React 應用程序：

 cd 你的 pwa 目錄

將 Firebase JavaScript 庫添加到項目中：

 npm install firebase --save 

第 2 步：創建您的push-notification.js

下一步是創建負責所有通知處理的模塊。 在<your-pwa-directory>\src中，創建一個名為push-notification.js的文件。

首先，讓我們創建一個初始化 Firebase 並傳遞項目密鑰的函數。 您可以通過進入 Firebase > 項目概述 → 項目設置並單擊此圖標來找到項目的密鑰：

這會將您定向到另一個包含 PWA 的 Firebase SDK 的頁面：

現在我們有了項目的密鑰，讓我們將以下代碼添加到您的push-notification.js中。

 從'firebase'導入firebase；
導出 const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    數據庫URL：“XXXXXXXXXXXXX”，
    項目ID：“XXXXXXXXXXXX”，
    storageBucket: "XXXXXXXXXXXX",
    messagesSenderId: "XXXXXXXXXXXX",
    appId：“XXXXXXXXXXXX”
  });
}

有了這個，您已經創建了負責所有通知處理的函數，您現在需要導入並調用它。 像這樣編輯你的index.js ：

 從“反應”導入反應；
從 'react-dom' 導入 ReactDOM；
導入'./index.css'；
從'./App'導入應用程序；
從 './serviceWorkerRegistration' 導入 * 作為 serviceWorkerRegistration；
從'./reportWebVitals'導入reportWebVitals；
從'firebase'導入firebase；
從'./push-notification'導入{initializeFirebase}；
ReactDOM.render(<App />, document.getElementById('root'));
初始化Firebase();

第 3 步：創建服務工作者

Service Workers 是 Progressive Web App 背後的技術名稱，它支持其離線功能、推送通知和資源緩存。

SimiCart，所有你需要知道的關於漸進式 Web 應用程序

接收onMessage事件需要服務工作者，因此允許將通知發送到用戶的設備。 默認情況下，Firebase 會自動查找名為firebase-messaging-sw.js的文件。

讓我們將firebase-messaging-sw.js添加到提供文件的目錄中。 由於我們是一個create-react-app項目，這個firebase-messaging-sw.js將進入我們的公共文件夾：

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    數據庫URL：“XXXXXXXXXXXXX”，
    項目ID：“XXXXXXXXXXXX”，
    storageBucket: "XXXXXXXXXXXX",
    messagesSenderId: "XXXXXXXXXXXX",
    appId：“XXXXXXXXXXXX”
});
常量消息 = firebase.messaging();

如果您還沒有聽說過 PWA Service Worker，我們有一篇獨家文章供您了解有關這項驚人技術的所有信息。

第 4 步：請求用戶權限以發送通知

這是隱私的時代，您不想通過發送不需要的和未經授權的通知來惹惱您的用戶！

要請求您的用戶的許可，只需將其添加到您的push-notification.js ：

 從'firebase'導入firebase；
 
導出 const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    數據庫URL：“XXXXXXXXXXXXX”，
    項目ID：“XXXXXXXXXXXX”，
    storageBucket: "XXXXXXXXXXXX",
    messagesSenderId: "XXXXXXXXXXXX",
    appId：“XXXXXXXXXXXX”
  });
}
 
導出 const askForPermissionToReceiveNotifications = async () => {
  嘗試 {
    常量消息 = firebase.messaging();
    等待消息傳遞.requestPermission();
    常量令牌 = 等待消息傳遞.getToken();
    console.log('你的令牌是：', token);
    
    返回令牌；
  } 捕捉（錯誤）{
    控制台.錯誤（錯誤）；
  }
}

因為這個函數需要從某個地方調用，所以我們只需點擊一個按鈕就可以添加它。 編輯/src/目錄中的app.js文件，如下所示：

 從'./logo.svg'導入標誌；
導入'./App.css'；
從'./push-notification'導入{ askForPermissionToReceiveNotifications }；

函數應用程序（）{
  返回 （
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          編輯 <code>src/App.js</code> 並保存以重新加載。
        </p>
        <一個
          className="應用鏈接"
          href="https://reactjs.org"
          目標="_空白"
          rel="noopener noreferrer"
        >
          學習反應
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          點擊接收通知
        </按鈕>
      </標題>
    </div>
  );
}

導出默認應用程序；

現在讓我們開始我們的項目，你應該會看到一個點擊接收通知按鈕，如下所示：

單擊按鈕，您應該會看到一個彈出窗口，請求您的許可：

單擊允許並檢查瀏覽器的控制台。 您應該會看到一條消息，通知您您的令牌：

現在將此令牌保存在其他地方，因為您將在下一步中需要它。

第5 步：使用 Postman 發送推送通知

在接下來的步驟中，我們將使用 Postman 通過 Firebase 的雲消息服務發送通知。

在 Postman 中，使用以下信息創建一個POST請求：

• 請求網址：https://fcm.googleapis.com/fcm/send

• Headers ：在 POST 請求的標頭中，您需要具有以下鍵：

授權： key= SERVER_KEY

內容類型：應用程序/json

注意： SERVER_KEY可以在 Firebase 設置中的Cloud Messaging選項卡下找到

• Body ：使用以下代碼填充 POST 請求的正文：

 {
    “通知”： {
        "title": "SimiCart",
        "body": "測試推送通知",
        "click_action": "http://localhost:3000/",
        “圖標”：“https://i.imgur.com/5zO5cce.png”
    }
    “到”：“USER_TOKEN”
}

將USER_TOKEN替換為您在第 4 步中獲得的令牌（通過單擊Click to receive notifications 按鈕）。不要忘記將 Body type 選擇為raw和JSON 。

現在單擊發送，您應該會在右下角看到一條通知彈出：

注意：這些通知僅在應用程序處於後台或最小化時出現。

恭喜！ 你的 PWA 現在可以發送通知了！

結論

我們希望在本指南之後，您現在可以自信地設置自己的推送通知功能。 作為一項新技術，Progressive Web Apps 對於不精通技術的用戶來說肯定是一件複雜的事情，這就是為什麼有現成的解決方案提供商（例如 SimiCart）可以憑藉我們多年的 PWA 經驗來滿足您的所有需求。