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
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 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 #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
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
CZY WARTO?
WIĘCEJ https://developers.google.com/web/showcase/2017/
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
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
Top Related