Thomas Steiner
ป้ายใช้เพื่อบอกให้ผู้ใช้ทราบว่ามีข้อมูลที่ไม่เร่งด่วน เช่น ใช้เพื่อระบุสถานะของแอป หรือจำนวนรายการที่ยังไม่อ่าน วิธีคลาสสิกในการสร้างป้ายแอปคือการเพิ่มตัวเลขลงในไอคอน Fav ในเบราว์เซอร์สมัยใหม่ หลังจากติดตั้งแอปแล้ว จะมีวิธีในตัว สำหรับเพิ่มป้ายไปยังไอคอนแอปในแถบงานของระบบปฏิบัติการ
แนวทางสมัยใหม่
การใช้เมธอด navigator.setAppBadge()
เมธอด navigator.setAppBadge() จะตั้งค่าป้ายบนไอคอนที่เชื่อมโยงกับแอปที่ติดตั้ง เมธอดจะใช้อาร์กิวเมนต์เดี่ยวที่ไม่บังคับ ซึ่งเป็นจำนวนเต็มที่จะใช้เป็นค่าของป้าย การตั้งค่าตัวเลขเป็น 0
จะล้างป้ายแอป การไม่แสดงผลอาร์กิวเมนต์ในป้ายทั่วไป ซึ่งมักจะแสดงเป็นจุดสี
วิธีคลาสสิก
การเพิ่มตัวเลขลงในไอคอน Fav
หากยังไม่ได้ติดตั้งแอป ก็เพิ่มหมายเลขลงในไอคอน Fav ได้ ซึ่งทำได้หลายวิธี เช่น วาดไอคอน Fav แบบไดนามิกบนผืนผ้าใบพร้อมเพิ่มข้อมูลป้ายและแสดงเป็น URL ของ Blob หรือสร้างรูปภาพ SVG ที่มีข้อมูลป้ายเป็น URL ข้อมูล
การเพิ่มประสิทธิภาพแบบต่อเนื่อง
ตัวอย่างข้อมูลด้านล่างใช้องค์ประกอบที่กำหนดเอง <favicon-badge></favicon-badge> ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ประกาศกำหนดป้ายบนไอคอน Fav ที่ระบุผ่านแอตทริบิวต์ src ได้โดยส่งจำนวนเต็มไปยังแอตทริบิวต์ badge เมื่อผู้ใช้ติดตั้งแอปพลิเคชัน ป้ายจะ "อัปเกรด" เป็นป้ายระบบปฏิบัติการดั้งเดิม
import 'https://unpkg.com/favicon-badge@2.0.0/dist/FavIconBadge.js';
// DOM references.
const favicon = document.querySelector('favicon-badge');
const installButton = document.querySelector('button');
// Feature detection.
const supportsAppBadge = 'setAppBadge' in navigator;
let setAppBadge;
// For the demo simply set the badge between [0, 9].
let i = 0;
const getAppBadgeValue = () => {
if (i > 9) {
i = 0;
}
return i++;
};
// Set the badge on the favicon.
const setAppBadgeFavicon = (value) => {
favicon.badge = value;
};
// Set the native operating system badge.
const setAppBadgeNative = (value) => {
navigator.setAppBadge(value);
}
// If the app is installed and the Badging API is supported,
// set the badge on the native operating system. Else, fall
// back to the favicon.
if (
matchMedia('(display-mode: standalone)').matches &&
supportsAppBadge
) {
setAppBadge = setAppBadgeNative;
} else {
setAppBadge = setAppBadgeFavicon;
}
// Set a new badge every second.
setInterval(() => {
setAppBadge(getAppBadgeValue());
}, 1000);
// If installation is supported…
if ('BeforeInstallPromptEvent' in window) {
let installEvent = null;
const onInstall = () => {
// After installation, "upgrade" to the native operating system badge.
installButton.disabled = true;
installEvent = null;
if (supportsAppBadge) {
favicon.badge = false;
setAppBadge = setAppBadgeNative;
}
};
// …listen for the `beforeinstallprompt` event.
window.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault();
installEvent = event;
installButton.disabled = false;
});
// Deal with installation.
installButton.addEventListener('click', async () => {
if (!installEvent) {
return;
}
installEvent.prompt();
const result = await installEvent.userChoice;
if (result.outcome === 'accepted') {
onInstall();
}
});
// Listen for the `appinstalled` in case the user installs the app manually.
window.addEventListener('appinstalled', (event) => {
onInstall();
});
}
อ่านเพิ่มเติม
การสาธิต
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="manifest.json" />
<title>How to create an app badge</title>
<link rel="stylesheet" href="style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', async () => {
const registration = await navigator.serviceWorker.register(
'sw.js',
);
console.log(
'Service worker registered for scope',
registration.scope,
);
});
}
</script>
<script src="script.js" type="module"></script> -->
</head>
<body>
<h1>How to create an app badge</h1>
<ol>
<li>
Watch the favicon. You should see a counter that updates each second
integrated into the favicon.
<img
src="../favicon.png"
style="width: 250px; height: auto"
width="528"
height="74"
alt="Favicon with counter."
/>
</li>
<li>
Install the app by clicking the button below. After the installation,
the button is disabled.
<p>
<button disabled type="button">Install</button>
</p>
</li>
<li>
Watch the app icon in your operating system's task bar. You should see a
counter that updates each second as an app badge.
<img
src="../app-badge.png"
style="width: 80px; height: auto"
width="282"
height="388"
alt="App badge with counter."
/>
</li>
</ol>
<favicon-badge src="../favicon.svg" textColor="#fff" badge="" />
</body>
</html>CSS
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
color-scheme: dark light;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
}
img {
height: auto;
max-width: 100%;
display: block;
}
JS
import 'https://unpkg.com/favicon-badge@2.0.0/dist/FavIconBadge.js';
// The `` custom element.
const favicon = document.querySelector('favicon-badge');
// The install button.
const installButton = document.querySelector('button');
// Feature detection.
const supportsAppBadge = 'setAppBadge' in navigator;
// This function will either set the favicon or the native
// app badge. The implementation is dynamically changed at runtime.
let setAppBadge;
// Variable for the counter.
let i = 0;
// Returns a value between 0 and 9.
const getAppBadgeValue = () => {
if (i > 9) {
i = 0;
}
return i++;
};
// Function to set a favicon badge.
const setAppBadgeFavicon = (value) => {
favicon.badge = value;
};
// Function to set a native app badge.
const setAppBadgeNative = (value) => {
navigator.setAppBadge(value);
}
// If the app is installed and native app badges are supported,
// use the native app badge.
if (
matchMedia('(display-mode: standalone)').matches &&
supportsAppBadge
) {
setAppBadge = setAppBadgeNative;
// In all other cases (i.e., if the app is not installed or native
// app badges are not supported), use the favicon badge.
} else {
setAppBadge = setAppBadgeFavicon;
}
// Update the badge every second.
setInterval(() => {
setAppBadge(getAppBadgeValue());
}, 1000);
// Only relevant for browsers that support installation.
if ('BeforeInstallPromptEvent' in window) {
// Variable to stash the `BeforeInstallPromptEvent`.
let installEvent = null;
// Function that will be run when the app is installed.
const onInstall = () => {
// Disable the install button.
installButton.disabled = true;
// No longer needed.
installEvent = null;
if (supportsAppBadge) {
// Remove the favicon badge.
favicon.badge = false;
// Switch the implementation so it uses the native
// app badge.
setAppBadge = setAppBadgeNative;
}
};
window.addEventListener('beforeinstallprompt', (event) => {
// Do not show the install prompt quite yet.
event.preventDefault();
// Stash the `BeforeInstallPromptEvent` for later.
installEvent = event;
// Enable the install button.
installButton.disabled = false;
});
installButton.addEventListener('click', async () => {
// If there is no stashed `BeforeInstallPromptEvent`, return.
if (!installEvent) {
return;
}
// Use the stashed `BeforeInstallPromptEvent` to prompt the user.
installEvent.prompt();
const result = await installEvent.userChoice;
// If the user installs the app, run `onInstall()`.
if (result.outcome === 'accepted') {
onInstall();
}
});
// The user can decide to ignore the install button
// and just use the browser prompt directly. In this case
// likewise run `onInstall()`.
window.addEventListener('appinstalled', (event) => {
onInstall();
});
}