Push notifikace jsou skvělým způsobem, jak uživatelům posílat rychlé zprávy. Naučte se je odesílat pomocí JavaScriptu bez použití externí knihovny.

Oznámení JavaScriptu představují způsob, jak odesílat zprávy uživatelům v reálném čase. Můžete je použít k upozornění na aktualizace vašich webových stránek, nové chatové zprávy, e-maily nebo jakékoli aktivity na sociálních sítích. Můžete také použít oznámení pro připomenutí kalendáře (například blížící se schůzku na Google Meet nebo Zoom).

Naučte se vytvářet upozornění na události v JavaScriptu a odesílat je do telefonu nebo webového prohlížeče. Dosáhnete toho pomocí vestavěného JavaScriptu na straně klienta – není potřeba žádná externí knihovna!

Žádost o povolení zasílat oznámení

Chcete-li vytvořit oznámení, musíte zavolat na Oznámení třídy k vytvoření objektu. Poskytuje vám přístup k různým vlastnostem a metodám, které můžete použít ke konfiguraci oznámení. Před vytvořením oznámení však musíte nejprve požádat uživatele o povolení.

Následující JavaScript bude vyžadovat povolení k zasílání upozornění uživatele. The

instagram viewer
požádat o povolení hovor vrátí zprávu, která uvádí, zda prohlížeč povoluje upozornění nebo ne:

konst tlačítko = dokument.querySelector('knoflík')
 button.addEventListener("kliknout", ()=> {
 Notification.requestPermission().then(povolení => {
 upozornění (povolení)
 })
})

Když kliknete na tlačítko, můžete dostat upozornění, které říká popřel. To znamená, že prohlížeč odepřel JavaScriptu odesílat upozornění na události. Stav oprávnění je popřel pro případy, kdy uživatel výslovně zakázal webům odesílat upozornění (prostřednictvím nastavení prohlížeče) nebo uživatel surfuje v režimu inkognito.

V takových případech je lepší respektovat rozhodnutí uživatele o odmítnutí oznámení a měli byste se zdržet dalšího obtěžování.

Odesílání základních oznámení

Oznámení push vytvoříte vytvořením a Oznámení objekt s novým klíčovým slovem. Chcete-li se hlouběji ponořit do objektově orientovaného programování, můžete se podívat na naši příručku jak vytvořit třídy v JavaScriptu.

Vzhledem k tomu, že byste posílali oznámení pouze v případě udělení oprávnění, museli byste je zabalit do souboru -li šek.

konst tlačítko = dokument.querySelector('knoflík')
button.addEventListener("kliknout", ()=> {
 Notification.requestPermission().then(perm => {
-li(perm 'uděleno') {
Nový Oznámení("Příklad oznámení")
 }
 })
})

Klikněte na tlačítko a v pravém dolním rohu vašeho webového prohlížeče se zobrazí push notifikace se zadaným textem.

Toto je nejzákladnější způsob vytváření oznámení a funguje na vašem telefonu i na počítači. Podívejme se na některé pokročilé vlastnosti oznámení.

Pokročilé vlastnosti oznámení

Kromě názvu oznámení můžete konstruktoru při vytváření objektu oznámení předat také argument options. Tento argument možností musí být objekt. Zde můžete přidat několik možností pro přizpůsobení oznámení.

Vlastnost těla

První vlastnost, kterou byste měli znát, je tělo vlastnictví. Toto byste použili k přidání těla oznámení, obvykle k předání více informací ve formě textu. Zde je jednoduchý příklad:

konst tlačítko = dokument.querySelector('knoflík')
button.addEventListener("kliknout", ()=> {
 Notification.requestPermission().then(perm => {
-li(perm 'uděleno') {
Nový Oznámení("Příklad oznámení", {
 tělo: "Toto je další text",
 })
 }
 })
})

Pokud tento kód spustíte, hlavní text se zobrazí v oznámení push pod Příklad oznámení záhlaví.

Atribut dat

Často budete chtít do oznámení přidat vlastní data. Možná budete chtít zobrazit konkrétní chybovou zprávu, pokud je oprávnění odepřeno, nebo uložit data, která jste obdrželi z rozhraní API. Pro všechny takové případy můžete použít data vlastnost pro přidání vlastních dat do oznámení.

button.addEventListener("kliknout", ()=> {
 Notification.requestPermission().then(perm => {
-li(perm 'uděleno') {
konst oznámení = Nový Oznámení("Příklad oznámení", {
 tělo: "Toto je další text",
 údaje: {Ahoj: "svět"}
 })

 upozornění (notification.data.hello)
 }
 })
})

