Your goal
Create and test an installable PWA with a deliberate caching policy.
PROJECT LAB / MODULE 05
Pocket BorrowBox: put your app on a phone
Install your own useful webapp and understand exactly what works offline.
The situation
BorrowBox works in a browser. You want a phone home-screen entry with a proper name, icon and an honest offline experience.
A first win
Open the same BorrowBox page on a phone-sized screen.
Keep this artifact
A PWA folder, an install test and an offline capability table.
Explore the mechanism
This interactive model teaches the mechanism. It does not call a model, search your files or send messages.
Why this works
A PWA is a web app
A manifest supplies app identity and install information. Browser support and installation UX vary, so test the device rather than assuming every phone shows the same prompt.
Cache is not data sync
A service worker can cache static app files. It does not automatically synchronize records, run a remote AI model offline or turn localStorage into cloud storage.
Versions matter
An old cached file can keep showing an outdated app. Name cache versions, remove obsolete caches in activation and test an update before sharing.
Build it, step by step
Prepare a real folder
Start from BorrowBox. Keep index.html, manifest.webmanifest, sw.js and the supplied 192/512 icons together.
Check: All relative paths resolve when served.
Need a hint?
Local file URLs are not the reliable service-worker test environment.
Define app identity
Set the name, short_name, start_url, display and icons in the manifest. Link it from HTML.
Check: Developer tools recognize the manifest and both icon sizes.
Need a hint?
Use the supplied PNG icons; do not rename an SVG as a PNG.
Serve securely
Use localhost during development. Use HTTPS for phone deployment, then open the published URL on the phone.
Check: The service worker registers without a security error.
Need a hint?
A localhost address on your laptop is not your phone localhost.
Choose offline behavior
Cache the local static shell and approved starter files. Explain that external links and remote model calls still require connectivity.
Check: The capability table separates cached UI from network functions.
Need a hint?
Cache only known app resources, not arbitrary sensitive responses.
Test install and offline
Use the supported install or Add to Home Screen action. Disconnect network after a successful load, then reload and update a local item.
Check: The cached app opens and its local data still works where supported.
Need a hint?
Offline success before a first load is not guaranteed.
Ship an update
Change a visible version label, update the cache version and test the installed app refresh.
Check: The new version eventually appears and the old cache is removed.
Need a hint?
Document the observed update behavior instead of promising instant replacement.
Build with a clear contract
Convert BorrowBox into a small PWA folder. Provide index.html, manifest.webmanifest and sw.js using existing 192/512 PNG icons. Explain localhost development and HTTPS phone testing. Cache the static shell with a named version and remove obsolete caches on activation. Include a manual install, offline and update checklist. Do not claim offline AI or cloud sync.
When it goes sideways
No install button appears
The browser UX or installability requirements differ.
Try: Inspect the manifest and security context, then follow the device-specific install flow.
Offline shows a broken page
Assets were never cached or their paths are wrong.
Try: Inspect service-worker cache entries and test after a successful online load.
The old app persists
An obsolete cache is still serving files.
Try: Use an explicit cache version and activation cleanup.
Review your evidence
Tick a criterion only after checking your own artifact. These are self-reported checks, not an automated certification.
Make it your own
Install a field checklist
Adapt the PWA to a volunteer setup checklist and add a visible last-saved indicator.
- Local edits survive reload.
- Network-only behavior is labeled.
- A stale version can be identified.
Check the mental model
What does a service worker cache guarantee?
Why test a cache update?
Remember the distinction
A PWA is a web app
A manifest supplies app identity and install information. Browser support and installation UX vary, so test the device rather than assuming every phone shows the same prompt.
Cache is not data sync
A service worker can cache static app files. It does not automatically synchronize records, run a remote AI model offline or turn localStorage into cloud storage.
Versions matter
An old cached file can keep showing an outdated app. Name cache versions, remove obsolete caches in activation and test an update before sharing.
Go to the source
MODULE 05
MDN: Making PWAs installable
Use the primary documentation to verify this part of your build.
Apply it in the project labMODULE 05
MDN: Service workers tutorial
Use the primary documentation to verify this part of your build.
Apply it in the project lab