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

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

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

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

Notification API基礎(chǔ)

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

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

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

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

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

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

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

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

現(xiàn)在我們已經(jī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!");
      });
  }
})();

雖然簡單，但功能有效。

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

存儲框架版本

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

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

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

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

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

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

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

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

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

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

現(xiàn)在我們可以獲取此元素并在JavaScript中與之交互。我們需要編寫一個函數(shù)來返回我們剛剛創(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屬性存儲.js-currentVersion元素的內(nèi)容。讓我們再添加一個變量來存儲conciseVersion localStorage鍵的內(nèi)容。

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

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

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

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

知道了這一點(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;
}

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

顯示通知

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

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

接下來，如果我們想鏈接到我們的通知，我們將添加一個onclick處理程序。我們使用setTimeout()在指定的時間后關(guān)閉通知。如果調(diào)用此函數(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á)式嵌入到我們的文本中。

完整代碼和測試

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

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

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

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

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

更進(jìn)一步

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

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

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

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

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

要請求權(quán)限，可以使用Notification.requestPermission()方法。此方法將向用戶顯示一個對話框，詢問他們是否允許顯示通知。該方法返回一個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ù)接受兩個參數(shù)：通知的標(biāo)題和一個選項(xiàng)對象。選項(xiàng)對象可以包含body（通知的文本）、icon（要顯示的圖標(biāo)）和tag（通知的標(biāo)識符）等屬性。

即使網(wǎng)頁未處于焦點(diǎn)狀態(tài)，我也可以顯示通知嗎？

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

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

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

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

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

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

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

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

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

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

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

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

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

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