# 05. Put your webapp on a home screen. Make an installable webapp, then verify its offline behaviour. ## Facilitator preflight Bring laptops, internet, a projector and these local course files. Check tool access before the meetup. Keep samples free of personal information. Quick win: Open the existing checklist on a narrow screen and use it. Prerequisites: Module 04. A prepared HTTPS host or localhost test server. ### Tools and cost notes - **Browser, editor, prepared 192/512 PNG icons and a phone for mobile testing.**: Prepared before the meetup.. A PWA is a web app. App-store distribution and native device features are separate. ## Run of show | Slide | Minutes | Activity | |---|---:|---| | 1 | 3 | Put your webapp on a home screen. | | 2 | 3 | Before you start. | | 3 | 5 | Your first small win. | | 4 | 3 | What happens between input and output? | | 5 | 3 | Step 01. Prepare the app files. | | 6 | 3 | Step 02. Create a manifest. | | 7 | 3 | Step 03. Add offline caching. | | 8 | 3 | Step 04. Test on localhost. | | 9 | 3 | Step 05. Use HTTPS for the phone. | | 10 | 3 | Step 06. Verify installation and offline. | | 11 | 4 | Make the working version. | | 12 | 4 | Ask for a review. Then check it. | | 13 | 6 | Prove your result works. | | 14 | 4 | When it does not work yet. | | 15 | 5 | Choose your next challenge. | | 16 | 3 | Keep the result. Keep the evidence. | | 17 | 2 | Sources you can check. | Total: 60 minutes. ## 1. Put your webapp on a home screen. 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. ## 2. Before you start. 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. ## 3. Your first small win. 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. Copyable prompt: [Open prompt](index.html#05-quick-win) ```text 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]. ``` ## 4. What happens between input and output? Ask a learner to explain each stage in their own words. This is a teaching model, not a promise that all tools behave identically. ## 5. Step 01. Prepare the app files. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## 6. Step 02. Create a manifest. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## 7. Step 03. Add offline caching. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## 8. Step 04. Test on localhost. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## 9. Step 05. Use HTTPS for the phone. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## 10. Step 06. Verify installation and offline. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## 11. Make the working version. Use fictional practice inputs. Ask learners to show their work, not just the final answer. Copyable prompt: [Open prompt](index.html#05-build) ```text 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]. ``` ## 12. Ask for a review. Then check it. Use fictional practice inputs. Ask learners to show their work, not just the final answer. Copyable prompt: [Open prompt](index.html#05-review) ```text 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]. ``` ## 13. Prove your result works. 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. ## 14. When it does not work yet. 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. ## 15. Choose your next challenge. Experienced learners use the extensions while beginners complete the same core outcome. An extension is optional, not a prerequisite for participating. ## 16. Keep the result. Keep the evidence. 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. ## 17. Sources you can check. 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. Source: [MDN: Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) Source: [MDN: Service workers tutorial](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ## Extensions - Add an explicit update notification. - Compare installed behaviour on two devices. ## Delivery notes Arrow keys, Space, Home and End navigate slides. N opens notes. Read all slides creates a scrolling lesson. Every prompt has a real Copy prompt button with an honest manual fallback if the browser blocks clipboard access. Keep the whole curriculum folder together: PPTX prompt links open the companion index.html at the same prompt anchor. PowerPoint does not copy directly. For sharing online, rebuild with --companion-base-url set to the published curriculum URL. Motion illustrates input, agent, tool, human review and output. Pause flow stops it; system reduced-motion is respected. PDF contains a static diagram. PPTX uses an animated GIF where available; playback varies by viewer. Original teaching content, synthesized from learning objectives. Public source decks remain separate in library/. No one-to-one rebranding or permission to republish is implied.