K datům můžete přistupovat z data vlastnost podobně jako ve výše uvedeném bloku kódu (uvnitř upozornění()).

K oznámením můžete také přiřadit posluchače událostí. Například následující posluchač událostí se spustí vždy, když zavřete oznámení push. Funkce zpětného volání jednoduše zaznamená vlastní zprávu.

konst oznámení = Nový Oznámení("Příklad oznámení", { 
 tělo: "Toto je další text",
 údaje: {Ahoj: "svět"} 
})
oznámení. addEventListener("zavřít", e => {
řídicí panel.log (e.target.data.hello)
})

Je to skvělý způsob, jak předávat data, pokud potřebujete něco udělat, když někdo zavře oznámení nebo na něj klikne. Kromě zavřít událost (která se spustí, když zavřete oznámení), měli byste si je ponechat posluchači událostí ve tvé mysli:

  • ukázat: Provede se, když se zobrazí upozornění.
  • klikněte: Provede se, když uživatel klepne kamkoli do oznámení.
  • chyba: Provede se, když odepřete JavaScriptu oprávnění k odesílání upozornění.

Ikona Vlastnost

The ikona vlastnost je pro přidání ikony do oznámení push. Za předpokladu, že máte ikonu s názvem loga logo.png v aktuálním adresáři jej můžete použít ve svých oznámeních takto:

konst oznámení = Nový Oznámení("Příklad oznámení", { 
 ikona: "logo.png"
})

Pokud se snažíte propojit své soubory, musíte to udělat pochopit fungování relativních adres URL a absolutních adres URL.

Když soubor uložíte, obnovíte prohlížeč a kliknete na tlačítko, obrázek bude mít oznámení zobrazený na levé straně záhlaví a těla.

Atribut značky

Když nastavíte štítek atribut ve vašem oznámení, v podstatě dáváte oznámení jedinečné ID. Dvě oznámení nemohou existovat společně, pokud mají stejnou značku. Místo toho nejnovější oznámení přepíše starší oznámení.

Zvažte náš předchozí příklad tlačítka (bez značky). Pokud byste na tlačítko klikli třikrát rychle za sebou, zobrazí se tři oznámení a naskládají se na sebe. Nyní řekněme, že jste do oznámení přidali následující značku:

konst oznámení = Nový Oznámení("Příklad oznámení", { 
 tělo: "Toto je další text",
 štítek: "Moje nová značka"
})

Pokud byste na tlačítko klikli znovu, zobrazí se pouze jedno oznamovací pole. Každé další kliknutí přepíše předchozí oznámení, takže se zobrazí pouze jedno oznámení bez ohledu na to, kolikrát na tlačítko kliknete. To je užitečné, pokud chcete přidat dynamická data (např Math.random()) na tělo:

konst oznámení = Nový Oznámení("Příklad oznámení", { 
 tělo: Matematika.náhodný()
 ikona: "logo.png",
 štítek: "Značka mého těla"
})

Pokaždé, když kliknete na tlačítko, objeví se nové číslo. Použijte vlastnost tag, pokud chcete přepsat aktuální oznámení novými informacemi v něm. Například v aplikaci pro zasílání zpráv můžete pomocí atributu tag přepsat oznámení novými zprávami.

Příklad push notifikace pomocí JavaScriptu

Následující příklad detekuje, když ztratíte zaměření na svou stránku (tj. když stránku zavřete nebo otevřete novou kartu). V tomto případě kód odešle upozornění s žádostí o vrácení:

nechat oznámení
dokument.addEventListener("změna viditelnosti", ()=> {
-li(dokument.visibilityState "skrytý") {
 oznámení = Nový Oznámení("Vrať se prosím", {
 tělo: "Ještě neodcházej :("
 štítek: "Vrať se"
 })
 } jiný {
 notification.close()
 }
})

Kdykoli ztratíte pozornost na danou stránku, dostanete upozornění, abyste se na stránku vrátili. Ale jakmile se vrátíte na stránku, jiný blok provede, čímž se zavře oznámení push. Tato technika je vynikající v situacích, kdy chcete uživateli po opuštění stránky poskytnout nějaké informace.

Zjistěte více o JavaScriptu

Upozornění na události je jen jednou z mnoha funkcí, které můžete v JavaScriptu najít. Abyste byli opravdu dobří s upozorněními, musíte nejprve pochopit základní jazykové funkce a syntaxi JavaScriptu. Vytváření jednoduchých her je jedním ze způsobů, jak zlepšit své dovednosti a seznámit se se základními pojmy jazyka.