PhoneGap-----Device Infomation、Network State and four kinds of Notifications

The first , we can lead how to get the device Infomation ! It's very convenient by Phonegap ! At least , I think so !

[html]
<!DOCTYPE html>
<html >
<head>
<title>My Device</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

   function onLoad()
   {
       document.addEventListener("deviceready",onDeviceReady,false);
   }

   function onDeviceReady()
   {
       var myDiv = document.getElementById('props');
       myDiv.innerHTML = 'Device Name:    ' + device.name     + '<br />' +
                         'Device PhoneGap:' + device.phonegap + '<br />' +
                         'Device Platform:' + device.platform + '<br />' +
                         'Device UUID:    ' + device.uuid     + '<br />' +
                         'Device Version: ' + device.version + '<br />' ;
   }

</script>
</head>
<body onLoad="onLoad()">
   <p id="props">Loading device properties...</p>
</body>
</html>

<!DOCTYPE html>
<html >
<head>
<title>My Device</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

   function onLoad()
   {
    document.addEventListener("deviceready",onDeviceReady,false);
   }

   function onDeviceReady()
   {
    var myDiv = document.getElementById('props');
    myDiv.innerHTML = 'Device Name:    ' + device.name     + '<br />' +
                      'Device PhoneGap:' + device.phonegap + '<br />' +
       'Device Platform:' + device.platform + '<br />' +
       'Device UUID:    ' + device.uuid     + '<br />' +
       'Device Version: ' + device.version + '<br />' ;
   }

</script>
</head>
<body onLoad="onLoad()">
   <p id="props">Loading device properties...</p>
</body>
</html>
    The second , we can check the network state :

[html]
<!DOCTYPE html>
<html >
<head>
<title>Connectivity Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

   document.addEventListener("deviceready",onDeviceReady,false);

   function onDeviceReady()
   {
      checkConnection();
   }

   function checkConnection()
   {
       var networkState = navigator.network.connection.type;

       var states = {};
       states[Connection.UNKNOWN] = 'Unknown connection';
       states[Connection.ETHERNET] = 'Ethernet connection';
       states[Connection.WIFI] = 'Wifi connection';
       states[Connection.CELL_2G] = 'Cell 2G connection';
       states[Connection.CELL_3G] = 'Cell 3G connection';
       states[Connection.CELL_4G] = 'Cell 4G connection';
       states[Connection.NONE] = 'No network connection';

       alert('Connection type:' + states[networkState]);
   }

</script>
</head>
<body>
   <p>A dialog box will report the network state.</p>
</body>
</html>

<!DOCTYPE html>
<html >
<head>
<title>Connectivity Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

补充：web前端 , HTML/CSS  ,