We have a web application that allows users to view SVG. These SVGs usually contain images that are uploaded using a relative URL. Since we want this to be an iPad application for iPad, we also want it to be added to the iPad home screen and for caching using the HTML 5 application cache, so that the user can view these SVG files and their associated images in offline mode.
When our application loads from the iPad homepage icon, the application cache manifest reads correctly and all link resources are cached. This problem occurs when the user starts using the application offline. During use, SVG applications are added and removed from the DOM page. During this, some of the images in the SVG cannot be loaded from the application cache, although they are definitely present and cached. Instead, a request for an image is made on the server, which obviously fails because the user is no longer online.
Interestingly, this problem does not occur when navigating a page on a safari on an iPad. This seems to be specific to full web browsing, although I cannot 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>
<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>
, SVG:
:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
:
- html ( Windows 2008/IIS)
- , " ".
- Safari
- , . 5-10 , , .
- Wi-Fi ( - , )
- , . . , "" . SVG , .
, -
:
:
, , !
!
.