Comments: Today, our content is about how to create an offline web application. Its advantage is that it allows the browser to download our specified web resources so that users can use our site normally offline.
Today, our content is about how to create an offline web application. Its advantage is that it allows the browser to download our specified web resources so that users can use our site normally offline.
1. Define Manifest
We use manifest to list the resources that need to be accessed offline. It is a text file. The first line is usually cache manifest, and then lists the resources we need, one in each row. 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 as the text/cache-manifest MIME type.
For iis 7 server, follow the steps below:
1. For example, if the suffix is. appcache, open iis7 and select the root node (in this way, all sites will inherit the configuration, or you can configure a single site );
2. Double-click the MIME type on the right;
3. Right-click to add the MIME type. The configuration is complete.
After the server is configured, add the manifest file.
The Code is as follows:
CACHE MANIFEST
ManifestFile.html
Img/1.jpg
Img/2.jpg
Img/3.jpg
Then let's look at the example below.
The Code is as follows:
<! Doctype html>
<Html manifest = "manifest. appcache">
<Head>
<Title> Example </title>
<Style>
Img
{
Border: medium double black;
Padding: 5px;
Margin: 5px;
}
</Style>
</Head>
<Body>
<Div>
<Button id = "1"> car1 </button>
<Button id = "2"> car2 </button>
<Button id = "3"> car3 </button>
</Div>
<Script>
Var buttons = document. getElementsByTagName ('click ');
For (var I = 0; I <buttons. length; I ++ ){
Buttons [I]. onclick = handleButtonPress;
}
Function handleButtonPress (e ){
Document. getElementById ('imgtarget'). src = 'img/'+ e.tar get. id + '.jpg ';
}
</Script>
</Body>
</Html>
2. Answers to questions
I also encountered some problems and doubts when I learned this part of knowledge, such:
1. Why can't offline applications run correctly when I directly run vs2010 (My Development Environment?
2. How can I know whether the Offline Application is successfully created?
3. How can I know whether the current application is offline?
4. After the iis service is suspended, it should be offline. Why should I report the 404 error when I refresh the page?
Now I will answer these questions.
. First explain the first question. The key point of this issue is how to configure the web configuration items of your application. If you are using the form of the vs development server, there is no way to set the MIME type for it, in this case, our offline applications cannot be used. The remaining two web configuration methods, as long as you follow the correct instructions, configure the iis server for the MIME type method I described above, and your offline application will run correctly.
2. The second problem is explained below. here we need to use the debugging tool of chrome browser to open our web program using chrome browser, press F12, and switch to the Resources tab. As long as the Application Cache contains our configuration information and the cached files can be found, it proves that our Offline Application has been successfully created.
. I still use the debugging tool of chrome, or on the Resources tab. I noticed that there is no place in the Red Line. Online indicates Online.
Unplug the network cable and show Offline, indicating that the Offline Application is displayed.
2. 4. for the last question, we still need to use the debugging tool of chrome browser. When we suspend the iis service, we can see that the display on the Resources tab is still Online, it only changes from IDLE to OBSOLETE. This explains why local iis is suspended and the offline Effect of offline applications cannot be displayed.
This section ends.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
