blob: f745f0db608834b2d88bf1181edadf88d7fd81d4 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="description" content="Get information about wireless connectivity. ">
<title>
Network Information - Apache Cordova
</title>
<link rel="SHORTCUT ICON" href="/favicon.ico"/>
<link rel="canonical" href="https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-network-information/">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
<!-- Fonts -->
<!-- For attribution information, see www/attributions.html -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var disqus_developer = 1; // this would set it to developer mode
</script>
<!-- JS -->
<script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<header>
<a class="scroll-point pt-top" name="top"></a>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav_bar_center">
<ul class="nav navbar-nav">
<li class="active">
<a href="/docs/en/latest/">Documentation</a>
</li>
<li >
<a href="/plugins">Plugins</a>
</li>
<li >
<a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
</li>
<li >
<a href="/contribute">Contribute</a>
</li>
<li >
<a href="/contribute/team.html">Team</a>
</li>
<li>
<a href="/#getstarted">Get Started</a>
</li>
<li>
<form class="navbar-form navbar-right" id="header-search-form" role="search">
<div class="input-group">
</div>
</form>
</li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
</header>
<div class="docs">
<!-- Table of Contents -->
<div class="hidden-xs hidden-sm site-toc-container">
<ul class="site-toc">
<li>
<span class="toc-section-heading">
Introduction
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/overview/index.html">
Overview
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Create apps
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/cli/index.html">
Create your first app
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/cli/template.html">
Templates for apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/support/index.html">
Platform support
</a>
</li>
<li>
<span class="toc-section-heading">
Develop for platforms
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/index.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/index.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/index.html">
Windows
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/osx/index.html">
OS X
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/electron/index.html">
Electron
</a>
</li>
</ul>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html">
Manage versions and platforms
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_pinning/index.html">
Platform pinning
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/config_ref/images.html">
Customize icons
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/storage/storage.html">
Store data
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html">
Manage privacy
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/security/index.html">
Manage security
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html">
Allow List
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Create plugins
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html">
Create a plugin
</a>
</li>
<li>
<span class="toc-section-heading">
Develop for platforms
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html">
Windows
</a>
</li>
</ul>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/plugman.html">
Use Plugman
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Advanced Topics
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html">
Embed Cordova in native apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/next/index.html">
Next Steps
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Reference
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/config_ref/index.html">
Config.xml
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-cli/index.html">
CLI Reference
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html">
Hooks
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/spec.html">
Plugin.xml
</a>
</li>
<li>
<span class="toc-section-heading">
Plugin APIs
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html">
Battery Status
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html">
Dialogs
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html">
Inappbrowser
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html">
Media Capture
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html">
Network Information
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html">
Screen Orientation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html">
Statusbar
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html">
Vibration
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- Page content -->
<div class="page-content-container">
<div class="page-content">
<div class="content-header">
<!-- ToC Dropdown (for XS and SM sizes only) -->
<div class="toc-dropdown dropdown visible-xs-block visible-sm-block">
<button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Table of Contents
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="" href="/docs/en/10.x/guide/overview/index.html">
Overview
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/cli/index.html">
Create your first app
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/cli/template.html">
Templates for apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/support/index.html">
Platform support
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/index.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/index.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/index.html">
Windows
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/osx/index.html">
OS X
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/electron/index.html">
Electron
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html">
Manage versions and platforms
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_pinning/index.html">
Platform pinning
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/config_ref/images.html">
Customize icons
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/storage/storage.html">
Store data
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html">
Manage privacy
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/security/index.html">
Manage security
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html">
Allow List
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html">
Create a plugin
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html">
Windows
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/plugman.html">
Use Plugman
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html">
Embed Cordova in native apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/next/index.html">
Next Steps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/config_ref/index.html">
Config.xml
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-cli/index.html">
CLI Reference
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html">
Hooks
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/spec.html">
Plugin.xml
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html">
Battery Status
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html">
Dialogs
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html">
Inappbrowser
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html">
Media Capture
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html">
Network Information
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html">
Screen Orientation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html">
Statusbar
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html">
Vibration
</a>
</li>
</ul>
</div>
<a class="edit hidden-xs hidden-sm" href="https://github.com/apache/cordova-plugin-network-information/blob/master/README.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a>
<!-- Version dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
10.x
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
<!-- List versions available in this language -->
<li>
<a href="/docs/en/dev/" class="missing-page">
dev
</a>
</li>
<li>
<a href="/docs/en/latest/" class="missing-page">
12.x
(Latest)
</a>
</li>
<li>
<a href="/docs/en/11.x/" class="missing-page">
11.x
</a>
</li>
<li>
<a href="/docs/en/10.x/" class="missing-page">
<span class="selected">
10.x
</span>
</a>
</li>
<li>
<a href="/docs/en/9.x/" class="missing-page">
9.x
</a>
</li>
<li>
<a href="/docs/en/8.x/" class="missing-page">
8.x
</a>
</li>
<li>
<a href="/docs/en/7.x/" class="missing-page">
7.x
</a>
</li>
<li>
<a href="/docs/en/6.x/" class="missing-page">
6.x
</a>
</li>
<li>
<a href="/docs/en/5.4.0/" class="missing-page">
5.4.0
</a>
</li>
<li>
<a href="/docs/en/5.1.1/" class="missing-page">
5.1.1
</a>
</li>
<li>
<a href="/docs/en/5.0.0/" class="missing-page">
5.0.0
</a>
</li>
<li>
<a href="/docs/en/4.0.0/" class="missing-page">
4.0.0
</a>
</li>
<li>
<a href="/docs/en/3.6.0/" class="missing-page">
3.6.0
</a>
</li>
<li>
<a href="/docs/en/3.5.0/" class="missing-page">
3.5.0
</a>
</li>
<li>
<a href="/docs/en/3.4.0/" class="missing-page">
3.4.0
</a>
</li>
<li>
<a href="/docs/en/3.3.0/" class="missing-page">
3.3.0
</a>
</li>
<li>
<a href="/docs/en/3.2.0/" class="missing-page">
3.2.0
</a>
</li>
<li>
<a href="/docs/en/3.1.0/" class="missing-page">
3.1.0
</a>
</li>
<li>
<a href="/docs/en/3.0.0/" class="missing-page">
3.0.0
</a>
</li>
<li>
<a href="/docs/en/2.9.0/" class="missing-page">
2.9.0
</a>
</li>
<li>
<a href="/docs/en/2.8.0/" class="missing-page">
2.8.0
</a>
</li>
<li>
<a href="/docs/en/2.7.0/" class="missing-page">
2.7.0
</a>
</li>
<li>
<a href="/docs/en/2.6.0/" class="missing-page">
2.6.0
</a>
</li>
<li>
<a href="/docs/en/2.5.0/" class="missing-page">
2.5.0
</a>
</li>
<li>
<a href="/docs/en/2.4.0/" class="missing-page">
2.4.0
</a>
</li>
<li>
<a href="/docs/en/2.3.0/" class="missing-page">
2.3.0
</a>
</li>
<li>
<a href="/docs/en/2.2.0/" class="missing-page">
2.2.0
</a>
</li>
<li>
<a href="/docs/en/2.1.0/" class="missing-page">
2.1.0
</a>
</li>
<li>
<a href="/docs/en/2.0.0/" class="missing-page">
2.0.0
</a>
</li>
<li>
<a href="/docs/en/1.9.0/" class="missing-page">
1.9.0
</a>
</li>
<li>
<a href="/docs/en/1.8.1/" class="missing-page">
1.8.1
</a>
</li>
<li>
<a href="/docs/en/1.8.0/" class="missing-page">
1.8.0
</a>
</li>
<li>
<a href="/docs/en/1.7.0/" class="missing-page">
1.7.0
</a>
</li>
<li>
<a href="/docs/en/1.6.1/" class="missing-page">
1.6.1
</a>
</li>
<li>
<a href="/docs/en/1.6.0/" class="missing-page">
1.6.0
</a>
</li>
<li>
<a href="/docs/en/1.5.0/" class="missing-page">
1.5.0
</a>
</li>
</ul>
</div>
</div>
<!-- Show warnings for special versions -->
<!-- dev warning -->
<!-- outdated warning -->
<div class="alert docs-alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This version of the documentation is outdated!
<a href="/docs/en/latest/">
Click here for the latest released version.
</a>
</div>
<!-- plugin version warning -->
<div class="alert alert-warning docs-alert" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
master.
<a href="https://github.com/apache/cordova-plugin-network-information/releases">
</a>
</div>
<div id="page-toc-source">
<!-- WARNING: This file is generated. See fetch_docs.js. -->
<!--
# license: Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
-->
<table>
<thead>
<tr>
<th style="text-align: center">AppVeyor</th>
<th style="text-align: center">Travis CI</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><a href="https://ci.appveyor.com/project/ApacheSoftwareFoundation/cordova-plugin-network-information"><img src="https://ci.appveyor.com/api/projects/status/github/apache/cordova-plugin-network-information?branch=master" alt="Build status" /></a></td>
<td style="text-align: center"><a href="https://travis-ci.org/apache/cordova-plugin-network-information"><img src="https://travis-ci.org/apache/cordova-plugin-network-information.svg?branch=master" alt="Build Status" /></a></td>
</tr>
</tbody>
</table>
<h1>cordova-plugin-network-information</h1>
<p>This plugin provides an implementation of an old version of the
<a href="http://www.w3.org/TR/2011/WD-netinfo-api-20110607/">Network Information API</a>.
It provides information about the device&#39;s cellular and
wifi connection, and whether the device has an internet connection.</p>
<blockquote>
<p>To get a few ideas how to use the plugin, check out the <a href="#sample">sample</a> at the bottom of this page or go straight to the <a href="#reference">reference</a> content.</p>
</blockquote>
<h2>Installation</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cordova plugin add cordova-plugin-network-information
</code></pre></div></div>
<h2>Supported Platforms</h2>
<ul>
<li>Android</li>
<li>Browser</li>
<li>iOS</li>
<li>Windows</li>
</ul>
<h1>Connection</h1>
<blockquote>
<p>The <code>connection</code> object, exposed via <code>navigator.connection</code>, provides information about the device&#39;s cellular and wifi connection.</p>
</blockquote>
<h2>Properties</h2>
<ul>
<li>connection.type</li>
</ul>
<h2>Constants</h2>
<ul>
<li>Connection.UNKNOWN</li>
<li>Connection.ETHERNET</li>
<li>Connection.WIFI</li>
<li>Connection.CELL_2G</li>
<li>Connection.CELL_3G</li>
<li>Connection.CELL_4G</li>
<li>Connection.CELL</li>
<li>Connection.NONE</li>
</ul>
<h2>connection.type</h2>
<p>This property offers a fast way to determine the device&#39;s network
connection state, and type of connection.</p>
<h3>Quick Example</h3>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">checkConnection</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">networkState</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">connection</span><span class="p">.</span><span class="nx">type</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">states</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">UNKNOWN</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Unknown connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">ETHERNET</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Ethernet connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">WIFI</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">WiFi connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">CELL_2G</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Cell 2G connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">CELL_3G</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Cell 3G connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">CELL_4G</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Cell 4G connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">CELL</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Cell generic connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">states</span><span class="p">[</span><span class="nx">Connection</span><span class="p">.</span><span class="nx">NONE</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">No network connection</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Connection type: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">states</span><span class="p">[</span><span class="nx">networkState</span><span class="p">]);</span>
<span class="p">}</span>
<span class="nx">checkConnection</span><span class="p">();</span>
</code></pre></div></div>
<h3>iOS Quirks</h3>
<ul>
<li>&lt;iOS7 can&#39;t detect the type of cellular network connection.
<ul>
<li><code>navigator.connection.type</code> is set to <code>Connection.CELL</code> for all cellular data.</li>
</ul>
</li>
</ul>
<h3>Windows Quirks</h3>
<ul>
<li>When running in the Phone 8.1 emulator, always detects <code>navigator.connection.type</code> as <code>Connection.ETHERNET</code>.</li>
</ul>
<h3>Browser Quirks</h3>
<ul>
<li>Browser can&#39;t detect the type of network connection.
<code>navigator.connection.type</code> is always set to <code>Connection.UNKNOWN</code> when online.</li>
</ul>
<h1>Network-related Events</h1>
<h2>offline</h2>
<p>The event fires when an application goes offline, and the device is
not connected to the Internet.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>document.addEventListener("offline", yourCallbackFunction, false);
</code></pre></div></div>
<h3>Details</h3>
<p>The <code>offline</code> event fires when a previously connected device loses a
network connection so that an application can no longer access the
Internet. It relies on the same information as the Connection API,
and fires when the value of <code>connection.type</code> becomes <code>NONE</code>.</p>
<p>Applications typically should use <code>document.addEventListener</code> to
attach an event listener once the <code>deviceready</code> event fires.</p>
<h3>Quick Example</h3>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">offline</span><span class="dl">"</span><span class="p">,</span> <span class="nx">onOffline</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">onOffline</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Handle the offline event</span>
<span class="p">}</span>
</code></pre></div></div>
<h3>Quirks</h3>
<p>This plugin is unable to broadcast events while in the background. Use <code>navigator.connection.type</code> to check connection status on the <a href="https://cordova.apache.org/docs/en/latest/cordova/events/events.html#resume">resume</a> event instead.</p>
<h3>iOS Quirks</h3>
<p>During initial startup, the first offline event (if applicable) takes at least a second to fire.</p>
<h2>online</h2>
<p>This event fires when an application goes online, and the device
becomes connected to the Internet.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>document.addEventListener("online", yourCallbackFunction, false);
</code></pre></div></div>
<h3>Details</h3>
<p>The <code>online</code> event fires when a previously unconnected device receives
a network connection to allow an application access to the Internet.
It relies on the same information as the Connection API,
and fires when the <code>connection.type</code> changes from <code>NONE</code> to any other
value.</p>
<p>Applications typically should use <code>document.addEventListener</code> to
attach an event listener once the <code>deviceready</code> event fires.</p>
<h3>Quick Example</h3>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">online</span><span class="dl">"</span><span class="p">,</span> <span class="nx">onOnline</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">onOnline</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Handle the online event</span>
<span class="p">}</span>
</code></pre></div></div>
<h3>Quirks</h3>
<p>This plugin is unable to broadcast events while in the background. Use <code>navigator.connection.type</code> to check connection status on the <a href="https://cordova.apache.org/docs/en/latest/cordova/events/events.html#resume">resume</a> event instead.</p>
<h3>iOS Quirks</h3>
<p>During initial startup, the first <code>online</code> event (if applicable) takes
at least a second to fire, prior to which <code>connection.type</code> is
<code>UNKNOWN</code>.</p>
<h2>Sample: Upload a File Depending on your Network State <a name="sample"></a></h2>
<p>The code examples in this section show examples of changing app behavior using the online and offline events and your network connection status.</p>
<p>To start with, create a new FileEntry object (data.txt) to use for sample data. Call this function from the <code>deviceready</code> handler.</p>
<blockquote>
<p><em>Note</em> This code example requires the File plugin.</p>
</blockquote>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">dataFileEntry</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">createSomeData</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">requestFileSystem</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">TEMPORARY</span><span class="p">,</span> <span class="mi">5</span> <span class="o">*</span> <span class="mi">1024</span> <span class="o">*</span> <span class="mi">1024</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fs</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">file system open: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="c1">// Creates a new file or returns an existing file.</span>
<span class="nx">fs</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="dl">"</span><span class="s2">data.txt</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">exclusive</span><span class="p">:</span> <span class="kc">false</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dataFileEntry</span> <span class="o">=</span> <span class="nx">fileEntry</span><span class="p">;</span>
<span class="p">},</span> <span class="nx">onErrorCreateFile</span><span class="p">);</span>
<span class="p">},</span> <span class="nx">onErrorLoadFs</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Next, add listeners for the online and offline events in the <code>deviceready</code> handler.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">offline</span><span class="dl">"</span><span class="p">,</span> <span class="nx">onOffline</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">online</span><span class="dl">"</span><span class="p">,</span> <span class="nx">onOnline</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</code></pre></div></div>
<p>The app&#39;s <code>onOnline</code> 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.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">onOnline</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Handle the online event</span>
<span class="kd">var</span> <span class="nx">networkState</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">connection</span><span class="p">.</span><span class="nx">type</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">networkState</span> <span class="o">!==</span> <span class="nx">Connection</span><span class="p">.</span><span class="nx">NONE</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataFileEntry</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">tryToUploadFile</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">display</span><span class="p">(</span><span class="dl">'</span><span class="s1">Connection type: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">networkState</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>When the online event fires in the preceding code, call the app&#39;s <code>tryToUploadFile</code> function.</p>
<p>If the upload fails, then call the app&#39;s <code>offlineWrite</code> function to save the current data somewhere.</p>
<blockquote>
<p><em>Note</em> For simplicity, file reading &amp; writing was omitted. Refer to the <a href="https://github.com/apache/cordova-plugin-file#cordova-plugin-file">cordova-plugin-file</a> documentation for more information on file handling.</p>
</blockquote>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">tryToUploadFile</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// !! Assumes variable fileURL contains a valid URL to a text file on the device,</span>
<span class="kd">var</span> <span class="nx">fileURL</span> <span class="o">=</span> <span class="nx">getDataFileEntry</span><span class="p">().</span><span class="nx">toURL</span><span class="p">();</span>
<span class="nx">getFileBlobSomehow</span><span class="p">(</span><span class="nx">fileURL</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fileBlob</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">success</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Response = </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">r</span><span class="p">.</span><span class="nx">response</span><span class="p">);</span>
<span class="nx">display</span><span class="p">(</span><span class="dl">"</span><span class="s2">Uploaded. Response: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">r</span><span class="p">.</span><span class="nx">response</span><span class="p">);</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">fail</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">An error has occurred: Code = </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">||</span> <span class="nx">error</span><span class="p">.</span><span class="nx">status</span><span class="p">);</span>
<span class="nx">offlineWrite</span><span class="p">(</span><span class="dl">"</span><span class="s2">Failed to upload: some offline data</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="nx">fail</span><span class="p">;</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">ontimeout</span> <span class="o">=</span> <span class="nx">fail</span><span class="p">;</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// If the response code was successful...</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">status</span> <span class="o">&gt;=</span> <span class="mi">200</span> <span class="o">&amp;&amp;</span> <span class="nx">xhr</span><span class="p">.</span><span class="nx">status</span> <span class="o">&lt;</span> <span class="mi">400</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">success</span><span class="p">(</span><span class="nx">xhr</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">fail</span><span class="p">(</span><span class="nx">xhr</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Make sure you add the domain of your server URL to the</span>
<span class="c1">// Content-Security-Policy &lt;meta&gt; element in index.html.</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span> <span class="nb">encodeURI</span><span class="p">(</span><span class="nx">SERVER</span><span class="p">));</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">setRequestHeader</span><span class="p">(</span><span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">text/plain</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// The server request handler could read this header to</span>
<span class="c1">// set the filename.</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">setRequestHeader</span><span class="p">(</span><span class="dl">"</span><span class="s2">X-Filename</span><span class="dl">"</span><span class="p">,</span> <span class="nx">fileURL</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="nx">fileURL</span><span class="p">.</span><span class="nx">lastIndexOf</span><span class="p">(</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">));</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">fileBlob</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">};</span>
</code></pre></div></div>
<p>Here is the code for the <code>offlineWrite</code> function.</p>
<blockquote>
<p><em>Note</em> This code examples requires the File plugin.</p>
</blockquote>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">offlineWrite</span><span class="p">(</span><span class="nx">offlineData</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Create a FileWriter object for our FileEntry.</span>
<span class="nx">dataFileEntry</span><span class="p">.</span><span class="nx">createWriter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">fileWriter</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onwriteend</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Successful file write...</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">display</span><span class="p">(</span><span class="nx">offlineData</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Failed file write: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
<span class="p">};</span>
<span class="nx">fileWriter</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">offlineData</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<p>If the offline event occurs, just do something like notify the user (for this example, just log it).</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">onOffline</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Handle the offline event</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">lost connection</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
</div>
</div>
<div class="row">
<div class="blue-divider"></div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<h1>More Resources</h1>
<div class="row">
<div class="col-sm-4">
<h2>General</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
</li>
<li>
<a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/licenses">License</a>
</li>
<li>
<a href="/artwork">Artwork</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h2>Development</h2>
<ul class="nav">
<li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&amp;q=cordova-">Source Code</a></li>
<li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li>
<li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
<li><a href="/contact">Mailing List</a></li>
<li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
</ul>
</div>
<div class="col-sm-4">
<h2>Apache Software Foundation</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://www.apache.org/">About ASF</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/events/current-event">Events</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/security/">Security</a>
</li>
<li>
<a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<h1>Contribute</h1>
<p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
<p>Report bugs, improve the docs, or contribute to the code.</p>
<a href="/contribute" class="btn btn-lg btn-primary">
Learn More
</a>
<p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
</div>
</div>
<p class="copyright_text">
Copyright &copy; 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/>
Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
<br/>
<p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p>
</p>
</div>
</footer>
</div>
</div>
</div>
<script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script>
<script defer type="text/javascript" src="/static/js/docs.js"></script>
<script defer type="text/javascript" src="/static/js/index.js"></script>
<script defer type="text/javascript" src="/static/js/twitter.js"></script>
</body>
</html>