Our club plays at a ground where the mobile signal drops to nothing about ten minutes before kick-off, which is exactly when people want to check the log and the next fixture. So the small page I keep for the club had to work without a connection, at least for the last thing it managed to load.
The table comes in as JSON: sixteen teams, eight numbers each. The first version fetched it on every page load and showed a spinner forever when the request failed. Not great on a match day.
What I ended up with is boring but it works:
- Fetch the JSON with a short timeout (four seconds).
- If it arrives, render it and save the raw string to localStorage together with the time it was fetched.
- If the request fails or times out, read the saved copy, render it, and show a small line under the table: "Last updated 14:05, no connection".
The timestamp turned out to matter more than I expected. Without it people assumed the table was live and argued about points that were already out of date.
Two things I'd do differently from the start. First, store the parsed numbers, not the HTML, because I changed the table layout twice and old cached HTML looked broken. Second, keep the cache key versioned (table-v2), so a format change doesn't try to read the old shape.
Next I want the fixtures list to work the same way, with the next match pinned to the top. If you've done offline caching for something similar and found a cleaner pattern than localStorage plus a timestamp, I'd like to hear it.
Top comments (0)