Embed Size (px)
Citation preview
WPROWADZENIE DO PROGRESSIVE WEB APP
BRING YOUR WEB APP TO THE NEXT LEVEL
BRING YOUR WEB APP TO THE NEXT LEVEL
„Progressive Web Apps are the future of all mankind. They’ll bring world peace, end hunger, save the rainbows and unicorns, bring balance to
the force, and a whole lot more”
ionic blog
BRING YOUR WEB APP TO THE NEXT LEVEL
ALE O CO CHODZI?
”A Progressive Web App uses modern web capabilities to deliver an app-like user experience.”
BRING YOUR WEB APP TO THE NEXT LEVEL
BRING YOUR WEB APP TO THE NEXT LEVEL
CHARAKTERYSTYKA PWA
▸ niezawodność
▸ szybkość
▸ angażowanie
NIEZAWODNOŚĆ
BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ
BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ - PRZYKŁAD
BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ - PRZYKŁAD
BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ - PRZYKŁAD
BRING YOUR WEB APP TO THE NEXT LEVEL
SZYBKOŚĆ
=
BRING YOUR WEB APP TO THE NEXT LEVEL
ANGAŻOWANIE
BRZMI CIEKAWIE?
JAK ZACZĄĆ?
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #1
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2
APP SHELL
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2 - PRZYKŁAD
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2
CO JEŚLI NIE TWORZĘ APLIKACJI OD ZERA?
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2 - MIGRACJA
▸ kompresja (style, grafika…)
▸ optymalizacja (usunięcie zbędnego kodu, unikanie blokującego kodu…)
▸ podzielenie dużych plików js na mniejsze (np. dynamic imports)
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3
SERVICE WORKERS
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - STRATEGIE
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - SERVICE WORKER W AKCJI
... if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) {
// Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) {
// registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } ...
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - SERVICE WORKER W AKCJI
... const VERSION = 'v1'; const urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ];
self.addEventListener('install', function(event) {
// Perform install steps event.waitUntil( caches.open(VERSION) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) );
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - SERVICE WORKER W AKCJI
self.addEventListener('fetch', function(event) { event.respondWith( caches.open('mysite-dynamic').then(function(cache) { return cache.match(event.request).then(function (response) { return response || fetch(event.request).then(function(response) { cache.put(event.request, response.clone()); return response; }); }); }) ); });
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - SERVICE WORKER W AKCJI
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #4
APP MANIFEST<link rel="manifest" href="/manifest.json">
BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #4 - APP MANIFEST PRZYKŁAD{ "name": "My test application", "short_name": "My app", "icons": [ { "src": "/assets/icons/favicon-32x32.png", "sizes": "32x32", "type": "image/png" }, { "src": "/assets/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" } ], "background_color": "#ffa500", "theme_color": "#ffffff”, "orientation": "portrait”, "display": "standalone", "start_url": "/index.html" }
BRING YOUR WEB APP TO THE NEXT LEVEL
CZY MOŻEMY WIĘCEJ?
BRING YOUR WEB APP TO THE NEXT LEVEL
PUSH NOTIFICATIONS
BRING YOUR WEB APP TO THE NEXT LEVEL
PAYMENT REQUEST API
BRING YOUR WEB APP TO THE NEXT LEVEL
WIĘCEJ NA…
https://whatwebcando.today/
WSPARCIE
BRING YOUR WEB APP TO THE NEXT LEVEL
WSPARCIE
https://github.com/toxic-johann/is-pwa-ready
NARZĘDZIA
BRING YOUR WEB APP TO THE NEXT LEVEL
LIGHTHOUSE
https://developers.google.com/web/tools/lighthouse/
BIBLIOTEKI
BRING YOUR WEB APP TO THE NEXT LEVEL
SW-PRECACHEhttps://github.com/GoogleChromeLabs/sw-precache
BRING YOUR WEB APP TO THE NEXT LEVEL
SW-TOOLBOXhttps://github.com/GoogleChromeLabs/sw-toolbox
BRING YOUR WEB APP TO THE NEXT LEVEL
https://workboxjs.org/
CZY WARTO?
BRING YOUR WEB APP TO THE NEXT LEVEL
BRING YOUR WEB APP TO THE NEXT LEVEL
BRING YOUR WEB APP TO THE NEXT LEVEL
CZY WARTO?
WIĘCEJ https://developers.google.com/web/showcase/2017/
BRING YOUR WEB APP TO THE NEXT LEVEL
CZY WARTO?
NADAL WĄTPLIWOŚCI?
BRING YOUR WEB APP TO THE NEXT LEVEL
CZY WARTO?
PODSUMOWANIE
BRING YOUR WEB APP TO THE NEXT LEVEL
PODSUMOWANIE
▸ https - app shell - service worker - manifest
▸ offline
▸ auto-aktualizacja
▸ szybkość
▸ oddziaływanie na użytkownika
BRING YOUR WEB APP TO THE NEXT LEVEL
PRZYDATNE LINKI
https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures
https://jakearchibald.com/2014/offline-cookbook/#serving-suggestions-responding-to-requests
https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
https://www.youtube.com/watch?v=KRSTpo6gqqU
https://www.youtube.com/watch?v=eodArdGRIVQ
https://www.youtube.com/watch?v=zuGE3eFQD9I
DZIĘKUJĘ ZA UWAGĘ
https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png
https://goo.gl/images/D9SrrB
https://goo.gl/images/rDMDVA
https://framework.realtime.co/demo/web-push/img/push2.gif
https://developers.google.com/web/fundamentals/app-install-banners/images/add-to-home-screen.gif
https://developers.google.com/web/fundamentals/architecture/images/appshell.png
https://github.com/pinterest/service-workers
https://developers.google.com/web/updates/images/2015/10/splashscreen.gif
https://img.washingtonpost.com/pbox.php?url=https://www.washingtonpost.com/pr/wp-content/uploads/2016/09/WP_PWA_side-by-side-NEW-HIRES.gif&op=noop
https://developers.google.com/web/fundamentals/codelabs/payment-request-api/img/cbaccf9170087d2c.png
Materiały
