Browser APIs: workers, offline and real time
You write applications that work offline and update in real time using browser APIs such as Web Workers, Service Workers, IndexedDB, WebSocket, Server-Sent Events and Web Crypto.
Level 401 · 15 lessons · 12 practice labs
Lessons
Work in the background
- Heavy computation with Web Workers
- Transferable objects and shared memory
- Talking across tabs: BroadcastChannel
- Short task: shrink images in a worker
Offline and storage
- The Service Worker lifecycle
- Offline caching strategies
- Structured data with IndexedDB
- Storage quota and persistent storage
- The app manifest and installable apps
- Short task: a notes app that works offline
Real time and security
- Two-way connections with WebSocket
- Streaming from the server with Server-Sent Events
- Hashing and encryption with Web Crypto
- Permissions, IntersectionObserver and ResizeObserver
- Capstone: a live field app that also works offline
Practice labs
- Move a heavy calculation to a Web Worker: Move a prime-search calculation that freezes the UI into a Web Worker and keep the page responsive.
- Sync logout across tabs: When the user logs out in one tab, send the other open tabs to logout too with BroadcastChannel.
- Hand over large data without copying: Send an audio file's ArrayBuffer to a worker as a transferable and measure the difference from copying.
- Show an offline fallback page: Write a service worker that shows a custom cached offline page instead of the browser error when the network drops.
- Update a stale service worker: Fix the update flow of a service worker that keeps serving old files after a new release.
- Combine caching strategies: Set up cache-first for the app shell, network-first for the API and stale-while-revalidate for images together.
- Save notes to IndexedDB: Store notes that vanish on reload in an IndexedDB object store and load them back.
- Upgrade an IndexedDB schema without loss: Write a version upgrade that adds a new index to the schema without losing existing records.
- Make a field form installable: Make a field form installable with a manifest, icons and a service worker, and check storage quota and persistence.
- Show a live score with SSE: Show match scores published by the lab server live on the page with Server-Sent Events.
- Reconnect a dropped WebSocket: Write code that reconnects a dropped chat socket with growing delays after a server restart and asks for missed messages.
- Encrypt a file in the browser: Derive a key from a password with Web Crypto, encrypt a file with AES-GCM and decrypt it again.
About this course
You write applications that work offline and update in real time using browser APIs such as Web Workers, Service Workers, IndexedDB, WebSocket, Server-Sent Events and Web Crypto.
What you will learn
- Work in the background
- Offline and storage
- Real time and security
Prerequisites
You should have practised the topics of the same path up to level 301.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 401; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.