Progressive Web Apps with Service Workers

In this post we will discuss Progressive Web Apps and Service Workers. How can they help modern-day mobile web users, and how are we experimenting with them at Booking.com? We will share some challenges we’ve encountered, as well as some of our learnings.

Jesse Yang
Apr 21, 2016 · 10 min read
Image for post
Image for post

What is a Progressive Web App?

What is a Service Worker?

Quick Facts

Browser support

What can Service Workers do?

Service Workers in Action

Registration

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js', { scope: './' }).then(function() {
if (navigator.serviceWorker.controller) {
console.log('The service worker is currently handling network operations.');
} else {
console.log('Failed to register.');
}
});
}
navigator.serviceWorker.register('/scripts/service-worker.js', { scope: '/' })
Server {

listen www.example.com:443 ssl;

...

location /scripts/service-worker.js {
add_header 'Service-Worker-Allowed' '/';
}
}

Inside the worker

Service Workers at Booking.com

Image for post
Image for post

Caching Strategy Examples

toolbox.router.get(/static\/(css|js|images|img)\//,
toolbox.cacheFirst, {
cache: { name: 'static-files' }
}
);
toolbox.router.get(/\/(confirmation|mybooking|myreservations)/i, 
toolbox.networkFirst, {
networkTimeoutSeconds: 10,
cache: { name: 'booking-confirm' }
}
);
toolbox.router.any(/www.google-analytics.com/, toolbox.networkOnly);

Local Shortcuts

toolbox.router.get("/confirmations/(.*)", function(request, values, options) {
var url = request.url;
var promise = toolbox.networkFirst(request, values, options);
var confirmationId = values[0];
if (confirmationId) {
// when the request finishes
promise.then(function(response) {
if (!response || response.status !== 200) return;
self.caches.open('last-confirmation').then(function(cache) {
// save a 302 Redirect response to "/confirmation"
var redirectResponse = new Response('Redirecting', {
status: 302,
statusText: 'Found',
headers: {
Location: url
}
});
cache.put('/confirmation', redirectResponse);
});
});
}
return promise;
}, {
networkTimeoutSeconds: 10,
cache: {
name: 'confirmations',
}
});

toolbox.router.get('/confirmation', toolbox.cacheOnly, {
cache: {
name: 'last-confirmation'
}
});

The Secure Domain Problem

Final Thoughts

Resources

Booking.com Development

Software development at Booking.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store