Chapter 8: HTML5 offline apps and location-based apps

1. The working principle of offline applications

1. The browser cache is for a single Web page, while the local cache is for the entire Web application 2. The browser caches all browsed pages, and the local cache caches specific pages. 3. The browser cache information cannot be manually controlled, but the local cache can be manually controlledCopy the code

2. Manage the local cache

Offline storage is managed through the manifest folder, which requires server-side support. The manifest file is a simple text file with an extension of '.manifest' that configates which resource files need to be cached, The resource file access path must also be configured in the manifest. After the manifest file is configured, the manifest attribute of an HTML element specifies the current manifest file. The resource file configured in the manifest file is automatically cached when the manifest page is loadedCopy the code
A standard manifest file contains the following nodes: 1.CACHE: Indicates that in offline state, the browser needs to CACHE a list of local resource files. List of resource files to be accessed when online Resource files configured in the NETWORK list can be accessed only when the client communicates with the server. FALLBACK: The configuration information is in pairs. If the earlier resource files are inaccessible, the later resource files are used to access themCopy the code
CACHE MANIFEST
#version 0.0.0

CACHE:
JS/test.js
Css/test.css

NETWORK:
index.apsx

FALLBACK:
/Project/index.apsx  /Bak/Project/index.apsx
Copy the code

3. ApplicationCache detects and updates the cache

3.1 Status The status property is used to check whether the local cache information is updatable. 0 indicates that the local cache does not exist or is unavailable.1 Indicates that the local cache content is updated. No need to update Return value 2 Indicates that the manifest file status is being checked to check whether the file configuration has changed. Return value 3 Indicates that the manifest file status has been determined and the manifest file is being downloaded. Return value 4 Indicates that the local cache content has been updatedCopy the code
The updataeReady event is triggered when the manifest file is updated and the browser loads a new resource fileCopy the code
3.3 The swapCache method is used to manually update the local cache information. It can only be called when the updataReady event of applicationCache is triggeredCopy the code
3.4 Update Manually update the local cacheCopy the code

4. Check the online status

4.1 onLine navigator. OnLineCopy the code
4.2 offLine
Copy the code

5. How Geolocation works

5.1 GPS Information 5.2 IP Location 5.3 Wireless Network LocationCopy the code

6. Get the current geographic location

getCurrentPosition(onSuccess,onError,[,options])
Copy the code
The navigator 6.1 onsuccess callback. Geolocation. GetCurrentPosition (function (position) {var coords = position. Coords; Var latitude=coords.latitude; Var longtitude=coords.longtitude; })Copy the code
Function (error){switch(error. Code){case error.TIMEOUT: alert(" TIMEOUT!" ); break; Case error.position_unavailable: alert(' Cannot detect current location information! '); break; Case error.PERMISSION_DENIED: alert(' Current browser Settings do not allow sharing location information! '); break; Case error.UNKNOWN_ERROR: alert(' Unknown error! '); break; }}Copy the code
6.3 Options Parameter enableHighAccuracy Specifies whether high precision location information is required. Timeout: specifies the timeout period for obtaining location information. MaximumAge: specifies the validity period for the location information cacheCopy the code

7. Monitor location information

WatchCurrentPosition (onSuccess,onError,[,options])Copy the code

8. Stop obtaining the current location information

ClearWatch (watchID) watchID is the return value of the watchCurrentPosition methodCopy the code

Case 9.

<! DOCTYPE html > <html> <head runat="server"> <script type="text/JavaScript" SRC = "http://api.go2map.com/maps/js/api_v2.0.js" > < / script > < script type = "text/JavaScript" > var map, mapsEventListener; function initialize1() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position){ var coords = position.coords; var latitude = coords.latitude; // Get latitude var longitude = coords.longitude; Var myLatlng = new sogo.maps.latlng (latitude,longitude); // Start calling sogou map API var myLatlng = new sogo.maps.latlng (latitude,longitude); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: sogou.maps.MapTypeId.ROADMAP } map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); Var marker = new sogo.maps. marker ({position: myLatlng, map: map, title:" your current position "}); Var infoWindow = new sogou.maps. infowindow ({content: "longitude: "+longitude: "+latitude: "+latitude}); mapsEventListener=sogou.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); }, function(error){switch(error. Code){case error.TIMEOUT: alert(" TIMEOUT! ); break; Case error.position_unavailable: alert(' Cannot detect current location information! '); break; Case error.PERMISSION_DENIED: alert(' Current browser Settings do not allow sharing location information! '); break; Case error.UNKNOWN_ERROR: alert(' Unknown error! '); break; }}); } } </script> </head> <body onload="initialize1()"> <div id="map_canvas" style="width: 500px; height: 500px"></div> </body> </html>Copy the code