Search code examples
web-applicationshtmlofflineapplication-cache

Using Wildcard in FALLBACK section of Cache manifest file HTML5


How to create an offline enabled web-application such that when user visits hxxp://mywebsite/ and is offline than hxxp://mywebsite/offline/ is displayed. [There are about 100 different dynamic pages in my website, so I cannot afford to hardcode all of them in the cache manifest file]


Solution

  • CACHE MANIFEST
    CACHE:
    /Offline/OfflineIndex.html
    
    FALLBACK:
    / /Offline/OfflineIndex.html
    
    NETWORK:
    *
    

    This will cause all your pages across the entire site to redirect to offline when offline. The only issue is with the page that declares the manifest as that page is always cached. This means you cannot declare the manifest on every page because every visited page will then be cached itself and not redirect. So what you can do is declare your manifest on another html file (IE. Synchronize.html) then from default check whether or not your app has been made available for offline by storing a cookie or localcache value. If not redirect to synchronize.html with the manifest declared, set the localcache value, and redirect back to index.

    OFFLINE AWESOMENESSSSSSSSSSS!!!!