Web Notifications API：讓網(wǎng)站通知跳出瀏覽器限制

我們已經(jīng)習(xí)慣了來(lái)自喜愛(ài)的網(wǎng)站或應(yīng)用程序的手機(jī)通知，但現(xiàn)在瀏覽器直接推送通知也變得越來(lái)越普遍。例如，F(xiàn)acebook會(huì)在你有新的好友請(qǐng)求或有人評(píng)論你參與的帖子時(shí)發(fā)送通知；Slack會(huì)在你被提及的對(duì)話中發(fā)送通知。

作為前端開(kāi)發(fā)者，我很好奇如何利用瀏覽器通知來(lái)為那些不處理大量信息流的網(wǎng)站提供服務(wù)。如何根據(jù)訪客對(duì)網(wǎng)站的興趣添加相關(guān)的瀏覽器通知？

本文將演示如何在Concise CSS網(wǎng)站上實(shí)現(xiàn)一個(gè)通知系統(tǒng)，以便在每次發(fā)布框架新版本時(shí)提醒訪客。我將展示如何結(jié)合使用localStorage和瀏覽器Notification API來(lái)實(shí)現(xiàn)這一目標(biāo)。

Notification API基礎(chǔ)

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

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

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

我們將permission屬性的輸出存儲(chǔ)在一個(gè)變量中。如果權(quán)限已授予或拒絕，則不返回任何內(nèi)容。如果我們之前沒(méi)有請(qǐng)求過(guò)權(quán)限，則使用requestPermission方法請(qǐng)求權(quán)限。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

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

    Notification.requestPermission();
  }
})();

您應(yīng)該會(huì)在瀏覽器中看到類似上圖的提示。

現(xiàn)在我們已經(jīng)請(qǐng)求了權(quán)限，讓我們修改代碼，以便在允許權(quán)限的情況下顯示通知：

(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!");
      });
  }
})();

雖然簡(jiǎn)單，但功能有效。

我們?cè)谶@裡使用requestPermission()方法的基於Promise的語(yǔ)法，在權(quán)限授予後顯示通知。我們使用Notification構(gòu)造函數(shù)顯示通知。此構(gòu)造函數(shù)接受兩個(gè)參數(shù)，一個(gè)用於通知標(biāo)題，另一個(gè)用於選項(xiàng)。請(qǐng)參閱文檔鏈接以查找可以傳遞的完整選項(xiàng)列表。

存儲(chǔ)框架版本

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

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

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

此隱藏元素將用於在我們的conciseVersion鍵中存儲(chǔ)框架版本。我們還將使用此元素在發(fā)布框架的新版本時(shí)更新該鍵。

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

我們可以使用少量CSS來(lái)隱藏此元素：

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

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

    Notification.requestPermission();
  }
})();

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

現(xiàn)在我們可以獲取此元素並在JavaScript中與之交互。我們需要編寫(xiě)一個(gè)函數(shù)來(lái)返回我們剛剛創(chuàng)建的隱藏元素內(nèi)的文本。

(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!");
      });
  }
})();

此函數(shù)使用textContent屬性存儲(chǔ).js-currentVersion元素的內(nèi)容。讓我們?cè)偬砑右粋€(gè)變量來(lái)存儲(chǔ)conciseVersion localStorage鍵的內(nèi)容。

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

現(xiàn)在，我們?cè)谝粋€(gè)變量中擁有框架的最新版本，並且我們將localStorage鍵存儲(chǔ)到一個(gè)變量中。是時(shí)候添加確定是否有新版本的框架可用的邏輯了。

我們首先檢查conciseVersion鍵是否存在。如果不存在，我們將向用戶顯示通知，因?yàn)檫@可能是他們第一次訪問(wèn)。如果鍵存在，我們檢查其值（存儲(chǔ)在currentVersion變量中）是否大於當(dāng)前版本的值（存儲(chǔ)在latestVersion變量中）。如果框架的最新版本大於訪客上次看到的版本，我們就知道已發(fā)布新版本。

注意：我們使用semver-compare庫(kù)來(lái)處理比較兩個(gè)版本字符串。

知道了這一點(diǎn)，我們將向訪客顯示通知並適當(dāng)?shù)馗挛覀兊腸onciseVersion鍵。

[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}

要使用此函數(shù)，我們需要修改下面的權(quán)限代碼。

function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}

這允許我們?cè)谟脩糁耙咽谟铏?quán)限或剛剛授予權(quán)限時(shí)顯示通知。

顯示通知

到目前為止，我們只向用戶顯示了不包含太多信息的簡(jiǎn)單通知。讓我們編寫(xiě)一個(gè)函數(shù)，允許我們動(dòng)態(tài)創(chuàng)建瀏覽器通知，並控制通知的許多不同方面。

此函數(shù)具有正文文本、圖標(biāo)、標(biāo)題以及可選鏈接和通知持續(xù)時(shí)間的參數(shù)。在內(nèi)部，我們創(chuàng)建一個(gè)選項(xiàng)對(duì)象來(lái)存儲(chǔ)我們的通知正文文本和圖標(biāo)。我們還創(chuàng)建Notification對(duì)象的新的實(shí)例，傳入我們的通知標(biāo)題以及選項(xiàng)對(duì)象。

