PROGRESSIVE
WEB APPS
Jana Moudrá @Janamou +JanaMoudra

25 mobile apps
used by average user
per month

Home screen
Caching
Notifications
...

Installation needed :-(

And the web?

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/

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/

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

PROGRESSIVE WEB APP
COMPONENTS

Application shell

Application shell

Content
Dynamic content

Service Worker

Service Worker
Server
Client
SW

HTTPS is a must

WHY
SHOULD I CARE?

3s

3s
Every second counts

Repeated visits
Service Worker

Repeated visits
UI without network
Content loaded progressively
Service Worker

JSON config
App appearance
App behaviour
Web App Manifest

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

Script
Has to be registered
HTTPS only
Service Worker

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

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

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

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

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

webexpo-demo.firebaseapp.com
DEMO

CAN
I USE?

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

Can I use Service Worker?

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

pwa.rocks

EVERY
SECOND COUNTS
1.

PWAS
NATIVE APP EXPERIENCE
2.

APP SHELL & SW
YOUR FRIEND
3.

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

● 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