創建計劃的推送通知

定時推送通知：網頁應用的新功能

“定時”是關鍵——這是一個相當新的功能！當推送通知被定時（例如，“服藥時間到了”或“您將在3小時後登機”）時，即使用戶離線，也能向用戶顯示通知。這改進了過去推送通知需要用戶在線的限制。

那麼，定時推送通知是如何工作的呢？我們將關註四個關鍵部分：

• 註冊服務工作線程
• 添加和刪除定時推送通知
• 使用操作按鈕增強推送通知
• 在服務工作線程中處理推送通知

背景知識

推送通知是告知網站用戶發生重要事件並可能需要再次打開我們的（網絡）應用程序的好方法。借助通知API（結合推送API 和HTTP 網絡推送協議），網絡成為了一種簡單的方法，可以從服務器向應用程序發送推送通知並在設備上顯示它。

您可能已經看到這種事情的演變。例如，您多久會看到某種提示來接受來自網站的通知？雖然瀏覽器廠商已經在努力尋找解決方案以減少這種煩擾（Firefox 和Chrome 都已概述了計劃），但Chrome 80 才剛剛開始對新的通知觸發器API 進行源代碼試用，該API 允許我們創建由不同事件觸發的通知，而不僅僅是服務器推送。但是，目前，基於時間的觸發器是我們擁有的唯一受支持的事件。但是，其他事件，例如基於地理位置的觸發器，已經在計劃中。

在JavaScript 中調度事件非常容易，但是存在一個問題。在我們的推送通知場景中，我們無法確定應用程序在我們想要顯示通知的確切時刻是否正在運行。這意味著我們不能只在應用程序層進行調度。相反，我們需要在服務工作線程級別進行操作。這就是新的API 發揮作用的地方。

通知觸發器API 處於早期反饋階段。您需要在Chrome 中啟用#enable-experimental-web-platform-features 標誌，或者您應該為源代碼試用註冊您的應用程序。

此外，服務工作線程API 需要通過HTTPS 建立安全連接。因此，如果您在您的機器上試用它，您需要確保它通過HTTPS 提供服務。

設定

我創建了一個非常基本的設置。我們有一個application.js 文件、一個index.html 文件和一個service-worker.js 文件，以及一些圖像資源。

 <code>/project-folder ├── index.html ├── application.js ├── service-worker.js └── assets ├─ badge.png └── icon.png</code>

您可以在GitHub 上找到基本通知觸發器API 演示的完整示例。

註冊服務工作線程

首先，我們需要註冊一個服務工作線程。目前，它只記錄註冊成功。

 // service-worker.js
// 監聽安裝事件self.addEventListener('install', event => console.log('ServiceWorker installed'));

 if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

設置推送通知

在我們的應用程序中，我們需要請求用戶的權限以顯示通知。從那裡，我們將獲得我們的服務工作線程註冊並為該範圍註冊一個新的通知。到目前為止，沒有什麼新東西。

很酷的部分是新的showTrigger 屬性。這允許我們定義顯示通知的條件。目前，我們想要添加一個新的TimestampTrigger，它接受一個時間戳。並且由於一切都在設備上直接發生，它也可以離線工作。

 // application.js
document.querySelector('#notification-button').onclick = async () => {
  const reg = await navigator.serviceWorker.getRegistration();
  Notification.requestPermission().then(permission => {
    if (permission !== 'granted') {
      alert('您需要允許推送通知');
    } else {
      const timestamp = new Date().getTime() 5 * 1000; // 現在加上5000 毫秒reg.showNotification(
        '演示推送通知',
        {
          tag: timestamp, // 唯一的ID
          body: '你好，世界', // 推送通知的內容showTrigger: new TimestampTrigger(timestamp), // 設置推送通知的時間data: {
            url: window.location.href, // 將當前url 傳遞給通知},
          badge: './assets/badge.png',
          icon: './assets/icon.png',
        }
      );
    }
  });
};

處理通知

現在，通知應該在指定的時間戳顯示。但是現在我們需要一種與之交互的方法，這就是我們需要服務工作線程notificationclick 和notificationclose 事件的地方。

這兩個事件都監聽相關的交互，並且都可以使用服務工作線程的全部潛力。例如，我們可以打開一個新窗口：

 // service-worker.js
self.addEventListener('notificationclick', event => {
  event.waitUntil(self.clients.openWindow('/'));
});

這是一個非常簡單的例子。但是憑藉服務工作線程的功能，我們可以做更多的事情。讓我們檢查所需的窗口是否已經打開，並且只有在未打開時才打開一個新的窗口。

 // service-worker.js
self.addEventListener('notificationclick', event => {
  event.waitUntil(self.clients.matchAll().then(clients => {
    if (clients.length) { // 檢查是否至少有一個選項卡已經打開clients[0].focus();
    } else {
      self.clients.openWindow('/');
    }
  }));
});

通知操作

促進與用戶的交互的另一種好方法是向通知添加預定義的操作。例如，我們可以讓他們選擇是否要關閉通知或打開應用程序。

 // application.js
reg.showNotification(
  '演示推送通知',
  {
    tag: timestamp, // 唯一的ID
    body: '你好，世界', // 推送通知的內容showTrigger: new TimestampTrigger(timestamp), // 設置推送通知的時間data: {
      url: window.location.href, // 將當前url 傳遞給通知},
    badge: './assets/badge.png',
    icon: './assets/icon.png',
    actions: [
      {
        action: 'open',
        title: '打開應用'
      },
      {
        action: 'close',
        title: '關閉通知',
      }
    ]
  }
);

現在我們在服務工作線程中使用這些通知。

 // service-worker.js
self.addEventListener('notificationclick', event => {
  if (event.action === 'close') {
    event.notification.close();
  } else {
    self.clients.openWindow('/');
  }
});

取消推送通知

也可以取消掛起的通知。在這種情況下，我們需要從服務工作線程獲取所有掛起的通知，然後在它們發送到設備之前關閉它們。

 // application.js
document.querySelector('#notification-cancel').onclick = async () => {
  const reg = await navigator.serviceWorker.getRegistration();
  const notifications = await reg.getNotifications({
    includeTriggered: true
  });
  notifications.forEach(notification => notification.close());
  alert(`${notifications.length} 個通知已取消`);
};

通信

最後一步是使用服務工作線程客戶端上的postMessage 方法來設置應用程序和服務工作線程之間的通信。假設我們想通知已經激活的選項卡推送通知點擊事件發生了。

 // service-worker.js
self.addEventListener('notificationclick', event => {
  event.waitUntil(self.clients.matchAll().then(clients => {
    if (clients.length) { // 檢查是否至少有一個選項卡已經打開clients[0].focus();
      clients[0].postMessage('推送通知已點擊！');
    } else {
      self.clients.openWindow('/');
    }
  }));
});

 // application.js
navigator.serviceWorker.addEventListener('message', event => console.log(event.data));

總結

通知API 是增強Web 應用程序移動體驗的非常強大的功能。由於通知觸發器API 的出現，它剛剛得到了非常重要的改進。 API 仍在開發中，因此現在是嘗試它並向開發人員提供反饋的最佳時機。

如果您正在使用Vue 或React，我建議您查看我自己的漸進式Web 應用演示。它包括使用Vue 和React 的通知觸發器API 的文檔示例，如下所示：（此處省略Vue/React示例，因為原文未提供）

以上是創建計劃的推送通知的詳細內容。更多資訊請關注PHP中文網其他相關文章！