使用網絡通知API顯示動態消息

Web Notifications API：讓網站通知跳出瀏覽器限制

我們已經習慣了來自喜愛的網站或應用程序的手機通知，但現在瀏覽器直接推送通知也變得越來越普遍。例如，Facebook會在你有新的好友請求或有人評論你參與的帖子時發送通知；Slack會在你被提及的對話中發送通知。

作為前端開發者，我很好奇如何利用瀏覽器通知來為那些不處理大量信息流的網站提供服務。如何根據訪客對網站的興趣添加相關的瀏覽器通知？

本文將演示如何在Concise CSS網站上實現一個通知系統，以便在每次發布框架新版本時提醒訪客。我將展示如何結合使用localStorage和瀏覽器Notification API來實現這一目標。

Notification API基礎

首先，我們需要確定訪客的瀏覽器是否支持通知。本教程的大部分工作將由Notification對象完成。

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();</code>

目前我們只確定了瀏覽器是否支持通知。確定之後，我們需要知道是否可以向訪客顯示權限請求。

我們將permission屬性的輸出存儲在一個變量中。如果權限已授予或拒絕，則不返回任何內容。如果我們之前沒有請求過權限，則使用requestPermission方法請求權限。

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();</code>

您應該會在瀏覽器中看到類似上圖的提示。

現在我們已經請求了權限，讓我們修改代碼，以便在允許權限的情況下顯示通知：

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();</code>

雖然簡單，但功能有效。

我們在這裡使用requestPermission()方法的基於Promise的語法，在權限授予後顯示通知。我們使用Notification構造函數顯示通知。此構造函數接受兩個參數，一個用於通知標題，另一個用於選項。請參閱文檔鏈接以查找可以傳遞的完整選項列表。

存儲框架版本

前面提到，我們將使用localStorage來幫助顯示通知。使用localStorage是存儲JavaScript中持久客戶端信息的推薦方法。我們將創建一個名為conciseVersion的localStorage鍵，其中包含框架的當前版本（例如1.0.0）。然後，我們可以使用此鍵來檢查框架的新版本。

如何使用最新版本的框架更新conciseVersion鍵的值？我們需要一種方法在有人訪問網站時設置當前版本。我們還需要在發布新版本時更新該值。每次conciseVersion值更改時，都需要向訪客顯示通知，以宣布框架的新版本。

我們將通過向頁面添加一個隱藏元素來解決此問題。此元素將具有名為js-currentVersion的類，並且只包含框架的當前版本。由於此元素存在於DOM中，因此我們可以使用JavaScript輕鬆地與之交互。

此隱藏元素將用於在我們的conciseVersion鍵中存儲框架版本。我們還將使用此元素在發布框架的新版本時更新該鍵。

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();</code>

我們可以使用少量CSS來隱藏此元素：

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();</code>

注意：由於此元素不包含任何有意義的內容，因此屏幕閱讀器無需訪問此元素。這就是為什麼我將aria-hidden屬性設置為true，並使用display: none作為隱藏元素的方法。有關隱藏內容的更多信息，請參閱此WebAIM文章。

現在我們可以獲取此元素並在JavaScript中與之交互。我們需要編寫一個函數來返回我們剛剛創建的隱藏元素內的文本。

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();</code>

此函數使用textContent屬性存儲.js-currentVersion元素的內容。讓我們再添加一個變量來存儲conciseVersion localStorage鍵的內容。

<code class="language-html"><span class="js-currentVersion" aria-hidden="true">3.4.0</span></code>

現在，我們在一個變量中擁有框架的最新版本，並且我們將localStorage鍵存儲到一個變量中。是時候添加確定是否有新版本的框架可用的邏輯了。

我們首先檢查conciseVersion鍵是否存在。如果不存在，我們將向用戶顯示通知，因為這可能是他們第一次訪問。如果鍵存在，我們檢查其值（存儲在currentVersion變量中）是否大於當前版本的值（存儲在latestVersion變量中）。如果框架的最新版本大於訪客上次看到的版本，我們就知道已發布新版本。

注意：我們使用semver-compare庫來處理比較兩個版本字符串。

知道了這一點，我們將向訪客顯示通知並適當地更新我們的conciseVersion鍵。

<code class="language-css">[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}</code>

要使用此函數，我們需要修改下面的權限代碼。

<code class="language-javascript">function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}</code>

這允許我們在用戶之前已授予權限或剛剛授予權限時顯示通知。

顯示通知

到目前為止，我們只向用戶顯示了不包含太多信息的簡單通知。讓我們編寫一個函數，允許我們動態創建瀏覽器通知，並控制通知的許多不同方面。

