Mobilní a desktopové aplikace

MVOP4 WBF

Bc. Matěj Cajthaml ©

Smíchovská střední průmyslová
škola a gymnázium

icon

Workery

Workery

  • snaží řešit problém jednoho vlákna JS
  • celá stránka se jde rozdělit na části, které mezi sebou komunikují
  • celý event loop je v jednom vlákně — service worker je vlastně další vlákno
  • worker je omezen: nemá přístup k DOM

Workery

  • existují dva typy:
    • dedikovaný
    • sdílený
  • dedikovaný worker je vytvořen pro jednu stránku
  • sdílený worker může být sdílen mezi více stránkami

Workery

  • vytvoříme pomocí konstruktoru new Worker()
  • komunikace pomocí postMessage()
  • odposlech pomocí message události

Workery

Použití workerů

  • výpočetně náročné operace
  • zpracování velkého množství dat
  • zpracování dat v reálném čase
  • a chceme komunikovat s UI

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í (podobné s webovým workerem)
  • 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

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.

Použití API

Práce

Najděte nějaké další webové API (např. Geolocation) a zkuste si je použít.

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

Práce

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.

Pluginy

  • bez použití pluginů máme vlastně jen web v mobilním obalu
  • pluginy nám dávají přístup k funkcím zařízení
  • např. fotoaparát, geolokace, souborový systém

Pluginy

Práce

Najděte nějaký plugin pro capacitor a zkuste si ho použít.

Sestavení

  • sestavení probíhá pro každou platformu jinak
  • většinou pomocí build systému či IDE
  • výsledkem je APK nebo obdoby
  • pro release je nutné podepsat, zapsat další informace

Electron

Electron

  • framework pro tvorbu desktopových aplikací
  • velmi používané
  • v budoucnosti nejspíše Tauri
  • pomocný systém/příkaz electron

Electron

  • dva základní procesy
  • hlavní proces: hlavní logika aplikace, komunikace s OS, Node.js
  • render proces: zobrazuje UI, běží v Chromium, obsahuje webview
  • komunikace → Inter Process Communication

Hlavní proces

Preload

Render proces

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.

Sestavení

  • sestavení probíhá pro každou platformu jinak
  • používáme např. electron-forge
  • výsledkem je spustitelný soubor

Děkuji za pozornost!

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