The document discusses the development of 'offline-first' web applications using service workers, which act as client-side proxies to manage caching and provide a seamless offline experience. It covers the lifecycle of service workers, including installation, activation, and fetch event handling, along with code examples for implementation. The document emphasizes the control developers have over caching strategies to enhance app performance and user experience.

1. Developing “Offline First” Web Apps
with Service Worker
GDG North Central Devfest, Abuja 2016

2. Auwal Muhammad
Samu
@auwalms_
Software Engineer,
SoftQuest System
Limited.

3. What are Offline First
Apps?

5. Use a Service Worker

6. `
Web server

7. Service worker
Client side proxy
(written in JavaScript)
Cache
Web server

8. Service Worker Life Cycle
Activated Error
Idle
Active Terminated
Install
Register
• Wakes up only when the OS
says
• Only responds to system
events
• Adds app-like lifecycle
to a page

9. is for the SECOND load.
Service Worker

10. Life Cycle of a Service Worker
Installing the Service Worker
2nd Page Load
activated
check for
update

11. Life Cycle of a Service Worker
Installing the Service Worker
Close Page
idle
terminated
activated

12. Life Cycle of a Service Worker
Updating a Service Worker
Load Page with Service Worker
activated
check for
update

13. Life Cycle of a Service Worker
Updating a Service Worker
Load Page with Service Worker
activated
check for
update
install
idle

14. Implementing a simple Service Worker

15. Activated Error
Idle
Active Terminated
Install
Register
Register the Service Worker

16. Register the Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

17. Register the Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

18. Activated Error
Idle
Active Terminated
Install
Register
Add an install Event Handler

19. Add an install Event Handler
self.addEventListener('install', function(event) {
return self.skipWaiting();
});

20. Activated Error
Idle
Active Terminated
Install
Register
Pre-fetch the App Resources

21. Pre-fetch the App Resources
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

22. Pre-fetch the App Resources
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

23. Pre-fetch the App Resources
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

24. Pre-fetch the App Resources
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

25. Activated Error
Idle
Active Terminated
Install
Register
Add an activate Event Handler

26. Add an activate Event Handler
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});

27. Add an activate Event Handler
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});

28. Activated Error
Idle
Active Terminated
Install
Register
Not Done Yet...

30. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

31. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

32. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

33. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

34. Activated Error
Idle
Active Terminated
Install
Register
Ready to Go!

35. Scope
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

36. Scope
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

37. Scope
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/scripts/s-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

38. Scope
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

39. Caching strategies
You are in control of the network

40. Cache, Falling Back to Network

41. Generic Fallback

42. Cache and Network Race