Level 3Unit C · Session 17
17

Unit C · A page somebody else can use

A page that updates itself

What we are making: a page that refreshes on its own, so you can put the phone down and watch.

One line

You found the problem yourself in session 11: a web page is a photograph. It shows the moment it loaded and then it stops being true, quietly, which is the worst way for something to stop being true.

The simplest fix is one line that tells the browser to come back on its own every few seconds. It is not the cleverest solution and real dashboards use something better, but it is one line and it turns a snapshot into something you can leave running.

Session 17 — the whole trick, in one line — 1 slot
SLOT 7
one line, and the page refreshes itself every five seconds
h += "<meta http-equiv='refresh' content='5'>";
New words
meta refreshAn instruction in the page telling the browser to reload it.
StaleShowing something that was true once and is not any more.
PollingAsking again and again, at a fixed interval.

Do it

  1. Add the meta line to your session 12 page.
  2. Load it on a phone, put the phone down, and warm the sensor with your hand.
  3. Watch it change without you touching anything.
  4. Try content='1'. Then try content='30'.

The judgement call

Refresh every second and the page is always current, the board is always busy, and the phone's battery drains. Refresh every thirty seconds and the board is free but the page is usually wrong. There is no correct answer, only a choice that suits what the thing is for.

Write down the interval you chose and one sentence saying why. A fire alarm and a greenhouse thermometer deserve very different answers.

💡 Tip
Show the reading's age, not just the reading. A page that says ‘24.5 C’ is lying the moment it goes stale. A page that says ‘24.5 C, 3 seconds ago’ is honest even when it is old — and that is worth more than being fast.
What you seeWhyWhat to do
The page flickers constantlyRefresh interval too short.Anything under 2 seconds is uncomfortable to look at.
It stopped refreshingThe meta tag is in the body, not the head.It has to be between <head> and </head>.
Refreshing loses what I pressedEvery refresh re-requests the same address.Use the redirect from session 11 so the address goes back to /.
The board feels slowSeveral phones all polling it.That is real. Fewer requests, or a longer interval.

What you learned

  • A page goes stale the instant it loads unless something refreshes it.
  • How often to refresh is a design decision, not a technical one.
  • Showing the age of a reading is more honest than showing only the reading.
Challenge optional — only if you finish early
  • Make the page refresh only the number, not the whole page. Look up how.
16. Show it