using HTML5 technology and other extensions, you can make the jquery mobile app as completely offline as the OST app on your mobile device. When accessing the app with the same URL or app icon, the app award is not loaded from the server side, but is launched directly from the local.
definition of software package an API for HTML5, called the application cache (application cache), is also known as the offline API (offline API) in the draft. Test compatibility: http://mobilehtml5.orgA package is actually a set of files that a user must have to download to a local file when they visit the application site. This set of files must contain every resource that we want to access offline, such as JavaScript, CSS, and images. with Packages you can build:completely off-line applications;update only pages or certain data;save an offline data cache and update it in the event of a network connection. The files in the package are published according to a text file called the cache manifest. The first line of the manifest file must be cache MANIFEST, followed by a list of all resource URLs that need to be downloaded to the device, which can be relative or absolute paths. Use # to make commentsIt should look like this, for example:
CACHE MANIFEST: #jQuery core file http://code.jquery.com/jquery-1.6.1.min.js #没有自定义 Topic of jquery Mobile file ... Links
Note: Failure to download any of the files on the list will cause the software to become invalid. The name of the manifest file is usually called Offline.appchache and is only available to the client in Text/cache-manifest MIME type. The URL of the manifest file is defined in the HTML file, which can be done by setting the Maifest property of the HTML element. Manifest is a new attribute introduced by HTML5.
Download the app The download process in the background is completely separate from the normal page loading. The download process downloads every file in the list to a location on the device that only it has access to. The package is installed successfully, and the next time the user accesses the same URL, the browser loads the local version of the app instead of accessing the server side. Note: The entire package will be invalid as long as one resource is not successfully downloaded. reason for download failure:
- The manifest file is invalid, does not exist, or the MIME type is incorrect;
- At least one of the resources listed in the list cannot be accessed;
- The user launches a browser or Web page before all resources are properly downloaded to the local site.
Access online resources by default, all resources are defined within the cache paragraph that does not require a declaration to be displayed. each time you need to download the phenomenon from the Internet, you can define a specific network: paragraph in the manifest file. For example, each time a. json file is loaded:#需要每次都从网络上获取的资源NETWORK:Data/countries.jsonyou can manipulate events for document objects: online and offline. Window.online This Boolean property, you can know whether there is currently an Internet link. the network paragraph in the list supports the use of wildcards * or the resource description of a folder. If you use a folder, all of the resources under the specified folder will be taken from the network in offline mode. For example:NETWORK: *With This configuration, only files declared before the network: paragraph will be loaded from the offline package, and all other resources will be fetched from the network.
Update Resources on the second load, the browser tries to get the latest manifest file from the server side in the background process. As soon as one byte changes, the previous list fails, and each resource is downloaded again according to the new manifest file. Note that if you change only the content without changing the version number on the list, the content is not updated. Whether you add a space, modify the name of a resource, or even add a line of comments, include a random number, or the last modification time, it is updated. Imperfect Place: The inventory update will re-download all the resources in the list, and will not be displayed immediately after the download is complete, but it will not change until the app is restarted. Of course, this problem can be solved by applying the event mechanism.
JavaScript Objects Applicationcache can help us understand the state of the app cache. For example:if (window.applicationcache!=undefined) {//browser supports Applicationcache using if (Applicationcache.status==applicati Oncache.updateready) {//There is an update waiting for reload to take effect}}The Applicationcache object contains the update () method (Force-initiated update check) and the Swapcache () method, which switches from the old resource cache to the new resource, provided that the new resource has been downloaded. HTML documents and resources that have already been loaded will not actually take effect until they have been fully overloaded by calling History.reload (). The Applicationcache object supports a variety of events that can be managed and not stated here. Common events:downloading: Displays the download message to the user, optionally providing a rotated download animation;Progress: Make a progress bar;Cached: Hide the download message and inform the user that the application has been installed;Error : Hide the download message and inform the user of the cause of the mistake;Updateready: Notifies the user that the app update is ready and asks the user if they want to reload immediately to access the new version of the app. You can use the AddEventListener method for event binding.
Install app iconboot: Typically the app will keep a record of whether the user has been booted in a cookie or HTML5 localstorage, ensuring that the user is only booted once. When a user adds an app shortcut to the home screen or the app menu on a page other than the homepage (whether it's an internal or external page), the app shortcut will point to the current page instead of the first, and the Data-title property of the current page will be used as the name of the app.
Full Screen <meta name= "apple-mobile-web-app-capable" content= "yes" >
Store offline DataThe Information store offers three options:webstorage API;Web SQL Database API;IndexedDB API;Localstorage is a collection of strings that are persisted on the device, and Sessionstorage is almost the same, and the knowledge is erased every time the browser is closed. the Localstorage API can store only strings, which means that you can store:
arrays and objects converted to JSON-formatted strings ; values in simple format ; comma-separated values; JavaScript code (for subsequent parsing); CSS Style sheet (for subsequent injection) ; HTML; a picture (data URI) converted to a Base64 string
;
The mainstream mobile browser supports JSON APIs that convert JavaScript objects and JSON strings to each other, using Json.stringfy (object) to convert objects to JSON strings, using Json.parse (String) Converts a string into a JavaScript object. If the browser does not support can be downloaded to http://github.com/douglascrockford/JSON-js.
Installation and offline access
