Think of users using your web application from mobile phones when their internet connection breaks down. Native mobile app would still work and cache all user actions, synchronizing them afterwards. HTML5 web apps can also work offline.
Basically it is done by listing the resource files (html, js, images) that browser should cache immadietly and use the cached version when user redirects to it. If internet connection is working, the browser will return the online server version, else, if user is offline the cached version will be used.
Resources to cache can be defined in html headers or in .manifest file. These two locations are interpreted by all modern browsers.
1. Download the code base
This tutorial is based on the source code from SpringBoot MVC Hello World tutorial. All instructions are performed on this code.
2. Create offline.manifest file
In this file you can select the files and resources that will be cached by the browser and used if user requests to connect with server while being disconnected from the Internet. I will create new html file: offline.html and redirect to it if user is offline. My offline.manifest looks as follows:
CACHE MANIFEST #v1 CACHE: offline.html NETWORK: * FALLBACK: / /offline.html
And is located under the /src/main/resources/static/offline.manifest.
3. Manifest file explained
The manifest file must begin with CACHE MANIFEST. The CACHE: section lists the files that we need for offline use. The NETWORK: section lists any resources that should not be cached. The FALLBACK: section uses the / character to define a URL pattern. It basically asks “is this page in the cache?” If it finds the page there, it displays it. If not, it shows the user the file specified – offline.html.
4. Create the offline.html page
This page will be displayed when user requests any page while being offline. This is static page – not the Spring template, so i simply put it in the /src/main/resources/static folder, next to the offfline.manifest file. The offline.html page content is basic one:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > <head> <title>Offline Web Application</title> </head> <body> <h1>You are offline</h1> </body> </html>
5. Request to cache resources
To make use of offline.manifest file I point it in my hello.html and greeting.html page head:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" manifest="offline.manifest">
This way the browser will download the manifest and cache specified resources. Moreover it will add the hello.html and greeting.html to the cache as well
6. Test it
Run spring boot app, and open the url in the browser. When you are on hello page, the browser will cache files for offline use. In Chrome console this is indicated as:
hello:1 Creating Application Cache with manifest http://localhost:8080/offline.manifest hello:1 Application Cache Checking event hello:1 Application Cache Downloading event hello:1 Application Cache Progress event (0 of 1) http://localhost:8080/offline.html hello:1 Application Cache Progress event (1 of 1) hello:1 Application Cache Cached event
Now stop the Spring Boot app and click the url on th page. Since the server is offline, you will be redirected to cached offline.html page (or the greeting.html if it was previously cached). If you try tu go to any other url, for example: http://localhost:8080/someInvalidUrl – then the offline html page will be displayed.
Note: best to be tested in private / incognito browser mode to prevent unwanted cache.
Get the source Code
Full source code for this tutorial you can get at my GitHub under the SpringBootOfflineWebApp tag: https://github.com/yacekmm/looksok/tree/SpringBootOfflineWebApp.
Did I help you?
I manage this blog and share my knowledge for free, sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality