- Published at
- Updated at
- Reading time
Today I saw a tweet by the FrontEnd Dude, and it was a real gem.
It turns out that the web has built-in "refresh functionality"!
refresh HTTP response header tells the browser to refresh a page after a defined time.
HTTP/1.x 200 OK ... Refresh: 10
You define the time interval in seconds. To refresh a page after five minutes, define
300. If desired you can even lead the user to a different URL after the time passed.
HTTP/1.x 200 OK ... Refresh: 10;url=https://example.com
If you can't (or don't want to) set HTTP headers in your environment, you can use a
meta element, too. The
http-equiv attribute allows to define values that are define via HTTP headers like
refresh right in your HTML.
<!-- refresh page after 60 seconds --> <meta http-equiv="Refresh" content="60"> <!-- refresh and redirect to https://example.com after 60 seconds --> <meta http-equiv="Refresh" content="60;https://example.com">
If you want to learn more about the
refresh header and meta element, I recommend giving Daniel Steinberg's article (the maintainer of
curl) a read. His post includes the mind-boggling statistic that 4% of page loads include the refresh meta element. Wow!
Edit: But before using this feature, make sure that an automatic refresh is not making content inaccessible. Julie Moynat pointed out, that it's best to provide a way to disable automatic refreshing. Have a look at the WCAG document "Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page" to learn more.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 9 days ago.