L17. Offline use and a phone icon

Allow about 30–40 minutes to test My Day offline and add its phone icon. You need the HTTPS address from lesson 16, Android with Chrome and a connection for the first visit. An iPhone route follows below. Without a phone, follow the explanation and complete the home task on paper.

Our app is a PWA: a web application that a supporting browser can install with an icon. We are not creating a native Android or iOS package for Google Play or the App Store. Installation and offline use are separate features: an icon alone does not prove the files are available without a connection. [B208]

In class

The teacher will demonstrate an online first visit and an offline reopening. Together, we will distinguish the icon, cached files and saved selections, then identify what each check proves.

Where the offline copy comes from

manifest.webmanifest describes the name, icons and launch behaviour. sw.js contains a service worker, a background handler that saves copies of our files and serves them to the browser. Those copies form a cache. Task selections still belong to localStorage, not the file cache. [B209]

• In your local my-day folder, open manifest.webmanifest in Notepad. Find these JSON settings. This is an excerpt from the existing file; do not replace the complete manifest with it:

"start_url": "./",
"scope": "./",
"display": "standalone"

./ means the current folder. The app will therefore open at /my-day/, rather than accidentally at the root of your domain. standalone requests a separate app window. The file should also reference 192×192 and 512×512 pixel icons. Installation needs an HTTPS web address; local development environments are a separate exception. [B208]

• Open Chrome on your phone and enter the exact address from Visit site. While connected, wait for “Ready for offline use”. This is the app’s message, not a browser button. Choose Start a new day, then tick the first task.
• In Chrome, choose ⋮ → Install and create shortcut → Install. Confirm installation in the window that appears. These names follow Chrome’s help page; wording varies with the browser’s language. [B210]
• Return to the home screen and find the My Day icon. Open it. Check the name, three tasks and counter.
• Close the app. Turn off both Wi-Fi and mobile data on the phone. Open My Day from its icon again. Expect the task list, your previous selection and “You are offline. Your tasks are available”. Tick the third task, close and reopen: expect the first and third selections and a count of 2. Restore your connection after testing.

[[VIS:b5_app_offline]]

[[VIS:b5_app_browser]]

The iPhone route

In Chrome on iPhone, open the same HTTPS address. Choose Share → Add to Home Screen, check the name and choose Add. Google’s instructions say the shortcut opens a web app when the site supports one; otherwise it opens an ordinary page. Repeat the offline and saved-selection checks specifically in the window launched from the icon. [B211]

Updates after installation

Before updating, choose Start a new day, select the first and third tasks and record that state. Afterwards, the same two selections and the count of 2 should remain: new program files should not start a new day for you.

The cache deliberately keeps a working copy. If you change a heading in HTML, the installed version may still show the older wording. In the supplied sw.js, find this JavaScript line:

const cacheName = prefix + "v1";

Replace v1 with v2; if it is already v2, use v3. Save the file. In the repository, choose Add file → Upload files, upload the changed files and sw.js, choose Commit changes, and wait for deployment. Open the app online, close all its tabs and windows, then reopen it. The new worker activates after the old windows close. Do not change the similar my-day:v1 key in app.js: that belongs to saved selections rather than the cache.

> [FIX]

> Missing the install option, or unable to work offline? First check HTTPS and the seven repository files. In the address bar, append icon-192.png after /my-day/ and press Enter: the icon should appear. For your own generated version, ask the AI: “Check manifest relative paths and the sw.js cache list for /my-day/. Explain which file fails to load.” You can keep using a browser tab while installation is unavailable.

Home practice

• Create Documents\AI-practice\offline-card.txt in Notepad, or use paper. Write a short guide for someone opening your app for the first time on another phone.
• Explain when internet access is needed, how to recognise offline readiness and how to check after installation. Add whether your selections will appear on their phone.
• Compare with steps 2–5. Include the first online visit, a test with both connections off and restoring the connection. If you did not test installation on a phone, state that in the guide.

Self-test

• What does the file cache hold, and what does localStorage hold in our app?
• Your phone has the icon, but you have never disconnected it. Can you record “offline tested”?
• Why can’t another phone open the app for the first time without internet access?

Terms

• PWA: a web app that a supporting browser can install.
• Manifest: a file describing the app’s name, icons and launch settings.
• Cache: saved file copies available for reuse.