Cele bloga
Po przeczytaniu tego bloga będziesz mógł ustawić powiadomienie na pulpicie dla swojej witryny. Będziesz także mógł dostosować swoje powiadomienie na podstawie własnej wiadomości, obrazu, ikony itp.
Korzyść z Desktop Notification
Przypuśćmy, że chcesz powiadomić swojego klienta poza stroną internetową, abyśmy mogli skorzystać z powiadomienia na pulpicie, tak jakbyś włączał powiadomienia na pulpicie o wiadomościach e-mail, nie musisz regularnie sprawdzać wiadomości e-mail. W każdym e-mailu otrzymałeś powiadomienie.
Kod dla powiadomień na pulpicie
Dodaj poniższą funkcję w tagu skryptu w nagłówku HTML.
function showNotification () {// Sprawdź, czy przeglądarka użytkownika obsługuje powiadomienia, czy nie, jeśli (! („Powiadomienie” w oknie)) {alert („Twoja przeglądarka nie obsługuje powiadomienia na pulpicie”); } // Sprawdź, czy uprawnienia powiadomień zostały już przyznane, czy nie, jeśli (Notification.permission === "given") {// Utwórz powiadomienie var options = {body: 'Prosta linia powiadomień 1. \ T . ', // treść rejestru powiadomienia:' ltr ', // kierunek wiadomości ltr: od lewej do prawej. rtl: od prawej do lewej. image: „https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png”, // Dodaj obraz, jeśli jest to wymagane, aby wyświetlić ikonę: „https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Dodaj ikonę, jeśli to konieczne, aby pokazać} var title = "Knowband Blog"; var notification = new Powiadomienie (tytuł, opcje); // Dodaj powiadomienie kliknij link notification.onclick = function (event) {event.preventDefault (); // uniemożliwić przeglądarce skupienie się na karcie powiadomień window.open („https://www.knowband.com/blog/”, „_blank”); notification.close (); // Zamknij powiadomienie po kliknięciu}} // Jeśli nie ma uprawnień, poproś użytkownika o zgodę na inne, jeśli (Notification.permission! == "denied") {Notification.requestPermission (). then (function ( uprawnienia) {// Jeśli użytkownik zaakceptuje, utwórzmy powiadomienie, jeśli (uprawnienie === "przyznane") {var notification = new Notification ("Hi there!");}}); }}
Możesz aktywować tę funkcję poprzez zdarzenie, jak chcesz. Do celów testowych możesz to sprawdzić, dodając przycisk. Użyj poniższego kodu dla przycisku w ciele
<button onclick = "showNotification ()"> Pokaż powiadomienie! </button>
Uwaga: Jeśli używasz tego kodu w lokalnym systemie, użyj lokalnego serwera, np. Localhost.
Ekran wyjściowy
