Progressive Web Apps (PWAs) utilize modern web technologies to provide a mobile app-like experience on the web, including features like offline support and push notifications. Implementing PWAs involves using service workers, web app manifests, and caching techniques to enhance user experience and performance. They require HTTPS and support varies across browsers, emphasizing the importance of progressive enhancement.

1. PROGRESSIVE
WEB APPS
Jana Moudrá @Janamou +JanaMoudra

2. 25 mobile apps
used by average user
per month

3. Home screen
Caching
Notifications
...

4. Installation needed :-(

5. And the web?

6. Progressive Web Applications take
advantage of new technologies to
bring the best of mobile sites
and native applications to users
developers.google.com/web/progressive-web-apps/

7. Progressive Web Applications take
advantage of new technologies to
bring the best of mobile sites
and native applications to users
and developers
developers.google.com/web/progressive-web-apps/

8. Offline support
Push notifications
Home screen
Splash screen
...
Native app-like experience
on the web

9. PROGRESSIVE WEB APP
COMPONENTS

10. Application shell

11. Application shell

12. Content
Dynamic content

14. Service Worker

15. Service Worker
Server
Client
SW

16. HTTPS is a must

17. WHY
SHOULD I CARE?

18. 3s

19. 3s
Every second counts

20. Repeated visits
Service Worker

21. Repeated visits
UI without network
Content loaded progressively
Service Worker

24. JSON config
App appearance
App behaviour
Web App Manifest

25. {
"name": "My Super App",
"short_name": "Super App",
"icons": [{
...
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#536dfe"
}
manifest.json

26. Script
Has to be registered
HTTPS only
Service Worker

27. if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('my-service-worker.js')
.then(function () {
console.log('Hello Service Worker!');
});
}
Register

28. On install
self.addEventListener('install', function(e) {
console.log('Service Worker install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(urlsToCache);
});
);
}); my-service-worker.js

29. On fetch
self.addEventListener('fetch', function(e) {
console.log('Service Worker fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
});
);
}); my-service-worker.js

30. Limited
Cache API
IndexedDB API
Fetch API
Notification API
...
APIs

31. sw-precache
github.com/GoogleChrome/sw-precache
sw-toolbox
github.com/GoogleChrome/sw-toolbox
Manifest generator
brucelawson.github.io/manifest/
Tools

32. webexpo-demo.firebaseapp.com
DEMO

33. CAN
I USE?

34. Not in all browsers :-(
Progressive enhancement
Can I use Service Worker?

35. Can I use Service Worker?

36. To watch: jakearchibald.github.io/isserviceworkerready/
Can I use Service Worker?

37. pwa.rocks

38. EVERY
SECOND COUNTS
1.

39. PWAS
NATIVE APP EXPERIENCE
2.

40. APP SHELL & SW
YOUR FRIEND
3.

41. THANK YOU
YOUR QUESTIONS?
Jana Moudrá @Janamou +JanaMoudra

42. ● Andy Melton, cc, https://www.flickr.com/photos/87054972@N00/302498784/
● YMB Properties,
https://www.iconfinder.com/icons/374823/communication_computer_device_electronic_entertainment_mobile
_smartphone_icon#size=128
● Maurizio Pesce, cc, https://www.flickr.com/photos/30364433@N05/26600416562/
● Thomas Cloer, cc, https://www.flickr.com/photos/51035701919@N01/5772390548/
● Yutaka Seki, cc, https://www.flickr.com/photos/116451027@N08/28249984832
● https://developers.google.com/web/updates/2015/11/app-shell
● Jqpubliq, cc, https://www.flickr.com/photos/13515581@N00/16694762754/
● Peter Bronkalla, cc, https://www.flickr.com/photos/119931838@N08/28193513574/
● Gregor Cresnar,
https://www.iconfinder.com/icons/304602/apple_browser_computer_laptop_macbook_monitor_notebook_scre
en_web_icon
● Jerry Low, https://www.iconfinder.com/icons/286686/computers_servers_web_host_icon
Credits