![Page 1: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/1.jpg)
The Technology Behind Progressive Web AppsService Workers in Detail
Erik [email protected]
24.01.2018
@baqendcom
![Page 2: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/2.jpg)
What we are going to cover.
PWA Service Worker Speed Kit
Core FeaturesBuilding BlocksImplementation
LifecycleNetwork Interception
Caching Strategyetc.
Cache CoherencePerformance-
Measures
![Page 3: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/3.jpg)
Why do(n‘t) we love native apps?
Weak.Great.
On HomescreenIn App StoresLoading FastWork OfflineUse Phone APIsReceive Push Notifications
Need InstallationNot Cross PlatformTedious Realse and Update ProcessesMaintaining Multiple Versions
Progressive Web Apps
seek to combine the great from native and web apps
![Page 4: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/4.jpg)
What are ProgessiveWeb Apps?
![Page 5: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/5.jpg)
Progressive Web Apps (PWAs)
Fast Loadsthrough Caching
Offline Mode (Synchronization)
Add-to-Homescreenand Push Notifations
+ +
![Page 6: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/6.jpg)
Try this:
www.baqend.com
![Page 7: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/7.jpg)
Building Blocks of PWAs
1. Manifest 2. Service Worker
• PWAs are best practicesand open web standards
• Progessively enhancewhen supported
![Page 8: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/8.jpg)
Implementing PWAs
<link rel="manifest" href="/manifest.json">{
"short_name": "Codetalks PWA","icons": [{"src": "icon-1x.png", "type": "image/png", "sizes": "48x48"}],
"start_url": "index.html?launcher=true"}
1. Manifest declares Add-to-Homescreen:
• PWAs are best practicesand open web standards
• Progessively enhancewhen supported
![Page 9: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/9.jpg)
Implementing PWAs
2. Service Workers for caching & offline mode:
• PWAs are best practicesand open web standards
• Gracefully degrade whennot supported
CacheSW.js
WebsiteWebApp
Network
![Page 10: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/10.jpg)
Implementing PWAs
3. Add Web Push and Background Sync:
• PWAs are best practicesand open web standards
• Progressively enhance theuser experience
SyncSW.js
WebsiteWebApp
Network
Push
![Page 11: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/11.jpg)
Typical Architecture: App Shell Model
App Shell: HTML, JS, CSS, imageswith app logic & layout
Content: Fetched on demand & may changemore often
![Page 12: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/12.jpg)
Why PWAs over AMP & Instant Articles?
IndependentTechnology
Work acrossDevices
No Restrictionson Development
What is the future ofProgessive Web Apps?
![Page 13: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/13.jpg)
The Future of PWAs is bright.
Payment Request API
• Goal: replace traditional checkout forms
• Just ~10 LOC to implementpayment
• Vendor- & Browser-Agnostic
![Page 14: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/14.jpg)
The Future of PWAs is bright.
Credentials Management API
1. Click Sign-in → Native Account Chooser
2. Credentials API storesinformation for future use
3. Automatic Sign-in afterwards
![Page 15: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/15.jpg)
The Future of PWAs is bright.
Web Speech API
Native Speech Recognition in theBrowser:
annyang.addCommands({'Hello Code.talks': () => {
console.log('Hello you.');}
});
![Page 16: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/16.jpg)
The Future of PWAs is bright.
Web Share API
• Share site through native share sheet UI
• Service Worker canregister as a Share Target
![Page 17: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/17.jpg)
What are Service Workers?
![Page 18: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/18.jpg)
What are Service Workers?
NetworkService WorkerBrowser Tabs
Programmable Network Proxy, running as a separate Background Process, without any DOM Access.
![Page 19: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/19.jpg)
What do Service Workers do?
NetworkService WorkerBrowser Tabs
• Cache Data (CacheStorage)• Store Data (IndexedDB)
• Receive Push• Respond when Offline
![Page 20: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/20.jpg)
What do Service Workers do?
NetworkService WorkerBrowser Tabs
• Intercept HTTP Requests• Sync Data in Background
• Hide Flaky Connectivity from the User
![Page 21: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/21.jpg)
Browser Support for Service Workers
Supported by 75% of browsers.
Requires TLS Encryption.
![Page 22: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/22.jpg)
Browser Support for Service Workers
Safari: In DevelopmentEdge: Implemented, but Toggled
![Page 23: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/23.jpg)
How are Service Workers registered?
<script>navigator.serviceWorker.register('/sw.js');
</script>
NetworkService WorkerBrowser Tabs
![Page 24: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/24.jpg)
How does the Lifecycle look like?
self.addEventListener('install', (event) => {// Perform install steps
});
self.addEventListener('activate', (event) => {// Perform activate steps
});
self.addEventListener('fetch', (event) => {// React to fetch event
});
![Page 25: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/25.jpg)
How to Communicate with Service Workers?
// Send message to browser tabconst client = await clients.get('id');client.postMessage(someJsonData);
self.addEventListener('push', (event) => {// Receive push notification
});
Fetch, Message, Push
Post Message
Browser Tab
(Web) Push Service
Push Notification
self.addEventListener('message', (event) => {// Receive message push
});
![Page 26: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/26.jpg)
Intercepting Network Requests
self.addEventListener('fetch', (event) => {// React to fetch eventconst { url } = event.request;event.respondWith((async () => {const request = new Request(url.replace('.com', '.de'))const response = await fetch(request);const text = await response.text();const newText = text.replace('Goethe', 'Schiller');return new Response(newText, { status: 200 });
})());});
There is so much you can do:
• Rewrite Request• Change Response• Concat Responses• Cache Responses• Serve Cached Data• …
![Page 27: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/27.jpg)
Service Worker Scope
Request in Scope
Request not in Scope
// Default (and maximum) scope is location of Service Worker// Gets all requests starting with '/path/'navigator.serviceWorker.register('/path/sw.js');
Scope determines which requests go to Service Worker
![Page 28: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/28.jpg)
Service Worker Scope
Request in Scope
Request not in Scope
// Scope option can further limit which requests got to Service Worker// Gets all requests starting with '/path/subpath/'navigator.serviceWorker.register('/path/sw.js', { scope: '/path/subpath/' });
// Widening the scope is NOT ALLOWED// unless explicitly allowed by HTTP header 'Service-Worker-Allowed: /'// Gets all requests from the domainnavigator.serviceWorker.register('/path/sw.js', { scope: '/' });
![Page 29: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/29.jpg)
Service Worker Persistence
• Stores Data Persistently• Stores Structured Data
IndexedDBan actual database in the browser
• Supports Range Queries• Browser Support 94%
![Page 30: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/30.jpg)
Service Worker Background Sync
One-off Sync
// Register a sync at the Service Workerregistration.sync.register('keyword')
// React to sync event in Service Workerself.addEventListener('sync', (event) => {if (event.tag == 'keyword') }event.waitUntil(...);
}});
One-off Sync is• executed when user is online• retried when failed (exponential backoff)
Example Use Cases• Save file when online again• Send email when online again
Experimental
![Page 31: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/31.jpg)
Service Worker Background Sync
Periodic Sync
// Registers a periodic sync registration.periodicSync.register(options)
// Execute periodic sync in Service Workerself.addEventListener('periodicsync', (event) => {if (event.registration.tag == 'keyword') {
event.waitUntil(...);}
});
Periodic Sync is• executed when online, according to
period options• retried when failed
Example Use Case• Load updates to social media timeline
when browser closed
Experimental
![Page 32: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/32.jpg)
Service Worker Debugging
![Page 33: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/33.jpg)
Service Worker Caching
Cache StorageStores Request/Response pairs
// Putting Request/Response pair in cacheconst cache = await caches.open('name');cache.put(request, response);
// Retrieving Response from cacheconst response = await caches.match(request);return response || fetch(request);
Cache Storage• Programmatically managed• Persistent and non-expiring• Supports only HTTP• Only caches GET requests (no HEAD)
![Page 34: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/34.jpg)
How Resources get into the Cache
// Cache resource when fetchedself.addEventListener('fetch', (event) => {event.respondWith((async () => {const cache = await caches.open('name');const response = await fetch(request);await cache.put(request, response.clone());return response;
})());});
// Cache resources as install dependencyconst urlsToCache = ['index.html', 'style.css', 'app.js' ];
self.addEventListener('install', (event) => {event.waitUntil((async () => {const cache = await caches.open('name');await cache.addAll(urlsToCache);
})());});
![Page 35: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/35.jpg)
Caching Strategies – Cache Only
// Serve cached Responseself.addEventListener('fetch', (event) => {event.respondWith(caches.match(event.request)
);});
Cache only strategy gets all requests from cache or fails.
• Fast responses (or none)• Only for pre-cached requests• Only for static resources• Needs asset hashing or versioning of
cache
![Page 36: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/36.jpg)
Caching Strategies – Cache, Network Fallback
// Serve cached Response or fallback to networkself.addEventListener('fetch', (event) => {event.respondWith(async () => {const response = await caches.match(request);return response || fetch(request);
});});
This strategy gets request from cache and from network as fallback.
• Fast responses for cached resources, slow for others
• Only for static resources cacheable• Needs asset hashing or versioning
of cache
Fallback
![Page 37: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/37.jpg)
Caching Strategies – Network Only
// Serve everything from networkself.addEventListener('fetch', (event) => {event.respondWith(async () => {return fetch(request)
});});
This strategy gets request from network only.
• Slow responses• Always up-to-date
Fallback
![Page 38: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/38.jpg)
Caching Strategies – Network, Cache Fallback
// Serve network Response or fallback to cacheself.addEventListener('fetch', (event) => {event.respondWith(fetch(event.request).catch(function() {return caches.match(event.request);
});});
This strategy gets request from network and from cache as fallback.
• Slow responses from network• Effectively offline mode (better use
navigator.onLine)
Fallback
![Page 39: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/39.jpg)
Caching Strategies – Cache, then Network
// Idea:// Serve resource from cache// In the background:// * fetch resource from network// * send new response to browser// * apply changes to DOM or ask user to reload the page
This strategy gets requests from cache first and from network in background.
• Fast initial response• Uses a lot of bandwidth• Used for static app shell or message
inboxes
First
Second
![Page 40: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/40.jpg)
Major Challenge: Cache Coherence
OutdatedOutdated
All caching strategies either serve outdated data or degrade performance
![Page 41: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/41.jpg)
What we do withService Workers
![Page 42: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/42.jpg)
Speed KitTurning Websites into Instantly-Loading
Progressive Web Apps
![Page 43: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/43.jpg)
Faster
More Scalable
What Speed Kit does.
![Page 44: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/44.jpg)
1 0 11 0 0 10
What Speed Kit does.
![Page 45: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/45.jpg)
1 0 11 0 0 10
What Speed Kit does.
F. Gessert, F. Bücklers, und N. Ritter, „ORESTES: a Scalable Database-as-a-Service Architecture for Low Latency“, in CloudDB 2014, 2014.
F. Gessert und F. Bücklers, „ORESTES: ein System für horizontal skalierbaren Zugriff auf Cloud-Datenbanken“, in Informatiktage 2013, 2013.
F. Gessert, S. Friedrich, W. Wingerath, M. Schaarschmidt, und N. Ritter, „Towards a Scalable and Unified REST API for Cloud Data Stores“, in 44. Jahrestagung der GI, Bd. 232, S. 723–734.
F. Gessert, M. Schaarschmidt, W. Wingerath, S. Friedrich, und N. Ritter, „The Cache Sketch: Revisiting Expiration-based Caching in the Age of Cloud Data Management“, in BTW 2015.
F. Gessert und F. Bücklers, Performanz- und Reaktivitätssteigerung von OODBMS vermittels der Web-Caching-Hierarchie. Bachelorarbeit, 2010.
F. Gessert und F. Bücklers, Kohärentes Web-Caching von Datenbankobjekten im Cloud Computing. Masterarbeit 2012.
W. Wingerath, S. Friedrich, und F. Gessert, „Who Watches the Watchmen? On the Lack of Validation in NoSQL Benchmarking“, in BTW 2015.
M. Schaarschmidt, F. Gessert, und N. Ritter, „Towards Automated PolyglotPersistence“, in BTW 2015.
S. Friedrich, W. Wingerath, F. Gessert, und N. Ritter, „NoSQL OLTP Benchmarking: A Survey“, in 44. Jahrestagung der Gesellschaft für Informatik, 2014, Bd. 232, S. 693–704.
F. Gessert, „Skalierbare NoSQL- und Cloud-Datenbanken in Forschung und Praxis“, BTW 2015
F. Gessert, N. Ritter „Scalable Data Management: NoSQL Data Stores in Research and Practice“, 32nd IEEE International Conference on Data Engineering, ICDE, 2016
W. Wingerath, F. Gessert, S. Friedrich, N. Ritter „Real-time stream processing for Big Data“, Big Data Analytics it - Information Technology, 2016
F. Gessert, W. Wingerath, S. Friedrich, N. Ritter “NoSQL Database Systems: A Survey and Decision Guidance”, Computer Science - Research and Development, 2016
F. Gessert, N. Ritter „Polyglot Persistence“, Datenbank Spektrum, 2016.
Backed by30 Man-Years of Research
![Page 46: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/46.jpg)
1 4 020
purge(obj)
hashB(oid)hashA(oid)
31 1 110Flat(Counting Bloomfilter)
hashB(oid)hashA(oid)
BrowserCache
CDN
1
𝑓 ≈ 1 − 𝑒−𝑘𝑛𝑚
𝑘
𝑘 = ln 2 ⋅ (𝑛
𝑚)
False-Positive
Rate:
Hash-
Functions:
With 20.000 entries and a 5% false positive rate: 11 Kbyte
Consistency: Δ-Atomicity, Read-Your-Writes, Monotonic Reads,
Monotonic Writes, Causal Consistency
Has Time-to-Live (expiration)
How Speed Kit solves Cache Coherence
![Page 47: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/47.jpg)
Adding Speed Kit to a Site
![Page 48: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/48.jpg)
1. Configure Domain
Set which URLs Baqendshould accelerate.
![Page 49: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/49.jpg)
2. Include Code Snippet
Add the Speed Kit Service Worker to the website.
![Page 50: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/50.jpg)
3. Requests Accelerated
Speed Kit routes the requeststhrough Baqend‘s caches.
![Page 51: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/51.jpg)
How it works under the hood
Website withSnippet
Speed KitService Worker
Requests
BaqendService
ExistingBackend
Fast Requests
PushPull
3rd PartyServices
![Page 52: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/52.jpg)
Demo
![Page 53: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/53.jpg)
Now, we have a PWA, HTTP/2, CDNs, etc.
How do we measureweb performance?
![Page 54: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/54.jpg)
![Page 55: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/55.jpg)
Measuring Web Performance
TTFBDOMContent
LoadedFully Loaded
Last Visual Change
First byte receivedDOM constructed,no CSS blocks JSNo visual changesEven asynchronousJS has completed
![Page 56: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/56.jpg)
Measuring Web Performance
TTFBDOMContent
LoadedFully Loaded
Last Visual Change
Even asynchronousJS has completed
How can we measure user-perceived performance?
![Page 57: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/57.jpg)
The Speed Index
Time
VCVisual Completeness
0
1
0 0.1s 0.2s 0.3s 0.4s 0.5s
න0
∞
1 − 𝑉𝐶 𝑡 𝑑𝑡
![Page 58: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/58.jpg)
The First Meaningful Paint
Time
VCVisual Completeness
0
1
0 0.1s 0.2s 0.3s 0.4s 0.5s
Moment of biggestlayout change
![Page 59: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/59.jpg)
test.speed-kit.com
Does it work for Your Site?
Want to double your free teer?
Send a mail with WPMEETUP to [email protected]
![Page 60: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/60.jpg)
Wrap Up
PWA Service Worker Speed Kit
Super cool alternative tonative apps
Powerful programmablenetwork proxy
Combines Service Worker and cache
coherence
![Page 61: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/61.jpg)
Good Resourceshttps://developers.google.com/web/fundamentals/performance/?hl=en
https://www.udacity.com/course/website-performance-optimization--ud884
https://hpbn.co/
https://developers.google.com/speed/pagespeed/
https://test.speed-kit.comhttp://www.webpagetest.org/
Performance Toolshttps://medium.baqend.com/
https://www.baqend.com/
Web Performance Literature
![Page 62: The Technology Behind Progressive Web Apps · The Technology Behind Progressive Web Apps Service Workers in Detail Erik Witt ew@baqend.com 24.01.2018 @baqendcom. What we are going](https://reader030.vdocuments.net/reader030/viewer/2022041014/5ec56647fd680a510541044b/html5/thumbnails/62.jpg)
We are hiring.
Contact us.
Erik Witt · [email protected] · www.baqend.com/jobs.html
Frontend DevelopersMobile Developers
Java DevelopersWeb Performance Engineers