Progresivní weby 1

52. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Progresivní webové aplikace

Jaké jsou výhody a nevýhody webových stránek?

Jaké jsou výhody a nevýhody nativních aplikací na zařízeních?

Progresivní webové aplikace

  • PWA = progressive web app
  • bere výhody webových stránek a nativních aplikací
  • instalovatelné weby
  • návody

Je možné nainstalovat PWA na desktopu?

Funkcionality PWA

  • offline režim
  • rychlejší instalace
  • cache
  • notifikace a další

Manifest

  • k instalaci je nutné vytvořit app manifest
  • soubor manifest.json v kořenovém adresáři
  • obsahuje informace o aplikaci
  • nějaké informace jsou povinné pro instalaci

Manifest

Instalace

  • manifest — povinné údaje
  • HTTPS
  • uživatel musí být na stránce nějaký čas a interagovat s ní

  • zachycení události beforeinstallprompt
  • zobrazení dialogu pro instalaci pomocí prompt()

Instalace

Service worker

  • proces běžící na pozadí
  • komunikuje se servery a s PWA
  • umožňuje nastavovat:
    • co se stane při registraci
    • jak bude fungovat cache
    • jak budou fungovat navigace

Instalace sw

Stránka může mít více SWů. Lze je vidět v DevTools.

Ukázka HTML

Ukázka manifest

Ukázka service workeru

Cache

Práce

Zjistěte jak se pracuje s cache uvnitř service workerech. Zkuste si vytvořit vlastní stránku se SW a použijte cache.

Workbox

Práce

Zjistěte, co je to Workbox a jak se s ním pracuje.

Webové API pro PWA

Webové API

  • pro účely PWA existuje několik webových API
  • musí podporovat prohlížeč, v JS
  • seznam
  • např.:
    • Notifications API
    • Geolocation API
    • Fetch API
    • Cache API

Použití API

Práce

Najděte nějaké API a vyzkoušejte si jejich použití.

Notifikace

  • zobrazování notifikací
  • uživatel musí potvrdit
  • můžeme určit co se stane po kliknutí

Notifikace

Co kdybychom chtěli notifikace odesílat ze serveru?

Push API

  • umožňuje přijímat zprávy ze serveru
  • i když je prohlížeč zavřený

  • musíme při aktivaci SW zaregistrovat push listener
  • často nutné VAPID klíče

Stačí jen prohlížeč zaregistrovat k Push API? Jak pošleme data ze serveru?

HTML

Service worker

Odesílání ze serveru

Práce

Najděte knihovnu, pomocí které můžeme Push události na subscription posílat data ze serveru.

Co to je SSR?

Co to je SPA?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/