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
Hope this helps and happy coding :)
Zobacz jeszcze
React podstawy
React blured separation of concerns style within component bug easy to locate -in one file self contained component rules: create JS Object - properties and values of this object will be...