PWA – Progressive Web Apps

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

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

 

Core building blocks

 

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

PAW

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

 

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

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.