Ťuk, ťuk. -Kdo tam? -Prohlížeč, máte tu rekomando!

Dalším způsobem, jakým se vaše webová aplikace dnes může vyrovnat aplikacím desktopovým, jsou systémová upozornění. V článku vám představíme, jak je vytvářet a zasílat uživateli.

Tento text byl inspirován článek An Introduction to the Web Notifications API, jehož autorem je Aurelio De Rosa.

K čemu slouží Web Notifications?

Mezi řadou novinek, které přišly do prohlížečů v poledních letech, jsou i Web Notifications, tj. webová upozornění.

Stránky, resp. webové aplikace, kterým to uživatel povolí, mohou uživateli zaslat upozornění (notifikaci), která se objeví na systémové úrovni.

Příklad: Webový emailový klient běží na pozadí v prohlížeči (v minimalizovaném okně, v neaktivním tabu aj.) a uživatel se věnuje jiné práci. Když mu přijde nový e-mail, zobrazí se mu upozornění, které může vypadat jako jedno z těch na tomto obrázku:

notifikace

Pokud si chcete webová upozornění rovnou vyzkoušet, zobrazte si demo Web Notifications API.

Podpora v prohlížečích

Tak jste si upozornění vyzkoušeli a jistě vás zajímá, jak je to s podporou v prohlížečích. Není dost velká, pokud chcete pokrýt všechny uživatele, ale je dost velká na to, abyste webové notifikace začali brát v úvahu. Podpora ve Firefoxu, Chromu a Safari (jen v desktopových verzích) pokrývá hrubým odhadem více než polovinu uživatelů webu.

Dle webu status.modern.ie je zvažována podpora v příští verzi Internet Exploreru.

Jak to funguje?

Není to žádná velká věda. Základem  všeho je objekt Nofitication.

var notification = new Notification(
      "Honem",
      {
        body: "Napiš nový článek na Zdroják.",
        icon: "http://example.org/nejakaikona.png"
      }
    );
Prázdné okno s upozorněními prohlížeče Chrome

Prázdné okno s upozorněními prohlížeče Chrome

Získání povolení od uživatele

Jelikož systémová upozornění jsou prostor, který by měl mít pod kontrolou uživatel a ne vaše aplikace, musíte napřed požádat o povolení. To učiníte pomocí volání:

Notification.requestPermission(callback);

Pokud je funkce callback zavolána s argumentem granted, povolení jste dostali a vše je v pořádku.

Detekce podpory v prohlížečích

Detekci provedete otestováním výrazu "Notification" in window, pokud je pravdivý, prohlížeč webová upozornění podporuje.

Pozn.: Starší verze prohlížečů podporovaly verzi s vendor prefixy, ta ovšem měla nekompatibilní API (viz poznámka navigator.mozNotification), proto bude nejlepší, když verze prohlížečů podporující verzi s vendor prefixy budete ignorovat, podporujte pouze neprefixovanou verzi.

Parametry upozornění

Syntaxe volání konstruktoru upozornění je:

new Notification(title, options);

Kde title je nadpis upozornění a options je nepovinný JSON objekt, který může obsahovat volby body (řetězec s dalšími informacemi, tj. delší popisek upozornění), icon (URL obrázku, který se zobrazí u upozornění).

 Události upozornění

Upozornění je okno a to má své vlastní události, a sice

  • show – vyvolá se při úspěšném zobrazení upozornění
  • click – vyvolá se, když uživatel na upozornění klikne (tj. chce si přečíst e-mail, na který byl právě upozorněn)
  • close – vyvolá se, když uživatel upozornění zavře (tj. když si ten e-mail pro změnu přečíst nechce)

Příklad použití událostí najdete v dokumentaci.

Co se do článku nevešlo

Objekt options může volitelně obsahovat také parametry lang (může být vhodný pro hlasové čtečky, pokud budou se jím budou řídit při psaní textu) a tag (jeho použití najdete ve specifikaci).

Další informace

Vystudoval jsem biochemii. Vymyslel a založil Zdroják. Aktuálně ho vedu. Nejsem váš hodný tatínek, který vás bude brát za ručičku, ale zlý moderátor diskusí. Smiřte se s tím!

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 10

Přehled komentářů

gilhad nejdůležitější
Martin Hassman Re: nejdůležitější
gilhad Re: nejdůležitější
Petr Prchal
Martin Hassman Re:
voycz Re:
novoj HTML notifikace jsme použili jako doplněk k debugovací konzoli
Martin Hassman Re: HTML notifikace jsme použili jako doplněk k debugovací konzoli
Tomas Jurman Překlady
djmetla Prosím o radu
Zdroj: https://www.zdrojak.cz/?p=11934