HTML 5 Offline Web Application with Spring Boot

30 11 2014

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

Donate Button with Credit Cards

Thank You!

Advertisements




Mobile cross-platform programming frameworks

21 04 2012

It is possible to develop one application that will run on several mobile platforms (like Android, iOS, Windows Phone, Symbian etc.). Such cross-platform frameworks are mased mainly on HTML5 and gives access to native phone sensors and devices such as for example accelerometer, camera, gps or contact book.

Here are popular platforms for mobile cross-platform programming:

  1. PhoneGap
  2. Marmalade
  3. Unity3D
  4. RhoElements
  5. Kivy

PhoneGap is the most popular I suppose Platforms and features it supports is impressive: Features support. The framework itself looks promising, however there are some drawbacks. One of them is browser efficiency on Android. That limits the possibility to use PhoneGap in games development. Phonegap is good for standard types of applications and it is free. It is worth to take a look at JQtouch – jQuery lib tht can be incorporated in PhoneGap apps.

Marmalade seems to be designed for cross-platform mobile games development (according to website information). Some 3D games screenshots presented on website looks impressive. It also has quite big developers network, so support may be guaranteed. Marmelade is not free.

Unity3D is a 3D engine that truly works cross-platform. I’ve seen some apps on Android phone, iPhone and in a computer web browser. It works well and is very popular.

RhoElements is made by Motorola. Website does not provide a lot of information, and I personally did not have an opportunity to try it live. So there is not very much to say about it untill one will give it a try… :)

Kivy seems to be the smallest project among the other three mentioned. it is open source and supports limited number of platforms. It is open source, free and still being developed.

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

Donate Button with Credit Cards

Thank You!








%d bloggers like this: