共用方式為

重新吸引用戶使用徽章與通知

漸進式Web Apps (PWA) 能在應用程式未運行時執行工作，例如更新快取資料，或在裝置恢復連線時發送訊息。 為此，請使用以下 API，詳見同步 並在背景更新 PWA：

  • 背景同步 API
  • 週期性背景同步 API
  • 背景擷取 API

完成背景任務後，你可以使用通知和徽章，讓使用者重新與應用程式互動。 為此，請使用以下 API：

  • 應用程式徽章 API
  • 通知 API

徽章使用者友善，且可頻繁使用。 徽章不會中斷使用者的工作流程，且有助於顯示少量資訊，例如收到的訊息數量。

通知對於應用程式參與系統通知中心並顯示圖片和文字資訊非常有用。 通知很有用，可以提醒使用者應用程式中重要的狀態變更。 然而，通知應少用，因為它們往往會干擾使用者的工作流程。

在應用程式圖示上顯示徽章

PWA 可以透過 App Badging API 在應用程式圖示上顯示徽章。 徽章可以是空的，也可以是包含一個數字。

請檢查是否有支援

在使用 App Badging API 之前，請先確認 App Badging API 是否在你應用程式所運行的瀏覽器引擎中被支援，具體如下：

if (navigator.setAppBadge) {
    console.log("The App Badging API is supported!");
}

徽章展示

要設定徽章，請使用你應用程式前端或服務人員提供的以下代碼。

// To display an empty badge
navigator.setAppBadge();

// To display a number in the badge
navigator.setAppBadge(42);

Windows 工作列中的 PWA 圖示，徽章上寫著數字 42

該 setAppBadge 函式會回傳一個 Promise，可用來知道徽章何時被加入，並捕捉潛在錯誤，具體如下：

navigator.setAppBadge(42).then(() => {
    console.log("The badge was added");
}).catch(e => {
    console.error("Error displaying the badge", e);
});

清除徽章

要移除應用程式圖示上的徽章，請使用前端或服務人員提供的以下代碼：

navigator.clearAppBadge();

它 clearAppBadge 也會回傳一個 Promise，可用來處理潛在錯誤。

另一種清除徽章的方法是再次呼喊 setAppBadge ，但這次以點數通過 0 ：

navigator.setAppBadge(0);

在動作中心顯示通知

PWA 可以透過 Notifications API 顯示通知。

請檢查是否有支援

在使用 API 前，請確認其是否支援，具體如下：

if ("Notification" in window) {
    console.log("The Notifications API is supported");
}

請求許可

通知 API 只能在請求使用者顯示訊息的權限後使用。 要申請權限，請使用 requestPermission 如下所示的功能。

請求權限應該僅在回應使用者操作時進行。 這是最佳做法，避免在使用者尚未與通知功能互動時，透過權限提示打斷使用者。

button.addEventListener("click", () => {
    Notification.requestPermission().then(permission => {
        if (permission === "granted") {
            console.log("The user accepted");
        }
    });
});

你可以稍後再查看權限狀態：

if (Notification.permission === "granted") {
    console.log("The user already accepted");
}

顯示通知

一旦你確定 API 已支援且使用者已接受通知，你可以透過建立 Notification 一個物件來顯示通知：

const notification = new Notification("Hello World!");

僅有簡訊通知

上述程式碼顯示純文字通知訊息，但您也可以透過加入額外 body 與 icon 屬性來自訂訊息：

const notification = new Notification("Hello World!", {
    body: "This is my first notification message",
    icon: "/assets/logo-192.png",
});

一則包含文字和圖片的通知

你也可以顯示應用程式服務人員的通知。 這很有用，因為服務人員可能在你的應用程式未執行時正在工作。 要發送服務人員通知，請使用 ServiceWorkerRegistration.showNotification 以下功能：

self.registration.showNotification("Hello from the service worker!");

該 showNotification 函式支援與 Notification 前述範例中使用的建構子相同的參數。 該 showNotification 函數也支援 actions 以下章節所述的性質。

在通知中新增動作

在通知中，可以新增使用者要執行的動作。 這只支援於透過函 ServiceWorkerRegistration.showNotification 式顯示的持久通知。

self.registration.showNotification("Your content is ready", {
    body: "Your content is ready to be viewed. View it now?",
    icon: "/assets/logo-192.png",
    actions: [
        {
            action: "view-content",
            title: "Yes"
        },
        {
            action: "go-home",
            title: "No"
        }
    ]
});

一則包含文字、一張圖片和兩個動作的通知

當使用者點擊其中一個動作按鈕時，你的 PWA 可以透過監聽 notificationclick 事件來處理點擊。 當收到事件時 notificationclick ，關閉通知並執行以下程式碼：

self.addEventListener('notificationclick', event => {
    // Close the notification.
    event.notification.close();

    // React to the action.
    if (event.action === 'view-content') {
        console.log("view-content action was clicked");
    } else if (event.action === 'go-home') {
        console.log("go-home action was clicked");
    } else {
        console.log("main body of the notification was clicked");
    }
}, false);

欲了解更多通知動作，請參閱 MDN 的 Notification.actions 。

  • Last updated on