PWA – Progressive Web Apps

jest to zestaw dodatków których nie możesz dodać do każdej aplikacji

  • collection of technologies and techniques

you progressively enhance your existing web pages to feel and work more like native mobile apps

  • working if you’re offline – offline accessibility
  • icon on homescreen
  • push notifications
  • background sync
  • access device camera
  • get user location

 

  • be reliable: load fast and provide offline functionality
  • fast: respond quickly to user actions
  • engaging: feel like a native app on mobile device

Core building blocks

  • service Workers – are javascript running in a background process, even if app is close, they allow us to get offline access to cache some files and serve them if we don’t have internet connection, and give access to over progressive Web related features (like backgroud synchronization sending a request once internet connection is re-established), Web push (notifications), for data
  • aplication manifest – allows addition to Homescreen
  • responsive design
  • geolocalization API – access user location
  • Media API – access device camera and microphone

 

PWA & SPA (Single Page Application)

SPA – web application powered by JS, created with a framework like React, Angular, Vue, where the framework really  renders the DOM all the time to react to user input

  • powered by JS
  • highly  reactive
  • only ome HTML file send to browser

PAW

  • use JS but works without it
  • high reactive, focusing more on the initial loading time
  • works with multiple files

SPA can become PWA but also any other page/app can turn into a PWA.

 

Progressive Enhancement

 

Manifest.json

jakie przeglądarki wspierają manifest

wzór manifestu

  • name – pełna nazwa aplikacji
  • short_name – skrócona nazwa aplikacji
  • description – opis
  • „start_url” : „/index.html” – wskazuje na stronę która ma się otworzyć jako pierwsza
  • „scope” : „.” – dostęp do całej strony lub tylko części, które strony są dodane do PWA
  • „display” : „standalone”
    • standalone – wygląd normalnej aplikacji, bez kontrolek przeglądarki (paska url)
    • fullscreen – nie ma pokazanych kontrolek
    • browser – wygląda jak strona w przeglądarce
    • minimal-ui – zredukowana ilość kontrolek względem standalone
  • „background-color” : „red” – kolor screenu zanim załaduje się aplikacja i splashscreen (screen ładowania)
  • „theme_color” : „orange” – kontrolki, tool bar, task switcher
  • „dir” : „ltr” – kierunek czytania
  • „lang” : „en-US”  – główny język appki
  • „orientation” : „portrait-primary”
    • „any”
    • portrait
    • landscape
    • portrait-primary – otwiera się w widoku portrait
  • „icons” : [{„src” : „/../”, „type” : „image/png”, „sizes” : „48×48”}, {}] – zestaw ikon
  • „related_applications” : [{„platform”: „play”, „url” : „https…”, „id” : „”}, {}] – linki do natywnych aplikacji które mogą być podobne dotworzonej

 

Dodanie instalacji ikony na homescreen

https://developers.google.com/web/fundamentals/web-app-manifest/

https://developers.google.com/web/fundamentals/app-install-banners/

 

Android studio – emulacja na telefonie

https://developer.android.com/studio/

https://developer.android.com/studio/run/managing-avds

 

Uruchamianie na IOS

w head dodajemy meta i link dzięki któremu przeglądarka ios traktuje stronę jak web aplikację


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PWAGram">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-57x57.png" sizes="57x57">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-144x144.png" sizes="144x144">

Uruchomienie pod IE

w head dodajemy meta dzięki któremu przeglądarka ie traktuje stronę jak web aplikację


<meta name="msapplication-TileImage" content="/src/images/icons/app-icon-144x144.png">
<meta name="msapplication-TileColor" content="#cf000f">
<meta name="theme-color" content="#f9b42d">

 

ServiceWorkers

 

#PWA