HTML5 App Cache not working with POST requests

Question

I'm working on a web application and I went through the necessary steps to enable HTML5 App Cache for my initial login page. My goal is to cache all the images, css and js to improve the performance while online browsing, i'm not planning on offline browsing.

My initial page consist of a login form with only one input tag for entering the username and a submit button to process the information as a POST request. The submitted information is validated on the server and if there's a problem, the initial page is shown again (which is the scenario I'm currently testing)

I'm using the browser's developers tools for debugging and everything works fine for the initial request (GET request by typing the URL in the browser); the resources listed on the manifest file are properly cached, but when the same page is shown again as a result of a POST request I notice that all the elements (images, css, js) that were previously cached are being fetched form the server again.

Does this mean that HTML5 App Cache only works for GET requests?

Answer 1

Per http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#the-application-cache-selection-algorithm it appears to me that only GET is allowed.

In modern browsers (which support offline HTML), GET requests can probably be made long enough to supply the necessary data to get back data you need, and POST requests are not supposed to be used for requests which are idempotent (non-changing). So, the application should probably be architected to allow GET requests if it is the kind of data which is useful offline and to inform the user that they will need to login in order to get the content sent to them for full offline use (and you could use offline events to inform them that they haven't yet gone through the necessary process).

Answer 2

I'm having exactly the same problem and I wrote a wrapper for POST ajax calls. The idea is when you try to POST it will first make a GET request to a simple ping.php and only if that is successful will it then request the POST.

Here is how it looks in a Backbone view:

var BaseView = Backbone.View.extend({
    ajax: function(options){
        var that = this,
        originalPost = null;

        // defaults
        options.type = options.type || 'POST';
        options.dataType = options.dataType || 'json';

        if(!options.forcePost && options.type.toUpperCase()==='POST'){
            originalPost = {
                url: options.url,
                data: options.data
            }; 
            options.type = 'GET';
            options.url = 'ping.php';
            options.data = null;
        }

        // wrap success
        var success = options.success;
        options.success = function(resp){

            if(resp && resp._noNetwork){
                if(options.offline){
                    options.offline();
                }else{
                    alert('No network connection');
                }
                return;
            }

            if(originalPost){
                options.url = originalPost.url;
                options.data = originalPost.data;
                options.type = 'POST';
                options.success = success;
                options.forcePost = true;
                that.ajax(options);
            }else{
                if(success){
                    success(resp);
                }
            }


        };

        $.ajax(options);
    }
});


var MyView = BaseView.extend({
    myMethod: function(){
        this.ajax({
            url: 'register.php',
            type: 'POST',
            data: {
                'username': 'sample',
                'email': '[email protected]'
            },
            success: function(){
                alert('You registered :)')
            },
            offline: function(){
                alert('Sorry, you can not register while offline :(');
            }
        });
    }
});

Have something like this in your manifest:

NETWORK:
*

FALLBACK:
ping.php no-network.json
register.php no-network.json

The file ping.php is as simple as:

<?php die('{}') ?>

And no-network.json looks like this:

{"_noNetwork":true}

And there you go, before any POST it will first try a GET ping.php and call offline() if you are offline.

Hope this helps ;)