html - HTML5 Offline Functionality Doesn't Work When Browser Restarted

Question

I am using the offline HTML5 functionality to cache my web application.

It works fine some of the time, but there are certain circumstances where it has weird behaviour. I am trying to figure out why, and how I can fix it.

I am using Sammy, and I think that might be related.

Here is when it goes wrong,

Browse to my page http://domain/App note: I haven't included a slash after the /App

I am then redirected to http://domain/App/#/ by sammy

Everything is cached (including images)

I go offline, I am using a virtual machine for this, so I unplug the virtual network adapter

I close the browser

I reopen the browser and browse to my page http://domain/App/#/

The content is showing except for the images

Everything works fine if in step #1 I browse to http://domain/App/ including the slash.

There are some other weird states it gets into where the sammy routes are not called, so the page remains blank, but I haven't been able to reliably replicate that.

??

UPDATE: The problem is that the above steps caused problems before. It is now working when I follow the above steps, so it is hard to say what is going on exactly. I am starting from a consistent state every time because I am starting from a snapshot in a VM.

My cache manifest looks like this,

CACHE MANIFEST

javascripts/jquery-1.4.2.js
javascripts/sammy/sammy.js
javascripts/json_store.js
javascripts/sammy/plugins/sammy.template.js

stylesheets/jsonstore.css

templates/item.template
templates/item_detail.template

images/1Large.jpg
images/1Small.jpg

images/2Large.jpg
images/2Small.jpg

images/3Large.jpg
images/3Small.jpg

images/4Large.jpg
images/4Small.jpg

index.html

Answer 1

我也遇到了类似的问题。

我认为部分问题是 jquery ajax 误解了响应。我相信 sammy 正在使用 jquery 进行 ajax 调用，这会导致错误。

这是我用来测试的代码片段（尽管不是解决方案）

this.get('#/', function (context) {

    var uri = 'index.html';

    //  what i'm trying to call
    context.partial(uri, {});// fails on some browsers after initial caching

    //  show's that jquery's ajax is misinterpreting
    //  the response
    $.ajax({
        url:uri,
        success: function(data, textStatus, jqXHR){
            alert('success')
            alert(data);
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error')
            if(jqXHR.status == 0){  //  this is actually a success
                alert(jqXHR.responseText);
            }else{
                alert('error code: ' + jqXHR.status)    // probably a real error
            }
        }
    });