A web page can install like an app
A progressive web app is a web page that a phone can treat like an installed app. It gets an icon on the home screen and opens in its own window with no browser bars.
The first piece is a small file called the web app manifest, and you can write one in a few minutes.
By the end of this lesson
Note
I can describe what makes a web app installable and check a manifest.
Key words
| Word | What it means | Example |
|---|---|---|
| Manifest | a small JSON file that names the app and lists its icons and colours | |
| JSON | a plain text format for data, written as names and values | {"name": "Habits"} |
| Display mode | how much of the browser shows around the app | standalone |
| Icon | the picture shown for the app on a home screen | |
| Installable | a browser is willing to offer to add the app to the device |
The cells students fill in are left blank in this preview.
The manifest says who the app is
The manifest is a text file in JSON format. A page points to it with one line in its head, a link with the word manifest.
The browser reads the file to learn the app's name, the page to open first, its colours and its icons. Without it, a page is only a bookmark.
A small manifest, field by field
{
"name": "Habit tracker",
"short_name": "Habits",
"start_url": "/",
"display": "standalone",
"background_color": "#fafaf7",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }
]
}Worked example: what each field is for
| Field | What it does | Example |
|---|---|---|
| name | The full name, shown when there is room | Habit tracker |
| short_name | A short name under the icon | Habits |
| start_url | The page that opens first | / |
| display | How much browser shows around the app | standalone |
| background_color | The colour shown while the app starts | #fafaf7 |
| icons | The pictures for the home screen | icon-192.png |
The cells students fill in are left blank in this preview.
Check the lab's manifest
docker exec jupyter python3 steps/manifest.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
What the manifest check prints
The script lists seven fields and says whether each is present or missing. It then prints the display mode and checks that each icon file named in the manifest exists on disk.
It is a lab's own checklist, not a rule of every browser. A real browser decides for itself which fields it needs before it offers to install.
Find the display mode line
docker exec jupyter grep -o "\"display\": \"[a-z]*\"" app/manifest.webmanifestShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Worked example: the display modes
| Mode | What you see around the app |
|---|---|
| browser | The full browser, with its address bar |
| minimal-ui | A small set of browser controls |
| standalone | No browser bars, like an installed app |
| fullscreen | The whole screen, nothing else |
The cells students fill in are left blank in this preview.
What makes a web app installable
Browsers differ, but they look for similar things. A manifest with a name, a start page, a display mode and icons of sensible sizes. A secure address, which means https. Often a service worker, which the next lesson explains.
Install is a choice the browser offers, so look for it in your own browser's menu. The lab does not claim what your browser will show.
A common mistake
Warning
Many people think that adding a manifest always makes the install button appear. A manifest is only one requirement. The browser also wants a secure address and icons it can use, and each browser has its own list. Check the missing pieces in the browser's developer tools.