Ako posielať push notifikácie pomocou JavaScriptu

Upozornenia JavaScript predstavujú spôsob, ako odosielať správy používateľom v reálnom čase. Môžete ich použiť na informovanie o aktualizáciách vašich webových stránok, nových chatových správach, e-mailoch alebo akýchkoľvek aktivitách na sociálnych sieťach. Môžete tiež použiť upozornenia na pripomienky kalendára (napríklad blížiace sa stretnutie v službe Google Meet alebo Zoom).

Zistite, ako vytvoriť upozornenia na udalosti v jazyku JavaScript a odoslať ich do telefónu alebo webového prehliadača. Dosiahnete to pomocou vstavaného JavaScriptu na strane klienta – nevyžaduje sa žiadna externá knižnica!

Žiadosť o povolenie odosielať upozornenia

Ak chcete vytvoriť upozornenie, musíte zavolať na číslo Oznámenie triedy na vytvorenie objektu. Poskytuje vám prístup k rôznym vlastnostiam a metódam, ktoré môžete použiť na konfiguráciu upozornenia. Pred vytvorením upozornenia však musíte najprv požiadať používateľa o povolenie.

Nasledujúci JavaScript bude vyžadovať povolenie na odosielanie upozornení používateľov. The požiadať o povolenie hovor vráti správu o tom, či prehliadač povoľuje upozornenia alebo nie:

konšt tlačidlo = dokument.querySelector('tlačidlo')
 button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(povolenie => {
 upozornenie (povolenie)
 })
})

Keď kliknete na tlačidlo, môžete dostať upozornenie, ktoré hovorí odmietnuté. To znamená, že prehliadač zamietol JavaScriptu odosielať upozornenia na udalosti. Stav povolenia je odmietnuté pre prípady, keď používateľ výslovne zabránil stránkam odosielať upozornenia (prostredníctvom nastavení prehliadača) alebo keď používateľ surfuje v režime inkognito.

V takýchto prípadoch je lepšie rešpektovať rozhodnutie používateľa o odmietnutí upozornení a mali by ste sa zdržať jeho ďalšieho obťažovania.

Odosielanie základných upozornení

Oznámenie push vytvoríte vytvorením a Oznámenie objekt s novým kľúčovým slovom. Ak sa chcete hlbšie ponoriť do objektovo orientovaného programovania, môžete si pozrieť našu príručku ako vytvoriť triedy v JavaScripte.

Keďže upozornenia by ste posielali iba v prípade udelenia povolenia, museli by ste ich zabaliť do súboru ak skontrolovať.

konšt tlačidlo = dokument.querySelector('tlačidlo')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
ak(perm 'udelené') {
Nový Upozornenie("Príklad oznámenia")
 }
 })
})

Kliknite na tlačidlo a v pravom dolnom rohu vášho webového prehliadača sa zobrazí push notifikácia so zadaným textom.

Toto je najzákladnejší spôsob vytvárania upozornení a funguje na vašom telefóne aj na počítači. Pozrime sa na niektoré pokročilé vlastnosti upozornení.

Rozšírené vlastnosti upozornení

Okrem názvu upozornenia môžete pri vytváraní objektu upozornenia odovzdať konštruktorovi aj argument možností. Tento argument možností musí byť objekt. Tu môžete pridať niekoľko možností na prispôsobenie upozornenia.

Vlastnosť tela

Prvá vlastnosť, ktorú by ste mali vedieť, je telo nehnuteľnosť. Toto by ste použili na pridanie textu do upozornenia, zvyčajne na poskytnutie ďalších informácií vo forme textu. Tu je jednoduchý príklad:

konšt tlačidlo = dokument.querySelector('tlačidlo')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
ak(perm 'udelené') {
Nový Upozornenie("Príklad oznámenia", {
 telo: "Toto je ďalší text",
 })
 }
 })
})

Ak spustíte tento kód, hlavný text sa zobrazí v oznámení push pod Príklad oznámenia hlavička.

Atribút údajov

Často možno budete chcieť do upozornení pridať vlastné údaje. Možno budete chcieť zobraziť konkrétne chybové hlásenie v prípade odmietnutia povolenia alebo uložiť údaje, ktoré ste dostali z rozhrania API. Pre všetky takéto prípady môžete použiť údajov vlastnosť na pridanie vlastných údajov do upozornenia.

button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
ak(perm 'udelené') {
konšt oznámenie = Nový Upozornenie("Príklad oznámenia", {
 telo: "Toto je ďalší text",
 údaje: {Ahoj: "svet"}
 })

 upozornenie (notification.data.hello)
 }
 })
})

K údajom sa dostanete z údajov vlastnosť podobná ako je znázornené vo vyššie uvedenom bloku kódu (vo vnútri upozornenie()).

