Rychlý tip:Nejjednodušší způsob, jak zobrazit oznámení prohlížeče

JavaScript Web Notification API umožňuje stolním i mobilním prohlížečům zobrazovat upozornění s vlastním obsahem. Ačkoli jeho podpora bývala značně nekonzistentní, API je nyní kompatibilní s většinou moderních prohlížečů a již vidíme, že je implementováno na mnoha webech a aplikacích.

V tomto článku vám ukážeme nejrychlejší způsob, jak nastavit upozornění prohlížeče pomocí open-source knihovny Push.js.

Nastavení projektu

Chceme vytvořit jednoduchou ukázkovou aplikaci, která požádá o povolení a poté odešle upozornění na kliknutí na tlačítko. Pro jednoduchost budeme pracovat v jediném index.html soubor s vloženými skripty. Úplný zdroj je k dispozici na GitHubu.

První věc, kterou musíme udělat, je zahrnout knihovnu. Push.js lze nainstalovat pomocí npm nebo místního souboru, ale nejjednodušší způsob, jak jej implementovat, je přes CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

Knihovna Push.js není pro práci s Web Notifications nezbytná, ale nabízí čisté API, se kterým je mnohem jednodušší pracovat ve srovnání s nativním Notification API. Push.js se postará o oprávnění, servisní pracovníky a nekonzistence napříč prohlížeči, takže my to dělat nemusíme.

Žádost o povolení

Než jim budeme moci posílat oznámení, musí nám udělit oprávnění. To se provádí pomocí vestavěného dialogového okna prohlížeče, které jste pravděpodobně již viděli:

Push.js automaticky požádá o povolení, když se pokusíme odeslat první oznámení. V mnoha případech se však chceme uživatele předem ručně zeptat:

Push.Permission.request();

Tím se otevře dialogové okno vestavěného prohlížeče s výzvou uživatelům, aby přijali nebo odmítli přijímat upozornění. Pokud již bylo oprávnění uděleno nebo odepřeno, výše uvedený kód bude ignorován.

Vytvoření oznámení

Pro zobrazení upozornění jednoduše zavoláme Push.create metoda, která očekává nadpis a volitelný objekt obsahující všechny druhy užitečných předvoleb a zpětných volání:

Push.create('Hi there!', {
    body: 'This is a notification.',
    icon: 'icon.png',
    timeout: 8000,               // Timeout before notification closes automatically.
    vibrate: [100, 100, 100],    // An array of vibration pulses for mobile devices.
    onClick: function() {
        // Callback for when the notification is clicked. 
        console.log(this);
    }  
});

Zde můžete vidět všechny dostupné možnosti.

V naší ukázce zobrazujeme upozornění na kliknutí na tlačítko, ale není vyžadována interakce uživatele – nová upozornění lze vytvořit kdykoli, včetně případů, kdy karta není právě aktivní.

Ujistěte se, že uživatele příliš neobtěžujete. Posílejte oznámení, pouze když je chcete informovat o něčem důležitém, jako je nová textová zpráva nebo nová žádost o přátelství.

Kompatibilita prohlížeče

Notification API je podporováno ve většině moderních prohlížečů. Chcete-li zjistit, zda to váš prohlížeč podporuje, zkuste spustit naši ukázkovou aplikaci. Mělo by to fungovat bez problémů v počítačích Chrome, Firefox a Safari a také v Chrome pro Android. Jediný oblíbený klient, který v tomto seznamu chybí, je iOS Safari, který neposkytuje žádnou formu webových upozornění.

Další důležitou věcí, kterou je třeba poznamenat, je, že aby se oznámení zobrazovala v systému Android, webová aplikace musí být hostována přes HTTPS.

Další čtení

Oznámení jsou relativně novým přírůstkem do světa prohlížečů, ale můžeme očekávat, že jich uvidíme stále více, zejména s tím, jak se progresivní webové aplikace stávají populárnějšími. Pokud se chcete dozvědět více o upozorněních v JavaScriptu, zde je několik skvělých zdrojů, které vám doporučujeme prohlédnout:

• Blogový příspěvek od tvůrce Push.js pojednávající o tom, proč vytvořil projekt a jaké má s ním budoucí plány – zde.
• Push API – úžasné nové rozhraní API, které uživatelům umožňuje přijímat oznámení, i když webová aplikace není otevřená – zde.
• Co je dobré oznámení? – Článek Google Developers o tom, jak vylepšit oznámení – zde.