Skip to main content

Cache Manifest File

This tip will enable Object2VR or Pano2VR HTML5 projects to be stored on a mobile device by using the browser's cache. It is not recommended for any purpose other than to display projects offline. Because this method locally stores files and could not only confuse the user (with pop up warning dialogs) but also crash their device, we recommend not using this offline method as a general solution. For iOS devices, please consider using the GoodReader app for offline viewing.

Pano2VR can output a Manifest file for each panorama in a tour, however you only need to upload one manifest file to your server. This one file must contain all the relevant information from the other manifest files.

Below, you'll find some code to add to your HTML page to show the state of the cache and when the files are downloaded.

NOTE1: At the time of of this writing, the cache limit is around 5MB for Mobile Safari. If your panorama, object movie or tour is larger than this, Safari will pop up a warning that asks if you want to increase this limit. If you choose, Yes, you will need to close then re-open Mobile Safari.

NOTE2: For the following to work, your host provider must have the correct mime type to serve the files. Please see Manifest file for more information.

Contents

Edit the HTML Page

Below is additional code that you can copy and paste in to your HTML page to give you feedback (in the form of a visual text box in the left corner of the screen) when all the files have been cached. This is especially helpful since no indication is given that additional files are being downloaded after the initial image.


<script type="text/javascript">
 
	var cacheStatus;
 
	container = document.getElementById("container");
	cacheStatus=document.createElement('div');
	cacheStatus.setAttribute('style','position:absolute;left: 2px;top: 2px;' +
		'width: 150px;height:18px;color: #fff;padding: 1px 3px;' +
		'background-color: #000; opacity:0.5;');
	cacheStatus.setAttribute('id','cachestatus');
	cacheStatus.innerHTML="cache status";
	container.appendChild(cacheStatus);
 
	if (navigator.onLine) {
		window.applicationCache.addEventListener('updateready', function(e) {
			if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
				window.applicationCache.swapCache();
				cacheStatus.innerHTML="update ready!";
				if (confirm('A new version of this page is available. Reload?')) {
					window.location.reload();
				}
			}
		}, false);
		window.applicationCache.addEventListener('cached', 
			function(e) {cacheStatus.innerHTML="cache is ready!"; },false);
		window.applicationCache.addEventListener('noupdate', 
			function(e) { cacheStatus.innerHTML="cache is up to date!"; },false);
		window.applicationCache.addEventListener('downloading', 
			function(e) { cacheStatus.innerHTML="downloading..."; },false);
		window.applicationCache.addEventListener('error', 
			function(e) { cacheStatus.innerHTML="error"; },false);
		window.applicationCache.update();
	} else {
		cacheStatus.innerHTML="offline";
	}
</script>


Below is what standard HTML body code looks like from a HTML5 project. Remember this has to be the HTML page of the opening/first panorama.
This will also work in conjunction with PHP code to change HTML5/CSS3 skins and Flash fallback.

<body onorientationchange="hideUrlBar();">
	<script type="text/javascript" src="pano2vr_player.js">
	</script>
	<script type="text/javascript" src="skin.js">
	</script>
	<script type="text/javascript">
		// create panorama container 
		document.writeln('<div id="container" style="width:100%;height:100%;"></div>');
		// create the panorama player with the container
		pano=new pano2vrPlayer("container");
		// add the skin object
		skin=new pano2vrSkin(pano);
		// load the configuration
		pano.readConfigUrl("park.xml");
		// hide the URL bar on the iPhone
		hideUrlBar();
	</script>
        <noscript>
		<p><b>Please enable Javascript!</b></p>
	</noscript>
</body>

The following shows where to place the extra code within the HTML Page.

<body onorientationchange="hideUrlBar();">
<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<script type="text/javascript">
 
	// create panorama container 
	document.writeln('<div id="container" style="width:100%;height:100%;"></div>');
	// create the panorama player with the container
	pano=new pano2vrPlayer("container");
	// add the skin object
	skin=new pano2vrSkin(pano);
	// load the configuration
	pano.readConfigUrl("park.xml");
	// hide the URL bar on the iPhone
	hideUrlBar();
</script>
<script type="text/javascript">
 
	var cacheStatus;
 
	container = document.getElementById("container");
	cacheStatus=document.createElement('div');
	cacheStatus.setAttribute('style','position:absolute;left: 2px;top: 2px;' +
		'width: 150px;height:18px;color: #fff;padding: 1px 3px;' +
		'background-color: #000; opacity:0.5;');
	cacheStatus.setAttribute('id','cachestatus');
	cacheStatus.innerHTML="cache status";
	container.appendChild(cacheStatus);
 
	if (navigator.onLine) {
		window.applicationCache.addEventListener('updateready', function(e) {
			if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
				window.applicationCache.swapCache();
				cacheStatus.innerHTML="update ready!";
				if (confirm('A new version of this page is available. Reload?')) {
					window.location.reload();
				}
			}
		}, false);
		window.applicationCache.addEventListener('cached', 
			function(e) {cacheStatus.innerHTML="cache is ready!"; },false);
		window.applicationCache.addEventListener('noupdate', 
			function(e) { cacheStatus.innerHTML="cache is up to date!"; },false);
		window.applicationCache.addEventListener('downloading', 
			function(e) { cacheStatus.innerHTML="downloading..."; },false);
		window.applicationCache.addEventListener('error', 
			function(e) { cacheStatus.innerHTML="error"; },false);
		window.applicationCache.update();
	} else {
		cacheStatus.innerHTML="offline";
	}
