From 07f74b1ed56bbb1ac59b23d0d4860cb29fae5aa1 Mon Sep 17 00:00:00 2001 From: Jakub Skowron Date: Fri, 13 May 2016 10:21:50 +0200 Subject: [PATCH] Cordova tutorials and guide: Network Information Change-Id: I6383b7f8684f4bcd3b6c0012c9a786c64f035255 Signed-off-by: Jakub Skowron --- org.tizen.guides/html/index.htm | 1 + .../html/web/tizen/cordova/cordova_guide_w.htm | 1 + .../web/tizen/cordova/networkinformation_w.htm | 117 ++++++++++++++++++ org.tizen.tutorials/html/index.htm | 1 + .../html/web/tizen/cordova/cordova_tutorials_w.htm | 2 + .../cordova/networkinformation_tutorial_w.htm | 136 +++++++++++++++++++++ 6 files changed, 258 insertions(+) create mode 100644 org.tizen.guides/html/web/tizen/cordova/networkinformation_w.htm create mode 100644 org.tizen.tutorials/html/web/tizen/cordova/networkinformation_tutorial_w.htm diff --git a/org.tizen.guides/html/index.htm b/org.tizen.guides/html/index.htm index ce55f69..51206f1 100644 --- a/org.tizen.guides/html/index.htm +++ b/org.tizen.guides/html/index.htm @@ -307,6 +307,7 @@ diff --git a/org.tizen.guides/html/web/tizen/cordova/cordova_guide_w.htm b/org.tizen.guides/html/web/tizen/cordova/cordova_guide_w.htm index 854919a..55ff2de 100644 --- a/org.tizen.guides/html/web/tizen/cordova/cordova_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/cordova/cordova_guide_w.htm @@ -38,6 +38,7 @@ diff --git a/org.tizen.guides/html/web/tizen/cordova/networkinformation_w.htm b/org.tizen.guides/html/web/tizen/cordova/networkinformation_w.htm new file mode 100644 index 0000000..e8df512 --- /dev/null +++ b/org.tizen.guides/html/web/tizen/cordova/networkinformation_w.htm @@ -0,0 +1,117 @@ + + + + + + + + + + + + + Network Information + + + + + +
+

Network Information

+ + +

Network Information information about connection (cellular, WiFi, ethernet, etc.) is accessed by reading the property navigator.connection.type. +It is a textual representation of current network status. Each time connection is established or closed, the type changes.

+

Application needs http://tizen.org/privilege/telephony privilege.

+ +

Connection types

+Value of navigator.connection.type can be compared with one of the values in Connection global dictionary. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyValue description
Connection.UNKNOWNConnected, unknown connection.
Connection.ETHERNETEthernet connection
Connection.WIFIWiFi connection
Connection.CELL_2GCellular 2G connection
Connection.CELL_3GCellular 3G connection
Connection.CELL_4GCellular 4G connection
Connection.CELLCellular generic connection
Connection.NONENot connected
+ +

Online and offline events

+

Each time connection type changes from Connection.NONE to any other value, the online event is fired.

+

Each time connection type becomes Connection.NONE, the offline event is fired.

+

To be notified use document.addEventListener to register your callbacks.

+ + + + + + + + + + +
Note
Wait for deviceready event before using Cordova features. + The navigator.connection global object is available earlier, but it is not initialized.
+ + + + +
+ +Go to top + + + + + + + diff --git a/org.tizen.tutorials/html/index.htm b/org.tizen.tutorials/html/index.htm index 1f40353..2de6b5e 100644 --- a/org.tizen.tutorials/html/index.htm +++ b/org.tizen.tutorials/html/index.htm @@ -321,6 +321,7 @@ diff --git a/org.tizen.tutorials/html/web/tizen/cordova/cordova_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/cordova/cordova_tutorials_w.htm index 4990342..a808e7c 100644 --- a/org.tizen.tutorials/html/web/tizen/cordova/cordova_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/cordova/cordova_tutorials_w.htm @@ -40,6 +40,8 @@

Demonstrates how you can log information for debugging purposes.

  • Device: device's hardware and software versions

    Demonstrates how you can get information on model, platform and installed version of Cordova.

    • +
  • Network Information: getting information and status of network connections +

    Demonstrates how you can retrieve information about connection (cellular, WiFi, ethernet, etc.) and how to use connection related events

    • diff --git a/org.tizen.tutorials/html/web/tizen/cordova/networkinformation_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/cordova/networkinformation_tutorial_w.htm new file mode 100644 index 0000000..bec9816 --- /dev/null +++ b/org.tizen.tutorials/html/web/tizen/cordova/networkinformation_tutorial_w.htm @@ -0,0 +1,136 @@ + + + + + + + + + + + + + Network Information: getting information and status of network connections + + + + + + +
    + +

    Network Information: getting information and status of network connections

    + +

    This tutorial demonstrates how you can retrieve information about connection (cellular, WiFi, ethernet, etc.) and use connection related events.

    + +
    + + + + + + + + +
    Note
    Wait for deviceready event before using Cordova features. + 
    document.addEventListener( "deviceready", onDeviceReady );
+
+function onDeviceReady() {
+    //Cordova is ready...
+}
    +
    + +

    Prerequisites

    +

    To use the system setting APIs, the application has to request permission by adding the corresponding privileges to the config.xml file.

    + 
    <tizen:privilege name="http://tizen.org/privilege/telephony"/>
    + +

    Connection type

    +

    + +
      +
    1. +

      Place a div with id="wifi-indicator" somwhere in application HTML for text output.

      + 
      <div id="wifi-indicator">
+</div>
      +
      2. +
    2. +

      Get connection type. It is a case-sensitive string in navigator.connection object. + 

      var state = navigator.connection.type;
      +
      3. +
    3. +

      Compare it to one of the defined values in Connection global dictionary.

      + 
      if( state == Connection.WIFI ) {
+    document.querySelector('#wifi-indicator').textContent = "Connected to WiFi";
+} else {
+    document.querySelector('#wifi-indicator').textContent = "Not connected to WiFi";
+}
      +
      4. +

      This will fill the wifi-indicator div with text if device is connected to WiFi.

      +
    + +

    Network-related Events - online/offline

    +

    We will write handlers for online/offline events.

    +
      +

    1. Register event handlers after Cordova is set up. Most convenient way is to do it when deviceready event fires.

      + 

      document.addEventListener('deviceready', register);
+
+function register() {
+   document.addEventListener('online', went_online);
+   document.addEventListener('offline', went_offline);
+ }
      +
      2. +

    2. Write the handlers

      + 
      function went_online() {
+    console.log("Went online");
+}
+
+function went_offline() {
+    console.log("Went offline");
+}
      +

      The online event fires when connection.type changes from Connection.NONE to any other value. + Similarly, the offline event fires when connection.type becomes Connection.NONE.

      +
      3. +
    + + + + + + +Go to top + + + + + + + -- 2.7.4