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:

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

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

• An Introduction to the Web Notifications API
• Specifikace u W3C (aktuálně jako Working Draft)
• DEMO
• Dokumentace na Mozilla Developer Network
• Dokumentace prohlížeče Chrome