Progresivní weby

MVOP WBF

Bc. 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?

Weby se používají v PWA, na mobilech a i na desktopu. Jak je to možné? Proč se tak stalo?

Moderní způsob tvorby aplikace

  • klient (prohlížeč/vykreslovač) je chytrý a závislý na serveru
  • server slouží jen na poskytnutí dat a logiky
  • klient je často jen obalená webová stránka

PWA často nevyřeší všechny věci, které potřebujeme. Např. in-app fotografie či přístup k filesystému.

Frameworky nám tedy dávají přístup k dalším funkcionalitám systému.

Frameworky

  • obecně spousta knihoven
  • různé platformy a OS

  • React Native
  • Flutter
  • Capacitor/Ionic
  • Cordova
  • Tauri
  • Electron

Capacitor

Capacitor

  • relativně nový framework
  • hlavním cílem jsou mobilní aplikace

Capacitor se často používá s Ionic Frameworkem, jaký je mezi nimi vztah?

Jak se vůbec může HTML (+ CSS, JS) zkonvertovat např. na Android?

Capacitor

  • náš webový kód synchronizujeme do projektů pro různé platformy
  • používáme stejný kód pro všechny platformy
  • capacitor nám generuje projekt a kód
  • daný projekt pro platformu poté upravujeme a kompilujeme

Capacitor

Práce

Založíme si capacitor projekt.

Electron

Electron

  • framework pro tvorbu desktopových aplikací
  • velmi používané

Electron

Práce

Založíme si electron projekt.

Souborový systém

Práce

Pomocí electronu vytvořte aplikaci, které bude umět spravovat souborový systém.

Děkuji za pozornost!

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