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

13.
Service Worker

14.
Service Worker
Server
Client
SW

15.
HTTPS is a must

16.
WHY
SHOULD I CARE?

17.
3s

18.
3s
Every second counts

19.
Repeated visits
Service Worker

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

21.
JSON config
App appearance
App behaviour
Web App Manifest

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

23.
Script
Has to be registered
HTTPS only
Service Worker

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

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

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

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

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

29.
webexpo-demo.firebaseapp.com
DEMO

30.
CAN
I USE?

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

32.
Can I use Service Worker?

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

34.
pwa.rocks

35.
EVERY
SECOND COUNTS
1.

36.
PWAS
NATIVE APP EXPERIENCE
2.

37.
APP SHELL & SW
YOUR FRIEND
3.

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

39.
● 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