Install in a secure local context
See this course’s project requirements
A localhost reference-card app with an explicit asset cache, offline fallback, visible cache version and a controlled update/cleanup test.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Create an exact cache inventory and a visible list of excluded offline behavior.
- Record the local secure context and separate worker registration, installation, and page control.
- Produce cache-entry evidence and a controlled required-asset failure/repair record.
- Record actual cached reload and failed-network navigation fallback behavior separately.
- Produce a controlled update/activation record proving the new version and bounded cache cleanup.
- Deliver source, policy assertions, version evidence, performed browser tests, and scoped cleanup/limits.
Review and revise
Use these criteria to check your work and choose what to improve.
- The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
- Normal, boundary and rejected cases are recorded with expected versus observed results.
- The changed case has a correct explanation and does not rely on hidden state.
- The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Want more background?
The idea in everyday life
In a fresh dedicated folder place index.html, cards.css, offline.html, sw.mjs, cache-policy.mjs and test-cache.mjs. Serve only that folder with python3 -m http.server 8765 --bind 127.0.0.1 and open http://localhost:8765/index.html.
A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled.
Install in a secure local context — original worked practice
A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled.
In a fresh dedicated folder place index.html, cards.css, offline.html, sw.mjs, cache-policy.mjs and test-cache.mjs. Serve only that folder with python3 -m http.server 8765 --bind 127.0.0.1 and open http://localhost:8765/index.html.
1. Step 1
Use the localhost HTTP address rather than opening index.html as a file URL.
You should see: The practice uses a supported local secure context.
A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled.
2. Step 2
Inspect register with type module and the dedicated sw.mjs path.
You should see: The module worker imports the local cache policy.
A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled.
3. Step 3
Wait for readiness, reload once, and read the controlling-version status.
You should see: A controlling worker can reply with life-cards-v1.
A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled.
4. Step 4
Record registration, installation, and control as separate observations in developer tools.
You should see: A worker lifecycle record, with unavailable browser checks labeled.
A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled.
What to finish
Record the local secure context and separate worker registration, installation, and page control.
Watch for this
Equating a successful registration promise with a controlled offline page.
How can I tell I understand it?
Demonstrate the rule: A service worker requires a secure context; localhost is accepted for development. Registration and installation do not immediately prove the current page is controlled. Use the supplied variant to distinguish a changed result from a broken implementation.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.