JavaScript: Service Workers

Course details

Service workers are background scripts that enable features like offline storage, push notifications, and background syncing. They are an important tool for the modern web developer who wants to create faster, more interactive experiences with offline browsing and messaging. This course shows how to implement service workers in vanilla JavaScript—leaving frameworks behind in order to understand the technology's full potential. Learn how to install and register service workers, handle events, and manage updates. Then find how to implement several use cases for service workers: intercepting and routing network requests as proxy server, storing files in an offline cache, sending and receiving messages, and synchronizing background data. Plus, get tips and tricks to optimize the performance of your applications using service workers.
Learning objectives
Service worker life cycle
Registering service workers
Handling service worker events
Updating service workers
Acting as a network proxy
Configuring cache storage
Communicating with clients
Optimizing web performance

Concepts

0. Introduction

01 - Implement service workers in JavaScript
02 - What you should know

1. A New Citizen for the Web

03 - Hello, service workers
04 - Abilities
05 - What we can do
06 - Requirements and compatibility
07 - Service workers in action
08 - Understand the life cycle
09 - See all service worker registrations
10 - Understand the scope
11 - Learn vocabulary and concepts

2. Work with Service Workers

12 - Register a service worker
13 - Change the default scope
14 - Handle service worker events
15 - Debug with Developer Tools in Chrome
16 - Debug with other browsers
17 - Load external files
18 - Work with the registration
19 - Update the service worker
20 - Manage updates in your code
21 - Unregister the service worker

3. Acting as a Network Proxy

22 - Capture the fetch event
23 - Synthesize a response
24 - The Response object in detail
25 - The Request object in detail
26 - Work with exact routes
27 - Work with dynamic routes
28 - Clone before reading data

4. Cache Storage

29 - Understand the new Cache API
30 - Prepare the project
31 - Prefetch files on install
32 - Visualize your cache
33 - Implement a cache-first policy
34 - Implement a network-first policy
35 - Cache new elements after install
36 - Use stale-while-revalidate
37 - Deliver alternate content when offline
38 - Keep your storage clean
39 - Summary of cache strategies

5. Work with APIs in the Service Worker

40 - What's available in the service worker
41 - Send messages from pages
42 - Receive messages in the service worker
43 - Broadcast messages to clients
44 - Receive messages from the controller
45 - Sync data in the background

6. Tips and Tricks for Web Performance

46 - Readable streams
47 - Navigation preload
48 - Defer service worker registration
49 - Make your service worker useful quickly

Conclusion

50 - Next steps