K svojim upozorneniam môžete pripojiť aj poslucháčov udalostí. Napríklad nasledujúci prijímač udalostí sa spustí vždy, keď zatvoríte upozornenie push. Funkcia spätného volania jednoducho zaznamená vlastnú správu.

konšt oznámenie = Nový Upozornenie("Príklad oznámenia", { 
 telo: "Toto je ďalší text",
 údaje: {Ahoj: "svet"} 
})
oznámenie. addEventListener("Zavrieť", e => {
konzoly.log (e.target.data.hello)
})

Je to vynikajúci spôsob odovzdávania údajov, ak potrebujete niečo urobiť, keď niekto zavrie upozornenie alebo naň klikne. Okrem Zavrieť udalosti (ktorá sa spustí pri zatvorení upozornenia), mali by ste si ich ponechať poslucháčov udalostí v tvojej mysli:

• šou: Spustí sa, keď sa zobrazí upozornenie.
• kliknite: Spustí sa, keď používateľ klikne kdekoľvek v upozornení.
• chyba: Spustí sa, keď zamietnete JavaScriptu povolenie na odosielanie upozornení.

Ikona Vlastníctvo

The ikonu vlastnosť slúži na pridanie ikony do oznámenia push. Za predpokladu, že máte pomenované logo ikony logo.png v aktuálnom adresári ho môžete použiť vo svojich upozorneniach takto:

konšt oznámenie = Nový Upozornenie("Príklad oznámenia", { 
 ikona: "logo.png"
})

Ak máte problém s prepojením svojich súborov, musíte to urobiť pochopiť fungovanie relatívnych adries URL a absolútnych adries URL.

Keď súbor uložíte, obnovíte prehliadač a kliknete na tlačidlo, obrázok upozornenia sa zobrazí na ľavej strane hlavičky a tela.

Atribút značky

Keď nastavíte tag v upozornení, v podstate dávate oznámeniu jedinečné ID. Dve upozornenia nemôžu existovať spolu, ak majú rovnakú značku. Namiesto toho najnovšie upozornenie prepíše staršie upozornenie.

Zvážte náš predchádzajúci príklad tlačidla (bez značky). Ak by ste na tlačidlo klikli trikrát rýchlo za sebou, zobrazia sa tri upozornenia, ktoré sa naukladajú jedna na druhú. Teraz povedzme, že ste do upozornenia pridali nasledujúcu značku:

konšt oznámenie = Nový Upozornenie("Príklad oznámenia", { 
 telo: "Toto je ďalší text",
 značka: "Moja nová značka"
})

Ak by ste na tlačidlo klikli znova, zobrazí sa iba jedno oznamovacie pole. Každé ďalšie kliknutie prepíše predchádzajúce upozornenie, takže sa zobrazí iba jedno upozornenie bez ohľadu na to, koľkokrát kliknete na tlačidlo. Je to užitočné, ak chcete pridať dynamické údaje (napr Math.random()) na telo:

konšt oznámenie = Nový Upozornenie("Príklad oznámenia", { 
 telo: Matematika.random()
 ikona: "logo.png",
 značka: "Značka môjho tela"
})

Zakaždým, keď kliknete na tlačidlo, zobrazí sa nové číslo. Vlastnosť tag použite, ak chcete prepísať aktuálne upozornenie novými informáciami v ňom. Napríklad v aplikácii na odosielanie správ môžete pomocou atribútu tag prepísať upozornenie novými správami.

Príklad push notifikácie pomocou JavaScriptu

Nasledujúci príklad zistí, keď stratíte zameranie na svoju stránku (t. j. keď stránku zatvoríte alebo otvoríte novú kartu). V tomto prípade kód odošle upozornenie s výzvou na vrátenie:

nech oznámenie
dokument.addEventListener("zmena viditeľnosti", ()=> {
ak(dokument.visibilityState "skrytý") {
 oznámenie = Nový Upozornenie("Vráť sa prosím", {
 telo: "Ešte neodchádzaj :("
 značka: "Vráť sa"
 })
 } inak {
 notification.close()
 }
})

Kedykoľvek stratíte zameranie na danú stránku, dostanete upozornenie, aby ste sa na stránku vrátili. Ale keď sa vrátite na stránku, inak blok sa vykoná, čím sa zatvorí oznámenie push. Táto technika je vynikajúca v situáciách, keď chcete používateľovi po opustení stránky poskytnúť nejaké informácie.

Zistite viac o JavaScripte

Upozornenie na udalosti je len jednou z mnohých funkcií, ktoré môžete nájsť v JavaScripte. Aby ste boli naozaj dobrí s upozorneniami, musíte najprv pochopiť základné jazykové vlastnosti a syntax JavaScriptu. Vytváranie jednoduchých hier je jedným zo spôsobov, ako môžete zlepšiť svoje zručnosti a zoznámiť sa so základnými pojmami jazyka.