How can I create a custom offline page using HTML5 appcache, but also keep my 404 error pages?
Question
I am attempting to use the HTML5 appcache feature to provide a custom "disconnected" page for my site. I have a page called offline.html which I would like to display to users who try to access the root page of the site ( / ) while their browser is offline, and I want to turn off all other appcache features. I do not want any of the pages on my site cached in appcache (except for offline.html of course, and offline_cache.html by necessity).
I am using this workaround to prevent my main page from being cached as a master page, and with the below code I feel like I almost have it working.
My index.html loads an iframe with the offline cache helper:
<iframe style="display: none;" src="offline_cache.html"></iframe>
The offline_cache.html file loads site.appcache :
<!DOCTYPE HTML>
<html lang="en" class="no-js" manifest="site.appcache">
<head>
<meta charset="utf-8">
<title>Manifest Initiation Page</title>
</head>
<body></body>
</html>
My site.appcache file uses a FALLBACK directive to provide an offline alternative for the root page (right now it matches everything, but I want it to match the root page only):
CACHE MANIFEST
CACHE:
NETWORK:
*
FALLBACK:
/ /offline.html
SETTINGS:
prefer-online
Desired Behavior:
Nothing should be in the cache except for the custom offline page ( offline.html ) and its helper. When a user visits the site while online, the site should function as normal, including all special status code pages (like 404). When the user visits the root page of the site while offline, they should see offline.html . It doesn't matter what happens when a user visits a nonexistant page while offline (it can be either offline.html or the native offline page), but if they are online then it must show a 404 page and not offline.html .
Current Behavior:
Whether the browser is online or offline, the user does not see any 404 pages - for pages that should display 404 errors when the user is online, they see offline.html instead. This is because the / in the fallback section matches not just the main page, but every url starting with / , ie the entire site including all nonexistant pages (I want it to match only the main page).
In essence, all I need to get this working is to have my fallback trigger only on the main page at / and not for any other path on the site. Then all nonexistant resources will properly return either the native offline page or a 404 error page instead of offline.html . How can I accomplish this?
1 answers
solution1
0 2022-01-08 20:53:52
There's not any way to do this. HTML needs be loaded with an internet connection before showing a page, if you're not connected to the internet, the browser can't just show up one of your pages. Even if an offline alert. If you mean a "Sorry, offline for updates" page just switch everytime index.html / offline.html, otherwise, there's no valid choice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.