</script>
<noscript>
	<p><b>Please enable Javascript!</b></p>
</noscript>
</body>

Output the Manifest File

The following will show you how to output a Manifest file.

  1. Open a project file and go to the HTML tab of an HTML5 output.

  2. Select Create HTML5 Cache Manifest in the Template Parameters.

    Tip manifest 1.png

  3. Click OK and output the project. The Manifest file will be in the same folder as the HTML file.

Adding more than one location to a Manifest File

NOTE: Valid for only the non-Pro version of Pano2VR.

If you want to save a multi-node virtual tour to your mobile device, you will need to add the information from the other panoramas (nodes) to the opening panorama's manifest file. Below outlines how to do this.

  1. Open the manifest file from the opening/starting panorama with a text editor.
    You'll notice it lists all the images that make up the skin and cube faces of the panorama.
    In this example, there are cube faces for three different mobile devices; specifically, the iPad, iPhone 4 and iPhone 3.
    Tip manifest 2.png

  2. Output the HTML and manifest files from the other projects if you have not done already.
    NOTE: These panoramas have no skin, so they will not contain as much information as the first file.

  3. Open the manifest files and copy only the text corresponding to the XML and image files of the other panoramas.
    Tip manifest 3.png
  4. Finally, paste this under the existing text in the first file. In this case, park.manifest. Keep doing this until this file contains all the required information from the other Manifest files.
    Tip manifest 4.png

Uploading the files

When you have finished modifying the HTML and Manifest files you will need to upload them to a server. The files that need to be uploaded are:

If you are using Flash fallback you will also need to upload the Flash outputs, SWF and swfobject.js files (p2q_embed_object.js if using an older version).

Creating an offline version that is less than 5MB to an iOS device


Download the below 5MB project
Download Video

The following assumes that you have uploaded the files to a server and are using the above HTML code to show the information text box. It is recommended that you restart your mobile device to clear your web browser's cache memory before you start the following procedure.

  1. Navigate to the web page where your panorama is hosted.
  2. When cache is ready is displayed, add the web page as a web app to the the home screen of your device.
    The information text box (in the upper lefthand corner) displays the following in this order:
    cache status
    downloading.....
    cache is ready
  3. Open the web app and check that the information text box displays cache is up to date, then close it.
  4. Disconnect the mobile device from the internet and open the web app. The information text box should now say offline.

Creating an offline version that is greater than 5MB to an iOS device


Download the above 5MB project
Download Video

The following assumes that you have uploaded the files to a server and are using the above HTML code to show the information text box. It is recommended that you restart your mobile device to clear your web browser's cache memory before you start the following procedure.

As your files are larger than the 5MB cache limit of Mobile Safari you will be asked if you want to increase the cache memory size. This is not a permanent size increase; it is only for the panorama you are downloading. This message interrupts the downloading process and the web browser has to be restarted to complete the download.

  1. Navigate to the web page where you have your panorama or tour.
    You will see the information text box state the following:
    cache status
    downloading.....
  2. A system message will appear asking if you want to increase local storage, select Increase.
    After this, an error will be displayed in the information text box. This is because the system message interrupted the download process.
  3. Close Safari and/or quit the application from running in the background (depending on the device).
    If your device supports apps running in the background, press and hold the Safari icon in the last-used applications bar until it starts to wobble with a minus sign above it. Tap the minus sign.
  4. Restart Safari.
    You will now see the following in this order:
    cache status
    downloading.....
    cache is ready
  5. When cache is ready is displayed, add the location to the Home Screen which will add a web app to the home screen of the device.
  6. Open the web app and check that the information text box displays cache is up to date, then close it.
  7. Disconnect the device from the internet and open the web app. The information text box should now say offline. Visit all the locations/nodes of the tour to make sure that all the files have been cached.

TIP: To remove the web app on an iOS device, press and hold it until the icon starts to wobble and then tap the x to delete it.

NOTE: This also works with any modern mobile browser. However, as of this writing, all of them have their limitations. For example, there is no way to increase the cache memory limit of 5MB in Chrome.


See also

Manifest file
HTML5 Output (Pano2VR)
HTML5 Output (Object2VR)
GoodReader