mirror of
https://gitee.com/shuto/cordova-plugin-network-information.git
synced 2025-01-19 05:52:49 +08:00
Add code examples. This closes #40.
This commit is contained in:
parent
c176313d50
commit
bc8923ffe1
120
README.md
120
README.md
@ -31,8 +31,12 @@ This plugin provides an implementation of an old version of the
|
|||||||
It provides information about the device's cellular and
|
It provides information about the device's cellular and
|
||||||
wifi connection, and whether the device has an internet connection.
|
wifi connection, and whether the device has an internet connection.
|
||||||
|
|
||||||
|
> To get a few ideas how to use the plugin, check out the [sample](#sample) at the bottom of this page or go straight to the [reference](#reference) content.
|
||||||
|
|
||||||
Report issues with this plugin on the [Apache Cordova issue tracker][Apache Cordova issue tracker].
|
Report issues with this plugin on the [Apache Cordova issue tracker][Apache Cordova issue tracker].
|
||||||
|
|
||||||
|
##<a name="reference"></a>Reference
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
cordova plugin add cordova-plugin-network-information
|
cordova plugin add cordova-plugin-network-information
|
||||||
@ -214,4 +218,120 @@ When running in the Emulator, the `connection.status` is always unknown, so this
|
|||||||
|
|
||||||
The Emulator reports the connection type as `Cellular`, which does not change, so events does _not_ fire.
|
The Emulator reports the connection type as `Cellular`, which does not change, so events does _not_ fire.
|
||||||
|
|
||||||
|
## Sample: Upload a File Depending on your Network State <a name="sample"></a>
|
||||||
|
|
||||||
|
The code examples in this section show examples of changing app behavior using the online and offline events and your network connection status.
|
||||||
|
|
||||||
|
To start with, create a new FileEntry object (data.txt) to use for sample data. Call this function from the `deviceready` handler.
|
||||||
|
|
||||||
|
>*Note* This code example requires the File plugin.
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
var dataFileEntry;
|
||||||
|
|
||||||
|
function createSomeData() {
|
||||||
|
|
||||||
|
window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
|
||||||
|
|
||||||
|
console.log('file system open: ' + fs.name);
|
||||||
|
// Creates a new file or returns an existing file.
|
||||||
|
fs.root.getFile("data.txt", { create: true, exclusive: false }, function (fileEntry) {
|
||||||
|
|
||||||
|
dataFileEntry = fileEntry;
|
||||||
|
|
||||||
|
}, onErrorCreateFile);
|
||||||
|
|
||||||
|
}, onErrorLoadFs);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Next, add listeners for the online and offline events in the `deviceready` handler.
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.addEventListener("offline", onOffline, false);
|
||||||
|
document.addEventListener("online", onOnline, false);
|
||||||
|
```
|
||||||
|
|
||||||
|
The app's `onOnline` function handles the online event. In the event handler, check the current network state. In this app, treat any connection type as good except Connection.NONE. If you have a connection, you try to upload a file.
|
||||||
|
|
||||||
|
```js
|
||||||
|
function onOnline() {
|
||||||
|
// Handle the online event
|
||||||
|
var networkState = navigator.connection.type;
|
||||||
|
|
||||||
|
if (networkState !== Connection.NONE) {
|
||||||
|
if (dataFileEntry) {
|
||||||
|
tryToUploadFile();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
display('Connection type: ' + networkState);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
When the online event fires in the preceding code, call the app's `tryToUploadFile` function.
|
||||||
|
|
||||||
|
If the FileTransfer object's upload function fails, call the app's `offlineWrite` function to save the current data somewhere.
|
||||||
|
|
||||||
|
>*Note* This example requires the FileTransfer plugin.
|
||||||
|
|
||||||
|
```js
|
||||||
|
function tryToUploadFile() {
|
||||||
|
// !! Assumes variable fileURL contains a valid URL to a text file on the device,
|
||||||
|
var fileURL = getDataFileEntry().toURL();
|
||||||
|
|
||||||
|
var success = function (r) {
|
||||||
|
console.log("Response = " + r.response);
|
||||||
|
display("Uploaded. Response: " + r.response);
|
||||||
|
}
|
||||||
|
|
||||||
|
var fail = function (error) {
|
||||||
|
console.log("An error has occurred: Code = " + error.code);
|
||||||
|
offlineWrite("Failed to upload: some offline data");
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = new FileUploadOptions();
|
||||||
|
options.fileKey = "file";
|
||||||
|
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
|
||||||
|
options.mimeType = "text/plain";
|
||||||
|
|
||||||
|
var ft = new FileTransfer();
|
||||||
|
// Make sure you add the domain of your server URL to the
|
||||||
|
// Content-Security-Policy <meta> element in index.html.
|
||||||
|
ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the code for the `offlineWrite` function.
|
||||||
|
|
||||||
|
>*Note* This code examples requires the File plugin.
|
||||||
|
|
||||||
|
```js
|
||||||
|
function offlineWrite(offlineData) {
|
||||||
|
// Create a FileWriter object for our FileEntry.
|
||||||
|
dataFileEntry.createWriter(function (fileWriter) {
|
||||||
|
|
||||||
|
fileWriter.onwriteend = function () {
|
||||||
|
console.log("Successful file write...");
|
||||||
|
display(offlineData);
|
||||||
|
};
|
||||||
|
|
||||||
|
fileWriter.onerror = function (e) {
|
||||||
|
console.log("Failed file write: " + e.toString());
|
||||||
|
};
|
||||||
|
|
||||||
|
fileWriter.write(offlineData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
If the offline event occurs, just do something like notify the user (for this example, just log it).
|
||||||
|
|
||||||
|
```js
|
||||||
|
function onOffline() {
|
||||||
|
// Handle the offline event
|
||||||
|
console.log("lost connection");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
[Apache Cordova issue tracker]: https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20status%20in%20%28Open%2C%20%22In%20Progress%22%2C%20Reopened%29%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20%22Plugin%20Network%20Information%22%20ORDER%20BY%20priority%20DESC%2C%20summary%20ASC%2C%20updatedDate%20DESC
|
[Apache Cordova issue tracker]: https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20status%20in%20%28Open%2C%20%22In%20Progress%22%2C%20Reopened%29%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20%22Plugin%20Network%20Information%22%20ORDER%20BY%20priority%20DESC%2C%20summary%20ASC%2C%20updatedDate%20DESC
|
||||||
|
Loading…
Reference in New Issue
Block a user