Download to read offline
![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);
})
);](https://image.slidesharecdn.com/bringyourwebapptothenextlevel-171013110457/85/Bring-Your-Web-App-to-the-Next-Level-Wprowadzenie-do-Progressive-Web-App-24-320.jpg)
![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"
}](https://image.slidesharecdn.com/bringyourwebapptothenextlevel-171013110457/85/Bring-Your-Web-App-to-the-Next-Level-Wprowadzenie-do-Progressive-Web-App-28-320.jpg)
Uploaded byThe Software House
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
The document provides an introduction to Progressive Web Apps (PWAs), highlighting their potential to enhance web applications through characteristics like reliability, speed, and engagement. It outlines the steps to create a PWA, including the use of service workers and app manifests, along with examples and strategies. Additional resources and tools for PWAs are also mentioned, emphasizing the benefits of implementing these technologies.
More Related Content
Similar to Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
- 1. WPROWADZENIE DO PROGRESSIVEWEB APP BRING YOUR WEB APP TO THE NEXT LEVEL
- 2. BRING YOUR WEBAPP 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
- 3. BRING YOUR WEBAPP TO THE NEXT LEVEL ALE O CO CHODZI? ”A Progressive Web App uses modern web capabilities to deliver an app-like user experience.”
- 4. BRING YOUR WEBAPP TO THE NEXT LEVEL
- 5. BRING YOUR WEBAPP TO THE NEXT LEVEL CHARAKTERYSTYKA PWA ▸ niezawodność ▸ szybkość ▸ angażowanie
- 6.
- 7. BRING YOUR WEBAPP TO THE NEXT LEVEL NIEZAWODNOŚĆ
- 8. BRING YOUR WEBAPP TO THE NEXT LEVEL NIEZAWODNOŚĆ - PRZYKŁAD
- 9. BRING YOUR WEBAPP TO THE NEXT LEVEL NIEZAWODNOŚĆ - PRZYKŁAD
- 10. BRING YOUR WEBAPP TO THE NEXT LEVEL NIEZAWODNOŚĆ - PRZYKŁAD
- 11. BRING YOUR WEBAPP TO THE NEXT LEVEL SZYBKOŚĆ =
- 12. BRING YOUR WEBAPP TO THE NEXT LEVEL ANGAŻOWANIE
- 13.
- 14.
- 15. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #1
- 16. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #2 APP SHELL
- 17. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #2 - PRZYKŁAD
- 18. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #2 CO JEŚLI NIE TWORZĘ APLIKACJI OD ZERA?
- 19. BRING YOUR WEBAPP 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)
- 20. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #3 SERVICE WORKERS
- 21. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #3
- 22. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #3 - STRATEGIE
- 23. BRING YOUR WEBAPP 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); }); }); } ...
- 24. BRING YOUR WEBAPP 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); }) );
- 25. BRING YOUR WEBAPP 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; }); }); }) ); });
- 26. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #3 - SERVICE WORKER W AKCJI
- 27. BRING YOUR WEBAPP TO THE NEXT LEVEL KROK #4 APP MANIFEST <link rel="manifest" href="/manifest.json">
- 28. BRING YOUR WEBAPP 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" }
- 29. BRING YOUR WEBAPP TO THE NEXT LEVEL
- 30.
- 31. BRING YOUR WEBAPP TO THE NEXT LEVEL PUSH NOTIFICATIONS
- 32. BRING YOUR WEBAPP TO THE NEXT LEVEL PAYMENT REQUEST API
- 33. BRING YOUR WEBAPP TO THE NEXT LEVEL WIĘCEJ NA… https://whatwebcando.today/
- 34.
- 35. BRING YOUR WEBAPP TO THE NEXT LEVEL WSPARCIE https://github.com/toxic-johann/is-pwa-ready
- 36.
- 37. BRING YOUR WEBAPP TO THE NEXT LEVEL LIGHTHOUSE https://developers.google.com/web/tools/lighthouse/
- 38.
- 39. BRING YOUR WEBAPP TO THE NEXT LEVEL SW-PRECACHE https://github.com/GoogleChromeLabs/sw-precache
- 40. BRING YOUR WEBAPP TO THE NEXT LEVEL SW-TOOLBOX https://github.com/GoogleChromeLabs/sw-toolbox
- 41. BRING YOUR WEBAPP TO THE NEXT LEVEL https://workboxjs.org/
- 42.
- 43. BRING YOUR WEBAPP TO THE NEXT LEVEL
- 44. BRING YOUR WEBAPP TO THE NEXT LEVEL
- 45. BRING YOUR WEBAPP TO THE NEXT LEVEL CZY WARTO? WIĘCEJ https://developers.google.com/web/showcase/2017/
- 46. BRING YOUR WEBAPP TO THE NEXT LEVEL CZY WARTO? NADAL WĄTPLIWOŚCI?
- 47. BRING YOUR WEBAPP TO THE NEXT LEVEL CZY WARTO?
- 48.
- 49. BRING YOUR WEBAPP TO THE NEXT LEVEL PODSUMOWANIE ▸ https - app shell - service worker - manifest ▸ offline ▸ auto-aktualizacja ▸ szybkość ▸ oddziaływanie na użytkownika
- 50. BRING YOUR WEBAPP 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
- 51.
- 52.