接下來(lái)，如果我們想鏈接到我們的通知，我們將添加一個(gè)onclick處理程序。我們使用setTimeout()在指定的時(shí)間後關(guān)閉通知。如果調(diào)用此函數(shù)時(shí)未指定時(shí)間，則使用默認(rèn)的五秒鐘。

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

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

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

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

    Notification.requestPermission();
  }
})();

我們使用displayNotification函數(shù)為我們的通知提供描述、圖像、標(biāo)題和鏈接。

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

完整代碼和測(cè)試

以下是本教程中編寫(xiě)的完整代碼。

（此處應(yīng)插入CodePen鏈接或完整代碼塊）

運(yùn)行此代碼應(yīng)該會(huì)在您的瀏覽器中生成以下通知。

為了進(jìn)行測(cè)試，您需要熟悉瀏覽器的通知權(quán)限。以下是管理Google Chrome、Safari、FireFox和Microsoft Edge中通知的一些快速參考。此外，您應(yīng)該熟悉使用開(kāi)發(fā)者控制臺(tái)來(lái)刪除和修改localStorage值以方便測(cè)試。

您可以通過(guò)運(yùn)行腳本一次並將js-currentVersion HTML元素的值更改為腳本可以看到差異來(lái)測(cè)試示例。您還可以使用相同的版本重新運(yùn)行，以確認(rèn)您不會(huì)收到不必要的通知。

更進(jìn)一步

這就是我們擁有動(dòng)態(tài)瀏覽器通知所需的一切！如果您正在尋找更靈活的瀏覽器通知，建議您了解Service Worker API。 Service Worker可用於響應(yīng)推送通知，允許用戶收到通知，無(wú)論他們當(dāng)前是否正在訪問(wèn)您的網(wǎng)站，從而實(shí)現(xiàn)更及時(shí)的更新。

瀏覽器通知API常見(jiàn)問(wèn)題解答

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

瀏覽器通知API允許Web應(yīng)用程序向用戶顯示系統(tǒng)通知。這些通知類似於移動(dòng)設(shè)備上的推送通知，即使網(wǎng)頁(yè)未處?kù)督裹c(diǎn)狀態(tài)也可以顯示。 API的工作原理是請(qǐng)求用戶的權(quán)限以顯示通知。一旦獲得權(quán)限，Web應(yīng)用程序就可以使用Notification對(duì)象創(chuàng)建和顯示通知。

如何請(qǐng)求顯示通知的權(quán)限？

要請(qǐng)求權(quán)限，可以使用Notification.requestPermission()方法。此方法將向用戶顯示一個(gè)對(duì)話框，詢問(wèn)他們是否允許顯示通知。該方法返回一個(gè)Promise，該P(yáng)romise解析為權(quán)限狀態(tài)，可以是“granted”、“denied”或“default”。

如何創(chuàng)建和顯示通知？

一旦獲得權(quán)限，就可以使用Notification構(gòu)造函數(shù)創(chuàng)建和顯示通知。此構(gòu)造函數(shù)接受兩個(gè)參數(shù)：通知的標(biāo)題和一個(gè)選項(xiàng)對(duì)象。選項(xiàng)對(duì)象可以包含body（通知的文本）、icon（要顯示的圖標(biāo)）和tag（通知的標(biāo)識(shí)符）等屬性。

即使網(wǎng)頁(yè)未處?kù)督裹c(diǎn)狀態(tài)，我也可以顯示通知嗎？

是的，瀏覽器通知API允許您即使網(wǎng)頁(yè)未處?kù)督裹c(diǎn)狀態(tài)也可以顯示通知。這對(duì)於需要通知用戶重要事件的Web應(yīng)用程序非常有用，即使他們沒(méi)有積極使用該應(yīng)用程序也是如此。

如何處理通知上的點(diǎn)擊事件？

您可以通過(guò)向通知對(duì)象添加事件偵聽(tīng)器來(lái)處理通知上的點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊通知時(shí)，將調(diào)用事件偵聽(tīng)器函數(shù)。

我可以以編程方式關(guān)閉通知嗎？

是的，您可以通過(guò)調(diào)用通知對(duì)像上的close()方法以編程方式關(guān)閉通知。如果您想在一段時(shí)間後自動(dòng)關(guān)閉通知，這將非常有用。

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

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

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

通知的外觀很大程度上取決於操作系統(tǒng)和瀏覽器。但是，您可以使用傳遞給Notification構(gòu)造函數(shù)的選項(xiàng)對(duì)象來(lái)自定義通知的某些方面，例如標(biāo)題、正文文本和圖標(biāo)。

如何檢查用戶是否已授予顯示通知的權(quán)限？

您可以通過(guò)訪問(wèn)Notification.permission屬性來(lái)檢查當(dāng)前的權(quán)限狀態(tài)。如果用戶已授予權(quán)限，此屬性將為“granted”；如果他們已拒絕權(quán)限，則為“denied”；如果他們尚未響應(yīng)權(quán)限請(qǐng)求，則為“default”。

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

是的，可以在工作程序腳本中使用瀏覽器通知API。這允許您從後臺(tái)任務(wù)顯示通知，即使主網(wǎng)頁(yè)未處?kù)督裹c(diǎn)狀態(tài)也是如此。

以上是使用網(wǎng)絡(luò)通知API顯示動(dòng)態(tài)消息的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！