Make an installable webapp, then verify its offline behaviour.
Build one thingCheck it worksChoose an extension
Module 05 / Build together
Before you start.
01
You already know
Module 04. A prepared HTTPS host or localhost test server.
02
Open these tools
Browser, editor, prepared 192/512 PNG icons and a phone for mobile testing.
03
Check the requirement
A PWA is a web app. App-store distribution and native device features are separate.
Module 05 / Build together
Your first small win.
Make my checklist layout comfortable on a phone: large buttons, clear labels, no horizontal scrolling. Preserve behaviour and local data. No dependencies or invented features. Return the complete HTML. Code: [paste].
Module 05 / Build together
What happens between input and output?
1A manifest describes the installed app.
2A service worker can cache approved app files.
3Installation and offline caching are separate checks.
Module 05 / Build together
Step 01. Prepare the app files.
1Use the working checklist from Module 04.
2Keep index.html at the project root.
3Add prepared icons at icons/192.png and icons/512.png.
Module 05 / Build together
Step 02. Create a manifest.
1Add manifest.json with name, icons and start_url.
2Set display to standalone.
3Link the manifest from the HTML head.
Module 05 / Build together
Step 03. Add offline caching.
1Use the build prompt for sw.js.
2Cache only this app and its icons.
3Register the service worker from index.html.
Module 05 / Build together
Step 04. Test on localhost.
1Run a local server and open localhost.
2Inspect the browser Application panel.
3Check manifest fields and service-worker status.
Module 05 / Build together
Step 05. Use HTTPS for the phone.
1Review before uploading to a chosen HTTPS host.
2Open that HTTPS address on the phone.
3Use the browser install option or Add to Home Screen.
Module 05 / Build together
Step 06. Verify installation and offline.
1Launch the installed app and add a test task.
2Load it once, disconnect and reopen it.
3Check the checklist still works; reconnect afterward.
Module 05 / Build together
Make the working version.
Turn this checklist into a small PWA. Return separate index.html, manifest.json and sw.js. Use supplied icons/192.png and icons/512.png, start_url ./ and standalone display. Version the cache and remove old caches. Cache app files only. Explain localhost and HTTPS tests. Code: [paste].
Module 05 / Build together
Ask for a review. Then check it.
Review these PWA files for manifest paths, icon sizes, service-worker scope, cache versioning and offline behaviour. Provide browser tests. Do not claim it is installed or app-store ready. Files: [paste].
Module 05 / Build together
Prove your result works.
1Manifest paths and icons resolve.
2Install control works in a supporting browser.
3After first load, offline use works as tested.
Module 05 / Build together
When it does not work yet.
01
No install option
Use HTTPS or localhost and check browser support/manifest.
02
Old version persists
Update the cache version and inspect the worker lifecycle.
Module 05 / Build together
Choose your next challenge.
01
Core complete
Show one checked output to a partner.
02
Extension 1
Add an explicit update notification.
03
Extension 2
Compare installed behaviour on two devices.
Module 05 / Build together
Keep the result. Keep the evidence.
Make an installable webapp, then verify its offline behaviour.
Save your filesSave your promptName the next change
Module 05 / Build together
Sources you can check.
01
MDN
Making PWAs installable
02
MDN
Service workers tutorial
Put your webapp on a home screen.
3 minutes
Outcome: Make an installable webapp, then verify its offline behaviour. This is a 60-minute in-person laptop session after preflight. No setup-duration guarantee. Core first, extensions second.
References
Before you start.
3 minutes
A PWA is a web app. App-store distribution and native device features are separate. The facilitator verifies accounts, installed tools and model/host connections before the session. Pair up if setup is incomplete. Do not create accounts or incur costs without understanding the provider terms.
References
Your first small win.
5 minutes
Quick win: Open the existing checklist on a narrow screen and use it. Aim for a visible result in the first 15 minutes after preflight. Explain that generated code/output is untested until the learner checks it. If tools are unavailable, inspect the prepared example with a partner.
References
What happens between input and output?
3 minutes
Ask a learner to explain each stage in their own words. This is a teaching model, not a promise that all tools behave identically.
References
Step 01. Prepare the app files.
3 minutes
Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material.
Use fictional practice inputs. Ask learners to show their work, not just the final answer.
References
Ask for a review. Then check it.
4 minutes
Use fictional practice inputs. Ask learners to show their work, not just the final answer.
References
Prove your result works.
6 minutes
These are manual acceptance tests for the learner to perform. No test is claimed to have run merely because it appears here. Ask pairs to demonstrate one pass and one corrected failure.
References
When it does not work yet.
4 minutes
Choose the observed symptom. Change one thing and rerun the smallest test. Avoid restarting the whole project or adding tools before diagnosing the current step.
References
Choose your next challenge.
5 minutes
Experienced learners use the extensions while beginners complete the same core outcome. An extension is optional, not a prerequisite for participating.
References
Keep the result. Keep the evidence.
3 minutes
Save the working version before leaving. Add a short note: what worked, what needed correction and what you would try next. The next module builds on the saved output.
References
Sources you can check.
2 minutes
Primary sources checked during course creation on 2026-10-08. Provider interfaces and availability can change. The examples, prompts and activities are original community teaching designs. Source links explain capabilities; they do not prove these fictional exercises were executed.
