Search code examples
htmlcachingxmlhttprequestlocal-storagehtml5-appcache

Use the locally stored version of the page instead of another request

I'm workin' on a web project where performance is a very important issue.

EDIT:

The situation:

I wanna add some details about the user's workflow:

  1. The user visits the welcome page of my website http://example.org/ .
  2. He clicks a link in order to visit the page http://example.org/mypage
  3. onclick-Handler of the link's executed.
  4. The handler loads data usin' XHR.
  5. The handler creates http://example.org/mypage dynamically.
  6. The handler saves mypage locally usin' FileSystem API at filesystem:http://example.org/mypage. EDIT: ( filesystem:http://example.org/mypage is a local ressource stored in the FileSystem at the client side)
  7. The handler extends the history and changes the URL of the location bar usin' History API from http://example.org/ (URL of the welcome page) to http://example.org/mypage (the page which the user wants to see) .
  8. The user vists another page in the meantime.
  9. Later on, the user types http://example.org/mypage directly into the location bar.
  10. The browser shows/loads filesystem:http://example.org/mypage (which is the locally stored version of http://example.org/mypage) instead of http://example.org/mypage. That means: The browser doesn't create a new request, it uses the local stored copy of http://example.org/mypage .

How can I get the browser to use the locally stored version of the page instead of creating a new request? EDIT: - That's what I want to do in #10 of the list above.

EDIT:

My Question:

A client-side has already created/generated http://example.org/mypage in #2 to #7 of the list above. I don't need to create that page some other time. That's why I don't want the browser to create a request for http://example.org/mypage.

That's what I wanna do:

If filesystem:http://example.org/mypage has already been created (respectively if the user has already visited http://example.org/mypage):

Use filesystem:http://example.org/mypage instead of http://example.org/mypage.

Otherwise:

Send a request for http://example.org/mypage

Tries to solve:

  1. I can't use the Fallback section of the manifest file to do something like: EDIT: (aside from the orgin)

    FALLBACK: http://example.org/mypage filesystem:http://example.org/mypage

In order to get the browser to use the local version stored in the FileSystem because Fallback directives are just used if the user is offline, otherwise they are ignored. EDIT: But I want to use filesystem:http://example.org/mypage instead of http://example.org/mypage, even if the user's online.

  1. I know that I can use the Expire field in the response header of a server-generated page in order to not create a new request and to use the cached version.

But what if I create an page dynamically on the client side using JS and XHRs. EDIT: (I described that case in The situation) When create a page at the client side there's no way to get the client to cache that page. That's why I "cache" the page manually usin' FileSystem API to store it on the client side.

In order to improve the performance I'm trying to store any page which the user has already visited locally. When the user visits a page again then I show him the old, locally stored version of the page and my script creates an XHR to find out if the page changed in the meantime.

But how can I get the browser to use the local version of the page? I can save the generated page locally on the client side using the FileSystem API and I can choose an URL for the generated page to display it at the browser's location bar using the History API.
When the user now visits another site and then presses the back button I can catch the onPopState event by an event handler.
And that event handler can load the dynamically created file using the FileSystem API.
But what should I do if the user doesn't use the back button and if he types the URL, which I have registered using the History API, directly into the location bar?
Then the browser wouldn't use the locally stored version of the page, the browser would create a request to load the page from the server.

Solution

  • Don't put dynamic data in the application cache. If you want to put dynamic data in your pages then get it from the server with AJAX, store the data in Local Storage, and populate the page with the data from storage through JavaScript (you can hook into the History API for this).

    By the way, this won't work because fallback entries have to be on the same domain:

    FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage

    Once your page is in the Application Cache (ie. it is locally stored) the browser will always use the version from the Application Cache until the manifest is updated or the user deletes the cache. It doesn't really matter what expiry headers you put on the page, except if you put a long expiry and you frequently update the manifest then it's likely the Application Cache will be populated from the browser cache rather than refreshed from the server. This is why the stuff you put in the Application Cache should be static files. Get your dynamic stuff with AJAX.