We have a web application which allows users to view SVGs. These SVGs usually contain images which are loaded using a relative url. As we want this to be an iPad 'web app' we also want it to be added to the iPad user's homescreen and for it to be cached by the HTML 5 application cache so the user can view these SVGs and associated images offline.
When our application is loaded from the iPad home page icon, the application cache manifest is read correctly and all of the referenced resources are cached. The issue occurs when the user starts to use the application offline. During the use of the application, SVGs are added and removed from the page DOM. During this, some of the images in the SVG fail to be loaded from the application cache, even though they are definitely present and cached. Instead, a request for the image is made to the server, which obviously fails because the user is no longer online.
Interestingly enough, this issue doesn't seem to occur when navigating to a page in safari on the iPad. It seems to be specific to the full page web app view, although I can't guarantee it.
I can reproduce this quite easily using this HTML page:
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function ()
{
$("#remove").click(function ()
{
$("embed").remove();
});
$("#add").click(function ()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function ()
{
$("embed").show();
});
$("#hide").click(function ()
{
$("embed").hide();
});
$("#reload").click(function ()
{
location.reload(true);
});
})
</script>
</body>
</html>
This SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
This image which is referenced by the SVG:
And this manifest file:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
And by following these steps:
- Open safari and navigate to the location of the reproduction html file (we host it on a Windows 2008 / IIS server)
- Add the page to the home screen using the 'Add to Home Screen' button.
- Close safari and clean out the safari cache
- Load the page from the newly added bookmark
- Wait until the page is completely cached. Usually about 5-10 secs, but you could attach to some application cache events to log out progress is desired.
- Turn off wifi (or what ever means of connection you use)
- Load the page from the newly added bookmark
- Notice that the page looks correctly cached. Use the add and remove buttons. You should notice fairly quickly that when you add using the 'add' button on the page. The image resource in the SVG isn't always loaded from the application cache, even though it's clearly cached.
When the issue occurs, you should see something like the screen shot below
I've already checked some obvious things:
- Application cache manifest has the correct mime type
- Manifest is downloaded
- Resources referenced in the manifest are cached correctly
My questions are:
- Does anyone know why this happens?
- Are there any workarounds to this issue?
I've logged this as a bug with apple, so I'll update this question with any feedback I may get from them!
Thanks!
Andy.