此函數具有正文文本、圖標、標題以及可選鏈接和通知持續時間的參數。在內部，我們創建一個選項對象來存儲我們的通知正文文本和圖標。我們還創建Notification對象的新的實例，傳入我們的通知標題以及選項對象。

接下來，如果我們想鏈接到我們的通知，我們將添加一個onclick處理程序。我們使用setTimeout()在指定的時間後關閉通知。如果調用此函數時未指定時間，則使用默認的五秒鐘。

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();</code>

現在，讓我們修改checkVersion()以向用戶顯示更多信息的通知。

<code class="language-javascript">(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();</code>

我們使用displayNotification函數為我們的通知提供描述、圖像、標題和鏈接。

注意：我們使用ES6模板字面量將表達式嵌入到我們的文本中。

完整代碼和測試

以下是本教程中編寫的完整代碼。

（此處應插入CodePen鏈接或完整代碼塊）

運行此代碼應該會在您的瀏覽器中生成以下通知。

為了進行測試，您需要熟悉瀏覽器的通知權限。以下是管理Google Chrome、Safari、FireFox和Microsoft Edge中通知的一些快速參考。此外，您應該熟悉使用開發者控制台來刪除和修改localStorage值以方便測試。

您可以通過運行腳本一次並將js-currentVersion HTML元素的值更改為腳本可以看到差異來測試示例。您還可以使用相同的版本重新運行，以確認您不會收到不必要的通知。

更進一步

這就是我們擁有動態瀏覽器通知所需的一切！如果您正在尋找更靈活的瀏覽器通知，建議您了解Service Worker API。 Service Worker可用於響應推送通知，允許用戶收到通知，無論他們當前是否正在訪問您的網站，從而實現更及時的更新。

瀏覽器通知API常見問題解答

什麼是瀏覽器通知API以及它是如何工作的？

瀏覽器通知API允許Web應用程序向用戶顯示系統通知。這些通知類似於移動設備上的推送通知，即使網頁未處於焦點狀態也可以顯示。 API的工作原理是請求用戶的權限以顯示通知。一旦獲得權限，Web應用程序就可以使用Notification對象創建和顯示通知。

如何請求顯示通知的權限？

要請求權限，可以使用Notification.requestPermission()方法。此方法將向用戶顯示一個對話框，詢問他們是否允許顯示通知。該方法返回一個Promise，該Promise解析為權限狀態，可以是“granted”、“denied”或“default”。

如何創建和顯示通知？

一旦獲得權限，就可以使用Notification構造函數創建和顯示通知。此構造函數接受兩個參數：通知的標題和一個選項對象。選項對象可以包含body（通知的文本）、icon（要顯示的圖標）和tag（通知的標識符）等屬性。

即使網頁未處於焦點狀態，我也可以顯示通知嗎？

是的，瀏覽器通知API允許您即使網頁未處於焦點狀態也可以顯示通知。這對於需要通知用戶重要事件的Web應用程序非常有用，即使他們沒有積極使用該應用程序也是如此。

如何處理通知上的點擊事件？

您可以通過向通知對象添加事件偵聽器來處理通知上的點擊事件。當用戶點擊通知時，將調用事件偵聽器函數。

我可以以編程方式關閉通知嗎？

是的，您可以通過調用通知對像上的close()方法以編程方式關閉通知。如果您想在一段時間後自動關閉通知，這將非常有用。

所有瀏覽器都支持瀏覽器通知嗎？

大多數現代瀏覽器都支持瀏覽器通知，包括Chrome、Firefox、Safari和Edge。但是，這些瀏覽器的不同版本之間的支持可能會有所不同，一些較舊的瀏覽器可能根本不支持通知。

我可以自定義通知的外觀嗎？

通知的外觀很大程度上取決於操作系統和瀏覽器。但是，您可以使用傳遞給Notification構造函數的選項對象來自定義通知的某些方面，例如標題、正文文本和圖標。

如何檢查用戶是否已授予顯示通知的權限？

您可以通過訪問Notification.permission屬性來檢查當前的權限狀態。如果用戶已授予權限，此屬性將為“granted”；如果他們已拒絕權限，則為“denied”；如果他們尚未響應權限請求，則為“default”。

我可以在工作程序腳本中使用瀏覽器通知API嗎？

是的，可以在工作程序腳本中使用瀏覽器通知API。這允許您從後台任務顯示通知，即使主網頁未處於焦點狀態也是如此。

以上是使用網絡通知API顯示動態消息的詳細內容。更多資訊請關注PHP中文網其他相關文章！