Jak wysyłać powiadomienia push za pomocą JavaScript

Powiadomienia JavaScript to sposób na wysyłanie wiadomości do użytkowników w czasie rzeczywistym. Możesz ich używać do powiadamiania o aktualizacjach swojej witryny, nowych wiadomościach na czacie, e-mailach lub wszelkich działaniach w mediach społecznościowych. Możesz także używać powiadomień o przypomnieniach z kalendarza (takich jak zbliżające się spotkanie w Google Meet lub Zoom).

Dowiedz się, jak tworzyć powiadomienia o wydarzeniach w JavaScript i wysyłać je na swój telefon lub przeglądarkę internetową. Osiągniesz to za pomocą wbudowanego JavaScript po stronie klienta — nie jest wymagana żadna zewnętrzna biblioteka!

Prośba o pozwolenie na wysyłanie powiadomień

Aby utworzyć powiadomienie, musisz zadzwonić pod numer Powiadomienie klasa do stworzenia obiektu. Daje dostęp do różnych właściwości i metod, których możesz użyć do skonfigurowania powiadomienia. Ale zanim utworzysz powiadomienie, musisz najpierw poprosić użytkownika o pozwolenie.

Poniższy kod JavaScript poprosi o pozwolenie na wysyłanie powiadomień użytkownika. The prośba o pozwolenie wywołanie zwróci komunikat wskazujący, czy przeglądarka zezwala na powiadomienia, czy nie:

konst przycisk = dokument.querySelector('przycisk')
 button.addEventListener("Kliknij", ()=> {
 Notification.requestPermission().then(pozwolenie => {
 ostrzeżenie (pozwolenie)
 })
})

Po kliknięciu przycisku możesz otrzymać alert z informacją zaprzeczony. Oznacza to, że przeglądarka uniemożliwiła JavaScript wysyłanie powiadomień o zdarzeniach. Stan uprawnień to zaprzeczony w przypadkach, gdy użytkownik wyraźnie uniemożliwił witrynom wysyłanie powiadomień (poprzez ustawienia przeglądarki) lub użytkownik surfuje w trybie incognito.

W takich przypadkach lepiej uszanować decyzję użytkownika o odrzuceniu powiadomień i powstrzymać się od dalszego zawracania mu głowy.

Wysyłanie podstawowych powiadomień

Tworzysz powiadomienie push, tworząc plik Powiadomienie obiekt nowym słowem kluczowym. Aby uzyskać szczegółowe informacje na temat programowania obiektowego, zapoznaj się z naszym przewodnikiem jak tworzyć klasy w JavaScript.

Ponieważ będziesz wysyłać powiadomienia tylko wtedy, gdy zostanie udzielone pozwolenie, musisz zawinąć je w plik Jeśli sprawdzać.

konst przycisk = dokument.querySelector('przycisk')
button.addEventListener("Kliknij", ()=> {
 Notification.requestPermission().then(trwała ondulacja => {
Jeśli(trwała ondulacja 'nadany') {
nowy Powiadomienie(„Przykładowe powiadomienie”)
 }
 })
})

Kliknij przycisk, a otrzymasz powiadomienie push w prawym dolnym rogu przeglądarki internetowej z określonym tekstem.

Jest to najbardziej podstawowy sposób tworzenia powiadomień, który działa zarówno na telefonie, jak i na komputerze. Przyjrzyjmy się niektórym zaawansowanym właściwościom powiadomień.

Zaawansowane właściwości powiadomień

Oprócz tytułu powiadomienia możesz również przekazać argument opcji do konstruktora podczas tworzenia obiektu powiadomienia. Ten argument opcji musi być obiektem. Tutaj możesz dodać kilka opcji, aby dostosować powiadomienie.

Własność ciała

Pierwszą właściwością, którą powinieneś znać, jest ciało nieruchomość. Używałbyś tego, aby dodać treść do powiadomienia, zwykle w celu przekazania większej ilości informacji w formie tekstu. Oto prosty przykład:

konst przycisk = dokument.querySelector('przycisk')
button.addEventListener("Kliknij", ()=> {
 Notification.requestPermission().then(trwała ondulacja => {
Jeśli(trwała ondulacja 'nadany') {
nowy Powiadomienie(„Przykładowe powiadomienie”, {
 ciało: „To jest więcej tekstu”,
 })
 }
 })
})

Jeśli uruchomisz ten kod, tekst podstawowy pojawi się w powiadomieniu wypychanym pod Przykładowe powiadomienie nagłówek.

Atrybut danych

Często możesz chcieć dodać niestandardowe dane do powiadomień. Może chcesz wyświetlić konkretny komunikat o błędzie w przypadku odmowy pozwolenia lub przechowywać dane otrzymane z interfejsu API. We wszystkich takich przypadkach możesz użyć dane właściwość, aby dodać niestandardowe dane do powiadomienia.

button.addEventListener("Kliknij", ()=> {
 Notification.requestPermission().then(trwała ondulacja => {
Jeśli(trwała ondulacja 'nadany') {
konst powiadomienie = nowy Powiadomienie(„Przykładowe powiadomienie”, {
 ciało: „To jest więcej tekstu”,
 dane: {Witam: "świat"}
 })

 alert (notification.data.hello)
 }
 })
})

Możesz uzyskać dostęp do danych z dane właściwość podobnie do pokazanej w powyższym bloku kodu (wewnątrz pliku alarm()).

