meet.js Gdańsk 04.2016

Service worker i progresywne aplikacje sieciowe.

Transcript

2. Karol Klepacki
3. Service worker i przyjaciele, czyli po co Ci natywna apka?
6. Po to są aplikacje
7. Aplikacje - offline - powiadomienia push - synchronizacja w tle - dodanie do głównego ekranu
8. Chcesz zrobić aplikację? To bardzo proste, wystarczy, że...
9. - zainstalujesz i skonfigurujesz Phonegap - wybierzesz docelowe platformy kompilacji - wrzucisz stronę w WebView - dodasz kilka pluginów do obsługi offline - zbudujesz na wszystkie platformy - przetestujesz na symulatorze - pożyczysz od kolegi iPhone i od taty Windows Phone - owersjonujesz aplikację - podpiszesz buildy - wrzucasz do obu marketów Phonegap
10. Następnie… poproś użytkowników żeby skorzystali z aplikacji
11. ~20% ruchu odpada na każdym etapie Twojego lejka
12. CJK*? * (ang.) WTF
13. Dlaczego potrzebuję aplikacji żeby? - offline - powiadomienia push - synchronizacja w tle - dodanie do głównego ekranu
14. Progressive Web Apps Progresywne Aplikacje Sieciowe
18. To wszystko już jest! (w Chrome) service worker - Chrome 40 - 01.2015 cache API - Chrome 36 - 10.2015 background sync - Chrome 39 - 03.2016
19. service worker
20. service worker - co to jest? - programowalne proxy sieciowe - nie ma dostępu do DOM - będzie zapamiętany nawet po zamknięciu zakładki
21. uwaga, trochę kodu
23. Cykl życia
24. Strategie instalacji - kiedy zachować zasoby - Podczas instalacji - całość zasobów - uwaga, zaraz będzie kod tego - Podczas instalacji - część zasobów - Podczas interakcji użytkownika (konkretny zasób) … i wiele innych
26. Strategie przechwytywania - jak serwować zasoby - po prostu cache (np. statyczne zasoby) - zaraz będzie przykład - najpierw sieć, jak się nie uda to cache - cache, potem request (np. awatary)
28. dużo więcej... Jake Archibald - Offline Cookbook (nie notujcie, wszystko wrzucę na stronę wydarzenia)
29. Progressive Web Apps Progresywne Aplikacje Sieciowe
30. Uwaga, zaraz będzie konkurs
31. Dlaczego service worker wymaga HTTPS?
32. Dlaczego HTTPS? - zapewnia integralność witryny - zapewnia prywatność i bezpieczeństwo
33. Uwaga, zaraz znowu będzie konkurs
35. Dlaczego service worker jest wymagany aby dodać stronę do Home Screen?
36. Dlaczego sw? Ponieważ chcemy aby użytkownik wchodząc z ekranu domowego na stronę, otrzymywał bezzwłoczny wynik niezależnie od tego czy ma internet czy nie
37. Progressive Web Apps Progresywne Aplikacje Sieciowe
38. Progresywne Aplikacje Sieciowe muszą być: - progresywne :), - responsywne, - niezależne od połączenia, - appkopodobne, - bezpieczne, - linkowalne
39. Progresywne Aplikacje Sieciowe muszą być: - progresywne :), - responsywne, - niezależne od połączenia, - appkopodobne, - bezpieczne, - linkowalne
40. Czy service worker jest już gotowy?
41. https://jakearchibald.github.io/isserviceworkerready/
45. Co mi to właściwie da jak nie potrzebuję offline?
46. 5MB JPG
47. No dobra, chcę to, ale nie mam HTTPS!
48. No dobra, chcę to, ale nie mam HTTPS?
49. Co dalej? #1 napisz sobie sam
50. Co dalej? #2 skorzystaj z sw-precache
51. sw-precache - grunt / gulp task - buduje skrypt service workera Twojej aplikacji
52. Co dalej? #3 powiem na twitterze @kklepa
53. Dzięki! twitter: @kklepa credits: https://jakearchibald.com/2014/offline-cookbook/ https://jakearchibald.github.io/isserviceworkerready/ https://developers.google.com/web/progressive-web-apps http://www.html5rocks.com/en/tutorials/service-worker/introduction/