Html Question posted in
Some basic documentation can be found here.

Html – How do websites display a page showing "you are offline"

Some websites manage to display an error page when you try to access them again while offline. For instance, this shopping site:
https://www.mumzworld.com/sa-ar/graffiti-resin-graffiti-resin-color-yellow-100ml?geo=false

If you access that page, close it, turn off your internet, then try to access it again, Chrome will show a page that still looks like the website, saying "Sorry, there seems to be an error".

Is this a cache of the page, which means that each page displays this by default unless it detects that it can get the actual page data from the Internet?

And how do you force this behavior, considering that the vast majority of websites don’t show at all if you have no internet, cache or no cache?

Or is that "simply" a progressive web app?

Tags:

2

Answers


  1. 0

    They could be using a service worker, cache, or Window navigator.onLine, which is explained here:

    https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine
    https://www.w3schools.com/jsref/prop_nav_online.asp

    Login or Signup to reply.
  2. 0

    The behavior you’re describing is likely due to a service worker, which is a key part of a Progressive Web App (PWA). Service workers can intercept network requests and provide cached content or a custom offline page when the user is offline. In this case, it seems like the website has cached a fallback error page to display when it can’t reach the server.

    To implement this yourself, you’d need to:

    1. Register a service worker in your web app.
    2. Define a caching strategy, like caching key pages or assets for offline use.
    3. Use the service worker to serve a custom offline page (like the error page you mentioned) when a network request fails.

    Not all websites use this because it’s specific to PWAs and requires explicit implementation. Forcing this behavior involves setting up the service worker properly and caching the necessary assets/pages in advance.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search