Możesz także powiązać detektory zdarzeń z powiadomieniami. Na przykład następujący detektor zdarzeń jest wykonywany za każdym razem, gdy zamykasz powiadomienie wypychane. Funkcja wywołania zwrotnego po prostu rejestruje niestandardowy komunikat.

konst powiadomienie = nowy Powiadomienie(„Przykładowe powiadomienie”, { 
 ciało: „To jest więcej tekstu”,
 dane: {Witam: "świat"} 
})
powiadomienie. addEventListener("zamknąć", mi => {
konsola.log (e.target.data.hello)
})

To doskonały sposób na przekazywanie danych, jeśli musisz coś zrobić, gdy ktoś zamknie powiadomienie lub je kliknie. oprócz zamknąć zdarzenie (które jest wykonywane po zamknięciu powiadomienia), powinieneś je zachować słuchacze zdarzeń w Twojej głowie:

• pokazywać: Wykonuje się, gdy pojawi się powiadomienie.
• Kliknij: Wykonuje się, gdy użytkownik kliknie gdziekolwiek w powiadomieniu.
• błąd: Wykonuje się, gdy odmówisz JavaScriptowi pozwolenia na wysyłanie powiadomień.

Ikona Właściwość

The Ikona służy do dodawania ikony do powiadomienia push. Zakładając, że masz nazwę logo ikony logo.png w bieżącym katalogu możesz go użyć w swoich powiadomieniach w następujący sposób:

konst powiadomienie = nowy Powiadomienie(„Przykładowe powiadomienie”, { 
 Ikona: "logo.png"
})

Jeśli nie możesz połączyć się z plikami, musisz to zrobić zrozumieć działanie względnych i bezwzględnych adresów URL.

Po zapisaniu pliku, odświeżeniu przeglądarki i kliknięciu przycisku powiadomienie będzie miało obraz wyświetlany po lewej stronie nagłówka i treści.

Atrybut tagu

Kiedy ustawisz etykietka atrybut w powiadomieniu, w zasadzie nadajesz powiadomieniu unikalny identyfikator. Dwa powiadomienia nie mogą istnieć razem, jeśli mają ten sam tag. Zamiast tego najnowsze powiadomienie zastąpi starsze powiadomienie.

Rozważ nasz poprzedni przykład przycisku (bez znacznika). Jeśli klikniesz przycisk trzy razy w krótkim odstępie czasu, pojawią się trzy powiadomienia, które będą nakładać się na siebie. Załóżmy teraz, że dodałeś następujący tag do powiadomienia:

konst powiadomienie = nowy Powiadomienie(„Przykładowe powiadomienie”, { 
 ciało: „To jest więcej tekstu”,
 etykietka: „Mój nowy tag”
})

Jeśli klikniesz przycisk ponownie, pojawi się tylko jedno okno powiadomienia. Każde kolejne kliknięcie nadpisze wcześniejsze powiadomienie, więc tylko jedno powiadomienie będzie wyświetlane bez względu na to, ile razy klikniesz przycisk. Jest to przydatne, jeśli chcesz dodać dane dynamiczne (np Matematyka.losowe()) do ciała:

konst powiadomienie = nowy Powiadomienie(„Przykładowe powiadomienie”, { 
 ciało: Matematyka.losowy()
 Ikona: "logo.png",
 etykietka: „Mój znacznik ciała”
})

Za każdym razem, gdy klikniesz przycisk, pojawi się nowy numer. Użyj właściwości tag, jeśli chcesz zastąpić bieżące powiadomienie nowymi informacjami w nim zawartymi. Na przykład w aplikacji do przesyłania wiadomości możesz użyć atrybutu tag, aby zastąpić powiadomienie nowymi wiadomościami.

Przykład powiadomienia push przy użyciu JavaScript

Poniższy przykład wykrywa za każdym razem, gdy tracisz aktywność na swojej stronie (tj. kiedy zamykasz stronę lub otwierasz nową kartę). W takim przypadku kod wysyła powiadomienie z prośbą o zwrot:

pozwalać powiadomienie
dokument.addEventListener(„zmiana widoczności”, ()=> {
Jeśli(dokumentstan widoczności "ukryty") {
 powiadomienie = nowy Powiadomienie("Wróć proszę", {
 ciało: "Jeszcze nie odchodź :("
 etykietka: "Wróć"
 })
 } w przeciwnym razie {
 powiadomienie. zamknij()
 }
})

Za każdym razem, gdy stracisz koncentrację na tej stronie, otrzymasz powiadomienie z prośbą o powrót do tej strony. Ale kiedy wrócisz na stronę, plik w przeciwnym razie blok jest wykonywany, co zamyka powiadomienie push. Technika ta doskonale sprawdza się w sytuacjach, gdy chcesz przekazać użytkownikowi jakąś informację po opuszczeniu Twojej strony.

Dowiedz się więcej o JavaScript

Powiadomienia o zdarzeniach to tylko jedna z wielu funkcji, które można znaleźć w JavaScript. Aby naprawdę dobrze radzić sobie z powiadomieniami, musisz najpierw zrozumieć podstawowe funkcje języka i składnię JavaScript. Tworzenie prostych gier to jeden ze sposobów na podniesienie swoich umiejętności i zapoznanie się z podstawowymi pojęciami języka.