Home > Developer > Web Develop
Manifest method introduced AppCache file, Cache page, is a new feature of HTML5, by loading once, the next automatic read cache, loading speed, offline can also be loaded. The downside is that the loaded page is forced to cache all the content. In order to solve the problem of not loading all the content, after I repeated research, finally found two solutions, not much to say, look at the code.
Introducing HTML5 offline storage requires the introduction of a. appcache file in the page header file, as follows:
. AppCache's writing online a bunch of a bunch of, I wrote the following:
CACHE MANIFEST//
# 2015-04-24 v1.0.4
.. /resources/css/bootstrap.min.css
.. /resources/css/oacss.css
.. /resources/css/styles.css
.. /resources/imgs/oa.png
.. /resources/imgs/dashboard.png
.. /resources/imgs/resources.png
.. /resources/imgs/edit.png
.. /resources/imgs/leaner.png
.. /.. /.. /.. /resources/jquery/jquery-1.8.1.min.js
NETWORK:
Http://localhost:8080/xy/mobileweb/index-controller
*
FALLBACK:
/html5//404.html//If an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html": The first URI is the resource and the second is a substitute.
Manifest tells the browser what is cached (and what is not cached), the manifest file can be divided into three parts:
The manifest file above lists three resources: a CSS file, a PNG image, and a JavaScript file. When the manifest file is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.
Once the app is cached, it remains cached until the following happens:
Important Note: "#" begins with a comment line, but can also be used for other purposes. The app's cache is updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes are not re-cached. Updating the date and version number in the comment line is a way to enable the browser to re-cache the file. Apache file Max 5M.
In order to solve the offline application cache local refresh problem, I found two methods, as follows:
1, Ajax requests can not refresh the page.
The request path to Ajax is written under the network of the. apache file, and the values obtained through Ajax are not cached on the page.
2, the online use of IFrame can get their own to cache things, I also tried a piece, the code is as follows:
The index2.jsp file code is as follows:
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "%>
<! DOCTYPE html>
<title> Cache Pages </title>
<body>
</body>
The index.jsp file code is as follows:
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "%>
<! DOCTYPE html>
<body>
<div style= "visibility:hidden;width:0px;height:0px;" >
<iframe width=0 height=0 frameborder=0 src= "index2.jsp" ></iframe>
</div>
....//What you want to load will not be cached.
<body>
The downside of method two is that it does have a cache, and it does load the cache, but it does reload.
Reference html5api://http://www.w3school.com.cn/html5/html_5_app_cache.asp
Handles some problems with HTML5 offline application storage.
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
