Mateusz Krzyżanowski: Jak wykorzystać Progressive Web App by nasza webowa aplikacja stała się czymś więcej niż zwykłą stroną internetową? Prezentacja będzie wprowadzeniem w możliwości i dobrodziejstwa jakie daje nam PWA. Porozmawiamy o tym jak zacząć i z jakich narzędzi korzystać.

1. WPROWADZENIE DO PROGRESSIVE WEB APP
BRING YOUR WEB APP TO THE NEXT LEVEL

2. 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

3. 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.”

4. BRING YOUR WEB APP TO THE NEXT LEVEL

5. BRING YOUR WEB APP TO THE NEXT LEVEL
CHARAKTERYSTYKA PWA
▸ niezawodność
▸ szybkość
▸ angażowanie

6. NIEZAWODNOŚĆ

7. BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ

8. BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ - PRZYKŁAD

9. BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ - PRZYKŁAD

10. BRING YOUR WEB APP TO THE NEXT LEVEL
NIEZAWODNOŚĆ - PRZYKŁAD

11. BRING YOUR WEB APP TO THE NEXT LEVEL
SZYBKOŚĆ
=

12. BRING YOUR WEB APP TO THE NEXT LEVEL
ANGAŻOWANIE

13. BRZMI CIEKAWIE?

14. JAK ZACZĄĆ?

15. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #1

16. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2
APP SHELL

17. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2 - PRZYKŁAD

18. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #2
CO JEŚLI NIE TWORZĘ APLIKACJI OD ZERA?

19. 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)

20. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3
SERVICE WORKERS

21. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3

22. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - STRATEGIE

23. 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);
});
});
}
...

24. 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);
})
);

25. 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;
});
});
})
);
});

26. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #3 - SERVICE WORKER W AKCJI

27. BRING YOUR WEB APP TO THE NEXT LEVEL
KROK #4
APP MANIFEST
<link rel="manifest" href="/manifest.json">

28. 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"
}

29. BRING YOUR WEB APP TO THE NEXT LEVEL

30. CZY MOŻEMY WIĘCEJ?

31. BRING YOUR WEB APP TO THE NEXT LEVEL
PUSH NOTIFICATIONS

32. BRING YOUR WEB APP TO THE NEXT LEVEL
PAYMENT REQUEST API

33. BRING YOUR WEB APP TO THE NEXT LEVEL
WIĘCEJ NA…
https://whatwebcando.today/

34. WSPARCIE

35. BRING YOUR WEB APP TO THE NEXT LEVEL
WSPARCIE
https://github.com/toxic-johann/is-pwa-ready

36. NARZĘDZIA

37. BRING YOUR WEB APP TO THE NEXT LEVEL
LIGHTHOUSE
https://developers.google.com/web/tools/lighthouse/

38. BIBLIOTEKI

39. BRING YOUR WEB APP TO THE NEXT LEVEL
SW-PRECACHE
https://github.com/GoogleChromeLabs/sw-precache

40. BRING YOUR WEB APP TO THE NEXT LEVEL
SW-TOOLBOX
https://github.com/GoogleChromeLabs/sw-toolbox

41. BRING YOUR WEB APP TO THE NEXT LEVEL
https://workboxjs.org/

42. CZY WARTO?

43. BRING YOUR WEB APP TO THE NEXT LEVEL

44. BRING YOUR WEB APP TO THE NEXT LEVEL

45. BRING YOUR WEB APP TO THE NEXT LEVEL
CZY WARTO?
WIĘCEJ
https://developers.google.com/web/showcase/2017/

46. BRING YOUR WEB APP TO THE NEXT LEVEL
CZY WARTO?
NADAL WĄTPLIWOŚCI?

47. BRING YOUR WEB APP TO THE NEXT LEVEL
CZY WARTO?

48. PODSUMOWANIE

49. BRING YOUR WEB APP TO THE NEXT LEVEL
PODSUMOWANIE
▸ https - app shell - service worker - manifest
▸ offline
▸ auto-aktualizacja
▸ szybkość
▸ oddziaływanie na użytkownika

50. 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

51. DZIĘKUJĘ ZA UWAGĘ

52. 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