Wie sende ich Browserbenachrichtigungen mit Javascript?
Hallo,
Dieses Mal erfahren wir etwas über Web-Benachrichtigungen und wie man sie versendet.
Bevor ich anfange, möchte ich betonen, dass dies ein einfacher Einstiegsartikel sein wird, vielleicht werde ich später einen ausführlichen Artikel schreiben.
Einführung
Die NotificationAPI befindet sich im windowObjekt und es ist gängige Praxis, die Verfügbarkeit der API zu überprüfen.
//check if the Notification API available in the window object
if(window.Notification) {
//all other Notification API calls
}
- requestPermission(), die ein Versprechen zurückgibt.
- Notification() selbst.
Erstellen Sie 2 Dateien mit dem Namen index.htmlundscript/app.js
index.html
Diese Datei ist selbsterklärend. Wir haben zwei Schaltflächen: Die erste dient zum Erhalten des Benachrichtigungszugriffs und die zweite zum Senden der Benachrichtigung.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Notification</title>
</head>
<body>
<h1>
Notionfications in web?
</h1>
<button id="get-noti-access-btn">
Get Notionfication Access
</button>
<button id="send-noti-btn">
Send Notionfication
</button>
</body>
<script src="./script/app.js"></script>
</html>
app.js
Diese Datei ist dafür verantwortlich, die Benachrichtigungsberechtigung vom Benutzer einzuholen und eine Beispielbenachrichtigung zu senden.
//block 1
const requestBtn = document.querySelector("#get-noti-access-btn");
const sendNotiBtn = document.querySelector("#send-noti-btn");
//block 2
const getNotificationAccess = () => {
console.log("get noti access");
if (window.Notification) {
Notification.requestPermission().then((permission) => {
console.log(permission);
});
} else {
console.log("No noti avaialble in browser");
}
};
//block 3
const sendNotification = () => {
console.log("send noti");
setTimeout(() => {
const notification = new Notification("hello");
}, 5000);
};
//block 4
requestBtn.addEventListener("click", (e) => {
e.preventDefault();
getNotificationAccess();
});
sendNotiBtn.addEventListener("click", (e) => {
e.preventDefault();
sendNotification();
});
- Im ersten Block
block 1initialisieren wir unsere DOM-Elemente (die Schaltflächen). Block 2verfügt über eine FunktiongetNotificationAccess, die die Berechtigung für den Benachrichtigungszugriff erhält, und während der Ausführung wird eine Aufforderung zur Einholung der Benutzergenehmigung angezeigt, wie im Screenshot unten gezeigt.
Das permissionArgument in then()gibt die folgenden Zeichenfolgen zurück
granted→ Der Benutzer hat auf „Zulassen“ geklickt.denied→ Der Benutzer hat auf „Blockieren“ geklickt.default→ Benutzer weder erlaubt noch blockiert. (Behandeln Sie dies als abgelehnt)
3. Block 3 hat die sendNotificationFunktion, eine Benachrichtigung zu erstellen.
Um einen lang laufenden Prozess zu simulieren, verwenden wir die setTimeoutFunktion und erstellen darin neue Benachrichtigungen.
const x = new Notification("Hello")→ Diese Zeile erstellt eine Benachrichtigung und löst diese aus.
4. Block 4 hängt die Ereignis-Listener an die jeweiligen Schaltflächen an.
Ausführen des Codes und Vorsichtsmaßnahmen.
- Erstens testen Sie diese Anwendung möglicherweise nicht in einigen Online-IDEs, aber in einigen von ihnen müssen Sie die Vorschau in einem neuen Fenster öffnen, damit dies funktioniert.
SSLSie können dies auch nicht in Ihrem lokalen Host ausführen, da die Site über und verfügen muss, um Push-Benachrichtigungen senden zu könnenHTTPS. Möglicherweise gibt es einige Problemumgehungen.
Sollten im Beispiel Fehler oder Bugs auftreten, lassen Sie es mich bitte wissen.
Ich werde den ausführlichen NotificationAPI-Beitrag hier verlinken, wenn mir in Zukunft einer einfällt.
![Was ist überhaupt eine verknüpfte Liste? [Teil 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
