Using manifest, first time users never pass the "progress" function

Question

When I update the manifest's version the default page displays a spinner that shows 0-100% then a success message will show. However, first time users never passes the 100%. It stops there. It does not executes the next function which is updateready. Below is my code:

<script>
    var opts = {
        lines: 13, // The number of lines to draw
        length: 11, // The length of each line
        width: 5, // The line thickness
        radius: 17, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        color: '#FFF', // #rgb or #rrggbb
        speed: 1, // Rounds per second
        trail: 10, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: 'auto', // Top position relative to parent in px
        left: 'auto' // Left position relative to parent in px
    };
    var overlay;
    var spinner;
    var target;

    window.applicationCache.addEventListener('checking', function (event) {
        console.log("Checking for updates.");
        console.log("inside checking event, appcache status : %s", applicationCache.status);
    }, false);

    window.applicationCache.addEventListener('downloading', function (event) {
        target = document.createElement("div");
        document.body.appendChild(target);
        spinner = new Spinner(opts).spin(target);
        overlay = iosOverlay({
            text: "0%",
            spinner: spinner
        });
    }, false);

    window.applicationCache.addEventListener('progress', function (event) {
        var per = event.loaded.toString() / event.total.toString();
        var totalPercentage = Math.round(per * 100);
        Math.round
        overlay.update({
            text: totalPercentage + "%",
            spinner: spinner
        });
    }, false);

    window.applicationCache.addEventListener('updateready', function (e) {
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            window.setTimeout(function () {
                overlay.update({
                    icon: "loader/img/check.png",
                    text: "Success"
                });
            }, 2e3);

            window.setTimeout(function () {
                window.location.reload();
            }, 3e3);
        }
    }, false);
</script>

Answer 1

I was missing 'cached' event. This event is being executed when the update process finishes for the first time — that is, the first time an application cache is saved.

window.applicationCache.addEventListener('cached', function (event) {
        ...
    }, false);