Comment: Today our content is about how to create offline web applications. The advantage is that it allows the browser to download the web resources we specified so that users can use our site normally while offline.
Today our content is about how to create offline web applications. The advantage is that the browser can download the web resources we specified so that users can use our site normally while offline.
1. Define Manifest
We use manifest to list resources that need to be accessed when offline. It is itself a text-type file. The first line is often CACHE MANIFEST, and then list the resources we need, one per line. There are no fixed naming rules for files, and there are no requirements for suffix names. The only requirement is to define the suffix names on the server side as the MIME type of text/cache-manifest.
If it is an IIS 7 server, follow the steps below:
1. For example, if the suffix is .appcache, open iis7 and select the root node (this will be inherited from all sites, and can also be configured for a single site);
2. Double-click the MIME type on the right;
3. Right-click to add MIME type, so that the configuration is completed.
After the server configuration is complete, add the manifest file.
CACHE MANIFEST
manifestFile.html
img/1.jpg
img/2.jpg
img/3.jpg
Then let's look at the following example.
<!DOCTYPE HTML>
<html manifest="manifest.appcache">
<head>
<title>Example</title>
<style>
img
{
border: medium double black;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<img src="img/1.jpg" />
<div>
<button>car1</button>
<button>car2</button>
<button>car3</button>
</div>
<script>
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
document.getElementById('imgtarget').src = 'img/' + e.target.id + '.jpg';
}
</script>
</body>
</html>
When the program runs, depending on the browser, some browsers will ask you whether you allow the offline data to be saved locally, and some will not. Such a simple offline application is created.
2. Answers to doubts
I also encountered some problems and doubts when learning this part of the knowledge, such as:
1. Why am I running vs2010 directly (my development environment) and the offline application doesn't run correctly?
2. How do I know if the offline application was created successfully?
3. How do I know if the current application is offline?
4. After pausing the IIS service, it should be offline. Why do I report a 404 error when I refresh the page?
Now I will answer these questions I have encountered.
2.1. Explain the first question first. Regarding this issue, the key point is how your application web configuration item is configured. If you use the form of a vs development server, then we have no way to set the MIME type for it, so in this case our offline application cannot be used. For the remaining two web configuration methods, as long as you follow the MIME type method I introduced above to configure the iis server, your offline application will run correctly.
2.2. The second problem is explained below. Here we need to use the debugging tool of the chrome browser, use the chrome browser to open our web program, press F12, and switch to the Resources tab. As long as our configuration information is found under Application Cache and the cached file can be found, it proves that our offline application has been created successfully.
2.3. Or use Chrome's debugging tool, or in the Resources tab, notice that the red coil lives in the place, Online means online.
Unplug the network cable and display Offline, which means offline. At this time, the effect of offline application can be shown.
2.4. Regarding the last question, we still need to use the debugging tool of the Chrome browser. When we pause the IIS service, we look at the display of the Resources tab. It is still Online, but it turns from IDLE to OBSOLETE later. This also explains why the offline effect of the offline application cannot be displayed when the local IIS is paused.
This is the content of this section.