Vanilla JavaScript: Service Workers

Learn how to use service workers in your applications. Create faster, more engaging web experiences with features like notifications, background syncing, and offline browsing.

Introduction

• Implement service workers in JavaScript
• What you should know

1. A New Citizen for the Web

• Hello, service workers
• Abilities
• What we can do
• Requirements and compatibility
• Service workers in action
• Understand the life cycle
• See all service worker registrations
• Understand the scope
• Learn vocabulary and concepts

2. Work with Service Workers

• Register a service worker
• Change the default scope
• Handle service worker events
• Debug with Developer Tools in Chrome
• Debug with other browsers
• Load external files
• Work with the registration
• Update the service worker
• Manage updates in your code
• Unregister the service worker

3. Acting as a Network Proxy

• Capture the fetch event
• Synthesize a response
• The Response object in detail
• The Request object in detail
• Work with exact routes
• Work with dynamic routes
• Clone before reading data

4. Cache Storage

• Understand the new Cache API
• Prepare the project
• Prefetch files on install
• Visualize your cache
• Implement a cache-first policy
• Implement a network-first policy
• Cache new elements after install
• Use stale-while-revalidate
• Deliver alternate content when offline
• Keep your storage clean
• Summary of cache strategies

5. Work with APIs in the Service Worker

• What's available in the service worker
• Send messages from pages
• Receive messages in the service worker
• Broadcast messages to clients
• Receive messages from the controller
• Sync data in the background

6. Tips and Tricks for Web Performance

• Readable streams
• Navigation preload
• Defer service worker registration
• Make your service worker useful quickly

Conclusion

• Next steps