1439 строки
76 KiB
HTML
1439 строки
76 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
|
|
<head>
|
|
<link href="http://gmpg.org/xfn/11" rel="profile">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta property="og:title" content="CodePush" />
|
|
<meta property="og:site_name" content="CodePush"/>
|
|
<meta property="og:description" content="CodePush Blog" />
|
|
<meta property="og:image" content="https://microsoft.github.io/code-push/assets/images/fbshare.PNG" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@Microsoft">
|
|
<meta name="twitter:title" content="CodePush">
|
|
<meta name="twitter:description" content="CodePush Blog">
|
|
<meta name="twitter:image" content="https://microsoft.github.io/code-push/assets/images/fbshare.PNG">
|
|
|
|
<!-- Enable responsiveness on mobile devices-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
|
|
<meta name="description" content="CodePush Blog">
|
|
|
|
<title>
|
|
|
|
Cordova Client SDK · CodePush
|
|
|
|
</title>
|
|
|
|
<!-- build:css /assets/css/vendor.css -->
|
|
<link rel="stylesheet" href="/code-push/libraries/bootstrap/dist/css/bootstrap.css" />
|
|
<link rel="stylesheet" href="/code-push/libraries/highlightjs/styles/solarized_light.css">
|
|
<link rel="stylesheet" href="/code-push/libraries/font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="/code-push/libraries/github-fork-ribbon-css/gh-fork-ribbon.css">
|
|
<!-- endbuild -->
|
|
|
|
<!-- CSS -->
|
|
<!-- build:css /assets/css/style.min.css -->
|
|
<link rel="stylesheet" href="/code-push/assets/stylesheets/style.css">
|
|
<link rel="stylesheet" href="/code-push/assets/stylesheets/ga.style.css">
|
|
<!-- endbuild -->
|
|
|
|
<!-- Icons --> <!-- TODO: Check that these all wok -->
|
|
<link rel="apple-touch-icon" sizes="57x57" href="/code-push/assets/images/icons/apple-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="/code-push/assets/images/icons/apple-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="/code-push/assets/images/icons/apple-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/code-push/assets/images/icons/apple-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="/code-push/assets/images/icons/apple-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="/code-push/assets/images/icons/apple-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="/code-push/assets/images/icons/apple-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/code-push/assets/images/icons/apple-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/code-push/assets/images/icons/apple-icon-180x180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/code-push/assets/images/icons/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/code-push/assets/images/icons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/code-push/assets/images/icons/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/code-push/assets/images/icons/favicon-16x16.png">
|
|
<link rel="manifest" href="/code-push/assets/images/icons/manifest.json">
|
|
<meta name="msapplication-TileColor" content="#294E80">
|
|
<meta name="msapplication-TileImage" content="/code-push/assets/images/icons/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<!-- JS -->
|
|
<!-- Redirect logic from this docs(as it was depricated) to new docs https://docs.microsoft.com/en-us/appcenter/distribution/codepush/ -->
|
|
<script src="/code-push/assets/javascript/redirect.js"></script>
|
|
|
|
<!-- build:js /assets/js/vendors.js -->
|
|
<script src="/code-push/libraries/jquery/dist/jquery.min.js"></script>
|
|
<script src="/code-push/libraries/bootstrap/dist/js/bootstrap.js"></script>
|
|
<script src="/code-push/libraries/zeroclipboard/dist/ZeroClipboard.min.js"></script>
|
|
<script src="/code-push/libraries/anchorific.js/min/anchorific.min.js"></script>
|
|
<script src="/code-push/libraries/toc/dist/toc.min.js"></script>
|
|
<script src="/code-push/libraries/highlightjs/highlight.pack.min.js"></script>
|
|
<!-- endbuild -->
|
|
|
|
<!-- build:js /assets/js/all.min.js -->
|
|
<script src="/code-push/assets/javascript/global.js"></script>
|
|
<script src="/code-push/assets/javascript/home.js"></script>
|
|
<script src="/code-push/assets/javascript/docs.js"></script>
|
|
<script src="/code-push/assets/javascript/faq.js"></script>
|
|
<!-- endbuild -->
|
|
|
|
<!-- RSS -->
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="/code-push/atom.xml">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<header role="banner">
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
|
<div class="container-fluid">
|
|
<!--<img class="fork-me-ribbon pull-right" src="../assets/images/fork_me_ribbon.svg" />-->
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle pull-left collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<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="/code-push/index.html">
|
|
<img class="navbar-logo" src="/code-push/assets/images/codepush_navbar_logo.svg">
|
|
<sup class="navbar-logo-text">PREVIEW</sup>
|
|
</image>
|
|
</a>
|
|
</div>
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse navbar_center" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav">
|
|
<li class=""><a href="/code-push/index.html#getting_started">Getting Started</a></li>
|
|
<li class="active"><a href="/code-push/docs/index.html">Documentation</a></li>
|
|
<li class=""><a href="/code-push/faq/index.html">FAQ</a></li>
|
|
<li class=""><a href="/code-push/blog/index.html">Blog</a></li>
|
|
<li class=""><a href="/code-push/community/friends.html">Showcase</a></li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
</header>
|
|
<div class="top_navbar_spacer"></div>
|
|
<div class="docs">
|
|
<div id="content" class="container main_content">
|
|
<div class="col-md-3 toc-container hidden-sm hidden-xs">
|
|
<div class="row">
|
|
<div class='site-toc-container'>
|
|
<h2 class="site-toc-title">Table of Contents</h2>
|
|
<ul class="site-toc">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="" href="/code-push/docs/getting-started.html">
|
|
Getting Started
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="" href="/code-push/docs/tutorials.html">
|
|
Tutorials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="" href="/code-push/docs/cli.html">
|
|
Management CLI
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="" href="/code-push/docs/node.html">
|
|
Management SDK
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="this-page" href="/code-push/docs/cordova.html">
|
|
Cordova Client SDK
|
|
</a>
|
|
|
|
<div id="page-toc" class="page-toc"></div>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="" href="/code-push/docs/react-native.html">
|
|
React Native Client SDK
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a class="" href="/code-push/docs/vsts-extension.html">
|
|
VSTS Extension
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7 col-md-offset-1">
|
|
<div class="row">
|
|
<div class="xs-toc-container visible-sm visible-xs">
|
|
<nav class='xs-toc'>
|
|
<div class="toc-dropdown dropdown">
|
|
<h2 class="site-toc-title">Table of Contents</h2>
|
|
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
|
|
Select topic
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/getting-started.html>Getting Started</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/tutorials.html>Tutorials</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/cli.html>Management CLI</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/node.html>Management SDK</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/cordova.html>Cordova Client SDK</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/react-native.html>React Native Client SDK</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href=/code-push/docs/vsts-extension.html>VSTS Extension</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<header class="doc-header">
|
|
<h1 class="doc-title">Cordova Client SDK</h1>
|
|
<!--<ul class="nav" style="display:inline-block;"><li><a class="edit-page-link" style="padding-left:0" href="https://microsoft.github.io/code-push_docs/Cordova.md" target="_blank"><span class="glyphicon glyphicon-pencil"></span><i> </i>Edit on GitHub</a></li></ul>-->
|
|
</header>
|
|
<article class="doc-content">
|
|
<p>This plugin provides client-side integration for the <a href="http://codepush.tools">CodePush service</a>, allowing you to easily add a dynamic update experience to your Cordova app(s).</p>
|
|
|
|
<h2>How does it work?</h2>
|
|
|
|
<p>A Cordova app is composed of HTML, CSS and JavaScript files and any accompanying images, which are bundled together by the Cordova CLI and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.</p>
|
|
|
|
<p>The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your code and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the “web-like” agility of side-loading updates as soon as they are available. It’s a win-win!</p>
|
|
|
|
<p>In order to ensure that your end users always have a functioning version of your app, the CodePush plugin maintains a copy of the previous update, so that in the event that you accidentally push an update which includes a crash, it can automatically roll back. This way, you can rest assured that your newfound release agility won’t result in users becoming blocked before you have a chance to roll back on the server. It’s a win-win-win!</p>
|
|
|
|
<p><em>Note: Any product changes which touch native code (e.g. upgrading Cordova versions, adding a new plugin) cannot be distributed via CodePush, and therefore, must be updated via the appropriate store(s).</em></p>
|
|
|
|
<h2>Supported Cordova Platforms</h2>
|
|
|
|
<p>Cordova 5.0.0+ is fully supported, along with the following asociated platforms:</p>
|
|
|
|
<ul>
|
|
<li>Android (<a href="https://github.com/apache/cordova-android">cordova-android</a> 4.0.0+) - <em>Including CrossWalk!</em> </li>
|
|
<li>iOS (<a href="https://github.com/apache/cordova-ios">cordova-ios</a> 3.9.0+) - <em>Note: In order to use CodePush along with the <a href="https://github.com/apache/cordova-plugin-wkwebview-engine"><code>cordova-plugin-wkwebview-engine</code></a> plugin, you need to install <code>v1.5.1-beta+</code>, which includes full support for apps using either WebView.</em></li>
|
|
</ul>
|
|
|
|
<p>To check which versions of each Cordova platform you are currently using, you can run the following command and inspect the <code>Installed platforms</code> list:</p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell">cordova platform ls
|
|
</code></pre></div>
|
|
<p>If you’re running an older Android and/or iOS platform than is mentioned above, and would be open to upgrading, you can easily do so by running the following commands (omitting a platform if it isn’t neccessary):</p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell">cordova platform update android
|
|
cordova platform update ios
|
|
</code></pre></div>
|
|
<h2>Getting Started</h2>
|
|
|
|
<p>Once you’ve followed the general-purpose <a href="http://microsoft.github.io/code-push//docs/getting-started.html">“getting started”</a> instructions for setting up your CodePush account, you can start CodePush-ifying your Cordova app by running the following command from within your app’s root directory:</p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell">cordova plugin add cordova-plugin-code-push@latest
|
|
</code></pre></div>
|
|
<p>With the CodePush plugin installed, configure your app to use it via the following steps:</p>
|
|
|
|
<ol>
|
|
<li><p>Add your deployment keys to the <code>config.xml</code> file, making sure to include the right key for each Cordova platform:</p>
|
|
<div class="highlight"><pre><code class="language-xml" data-lang="xml"><platform name="android">
|
|
<preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
|
|
</platform>
|
|
<platform name="ios">
|
|
<preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
|
|
</platform>
|
|
</code></pre></div>
|
|
<p>As a reminder, these keys are generated for you when you created your CodePush app via the CLI. If you need to retrieve them, you can simply run <code>code-push deployment ls APP_NAME -k</code>, and grab the key for the specific deployment you want to use (e.g. <code>Staging</code>, <code>Production</code>).</p>
|
|
|
|
<p><em>NOTE: We <a href="http://microsoft.github.io/code-push/docs/cli.html#link-4">recommend</a> creating a separate CodePush app for iOS and Android, which is why the above sample illustrates declaring seperate keys for Android and iOS. If you’re only developing for a single platform, then you only need to specify the deployment key for either Android or iOS, so you don’t need to add the additional <code><platform></code> element as illustrated above.</em></p></li>
|
|
<li><p>If you’re using an <code><access origin="*" /></code> element in your <code>config.xml</code> file, then your app is already allowed to communicate with the CodePush servers and you can safely skip this step. Otherwise, add the following additional <code><access /></code> elements:</p>
|
|
<div class="highlight"><pre><code class="language-xml" data-lang="xml"><access origin="https://codepush.azurewebsites.net" />
|
|
<access origin="https://codepush.blob.core.windows.net" />
|
|
<access origin="https://codepushupdates.azureedge.net" />
|
|
</code></pre></div></li>
|
|
<li><p>To ensure that your app can access the CodePush server on <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy">CSP</a>-compliant platforms, add <code>https://codepush.azurewebsites.net</code> to the <code>Content-Security-Policy</code> <code>meta</code> tag in your <code>index.html</code> file:</p>
|
|
<div class="highlight"><pre><code class="language-xml" data-lang="xml"><meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />
|
|
</code></pre></div></li>
|
|
<li><p>Finally, double-check that you already have the <a href="https://github.com/apache/cordova-plugin-whitelist"><code>cordova-plugin-whitelist</code></a> plugin installed (most apps will). To check this, simply run the following command:</p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell">cordova plugin ls
|
|
</code></pre></div>
|
|
<p>If <code>cordova-plugin-whitelist</code> is in the list, then you are good to go. Otherwise, simply run the following command to add it:</p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell">cordova plugin add cordova-plugin-whitelist
|
|
</code></pre></div></li>
|
|
</ol>
|
|
|
|
<p>You are now ready to use the plugin in the application code. See the <a href="/samples">sample applications</a> for examples and the API documentation for more details.</p>
|
|
|
|
<h2>Plugin Usage</h2>
|
|
|
|
<p>With the CodePush plugin installed and configured, the only thing left is to add the necessary code to your app to control the following policies:</p>
|
|
|
|
<ol>
|
|
<li><p>When (and how often) to check for an update? (e.g. app start, in response to clicking a button in a settings page, periodically at some fixed interval)</p></li>
|
|
<li><p>When an update is available, how to present it to the end user?</p></li>
|
|
</ol>
|
|
|
|
<p>The simplest way to do this is to perform the following in your app’s <code>deviceready</code> event handler:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.sync();
|
|
</code></pre></div>
|
|
<p>If an update is available, it will be silently downloaded, and installed the next time the app is restarted (either explicitly by the end user or by the OS), which ensures the least invasive experience for your end users. If an available update is mandatory, then it will be installed immediately, ensuring that the end user gets it as soon as possible.</p>
|
|
|
|
<p>If you would like your app to discover updates more quickly, you can also choose to call <code>sync</code> every time the app resumes from the background, by adding the following code (or something equivalent) as part of your app’s startup behavior. You can call <code>sync</code> as frequently as you would like, so when and where you call it just depends on your personal preference.</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">document.addEventListener("resume", function () {
|
|
codePush.sync();
|
|
});
|
|
</code></pre></div>
|
|
<p>Additionally, if you would like to display an update confirmation dialog (an “active install”), configure when an available update is installed (e.g. force an immediate restart) or customize the update experience in any way, refer to the <code>sync</code> method’s API reference for information on how to tweak this default behavior.</p>
|
|
|
|
<p><em>NOTE: While <a href="https://developer.apple.com/programs/ios/information/iOS_Program_Information_4_3_15.pdf">Apple’s developer agreement</a> fully allows performing over-the-air updates of JavaScript and assets (which is what enables CodePush!), it is against their policy for an app to display an update prompt. Because of this, we recommend that App Store-distributed apps don’t enable the <code>updateDialog</code> option when calling <code>sync</code>, whereas Google Play and internally distributed apps (e.g. Enterprise, Fabric, HockeyApp) can choose to enable/customize it.</em></p>
|
|
|
|
<h2>Releasing Updates</h2>
|
|
|
|
<p>Once your app has been configured and distributed to your users, and you’ve made some code and/or asset changes, it’s time to instantly release them! The simplest (and recommended) way to do this is to use the <code>release-cordova</code> comand in the CodePush CLI, which will handle preparing and releasing your update to the CodePush server. </p>
|
|
|
|
<p>In it’s most basic form, this command only requires two parameters: your app name and the platform you are creating the update for (either <code>ios</code> or <code>android</code>).</p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell">code-push release-cordova <appName> <platform>
|
|
|
|
code-push release-cordova MyApp-ios ios
|
|
code-push release-cordova MyApp-Android android
|
|
</code></pre></div>
|
|
<p><em>NOTE: When releasing updates to CodePush, you do not need to bump your app’s version in the <code>config.xml</code> file, since you aren’t modifying the app store version at all. You only need to bump this version when you upgrade Cordova and/or one of your plugins, at which point, you need to release an update to the native store(s). CodePush will automatically generate a “label” for each release you make (e.g. <code>v3</code>) in order to help identify it within your release history.</em></p>
|
|
|
|
<p>The <code>release-cordova</code> command enables such a simple workflow because it understands the standard layout of a Cordova app, and therefore, can generate your update and know exactly which files to upload. Additionally, in order to support flexible release strategies, the <code>release-cordova</code> command exposes numerous optional parameters that let you customize how the update should be distributed to your end users (e.g. Which binary versions are compatible with it? Should the release be viewed as mandatory?). </p>
|
|
<div class="highlight"><pre><code class="language-shell" data-lang="shell"># Release a mandatory update with a changelog
|
|
code-push release-cordova MyApp-ios ios -m --description "Modified the header color"
|
|
|
|
# Release a dev Android build to just 1/4 of your end users
|
|
code-push release-cordova MyApp-Android android --rollout 25%
|
|
|
|
# Release an update that targets users running any 1.1.* binary, as opposed to
|
|
# limiting the update to exact version name in the config.xml file
|
|
code-push release-cordova MyApp-Android android --targetBinaryVersion "~1.1.0"
|
|
|
|
# Release the update now but mark it as disabled
|
|
# so that no users can download it yet
|
|
code-push release-cordova MyApp-ios ios -x
|
|
</code></pre></div>
|
|
<p>The CodePush client supports differential updates, so even though you are releasing your app code on every update, your end users will only actually download the files they need. The service handles this automatically so that you can focus on creating awesome apps and we can worry about optimizing end user downloads.</p>
|
|
|
|
<p>For more details about how the <code>release-cordova</code> command works, as well as the various parameters it exposes, refer to the <a href="https://github.com/Microsoft/code-push/tree/master/cli#releasing-updates-cordova">CLI docs</a>. Additionally, if you would prefer to handle running the <code>cordova prepare</code> command yourself, and therefore, want an even more flexible solution than <code>release-cordova</code>, refer to the <a href="https://github.com/Microsoft/code-push/tree/master/cli#releasing-updates-general"><code>release</code> command</a> for more details.</p>
|
|
|
|
<p>If you run into any issues, or have any questions/comments/feedback, you can <a href="mailto:codepushfeed@microsoft.com">e-mail us</a> and/or open a new issue on this repo and we’ll respond ASAP!</p>
|
|
|
|
<h2>API Reference</h2>
|
|
|
|
<p>The CodePush API is exposed to your app via the global <code>codePush</code> object, which is available after the <code>deviceready</code> event fires. This API exposes the following top-level methods:</p>
|
|
|
|
<ul>
|
|
<li><p><strong><a href="#codepushcheckforupdate">checkForUpdate</a></strong>: Asks the CodePush service whether the configured app deployment has an update available.</p></li>
|
|
<li><p><strong><a href="#codepushgetcurrentpackage">getCurrentPackage</a></strong>: Retrieves the metadata about the currently installed update (e.g. description, installation time, size).</p></li>
|
|
<li><p><strong><a href="#codepushgetpendingpackage">getPendingPackage</a></strong>: Retrieves the metadata for an update (if one exists) that was downloaded and installed, but hasn’t been applied yet via a restart.</p></li>
|
|
<li><p><strong><a href="#codepushnotifyapplicationready">notifyApplicationReady</a></strong>: Notifies the CodePush runtime that an installed update is considered successful. If you are manually checking for and installing updates (i.e. not using the sync method to handle it all for you), then this method <strong>MUST</strong> be called; otherwise CodePush will treat the update as failed and rollback to the previous version when the app next restarts.</p></li>
|
|
<li><p><strong><a href="#codepushrestartapplication">restartApplication</a></strong>: Immediately restarts the app. If there is an update pending, it will be immediately displayed to the end user.</p></li>
|
|
<li><p><strong><a href="#codepushsync">sync</a></strong>: Allows checking for an update, downloading it and installing it, all with a single call. Unless you need custom UI and/or behavior, we recommend most developers to use this method when integrating CodePush into their apps.</p></li>
|
|
</ul>
|
|
|
|
<p>Additionally, the following objects and enums are also exposed globally as part of the CodePush API:</p>
|
|
|
|
<ul>
|
|
<li><p><strong><a href="#installmode">InstallMode</a></strong>: Defines the available install modes for updates.</p></li>
|
|
<li><p><strong><a href="#localpackage">LocalPackage</a></strong>: Contains information about a locally installed package.</p></li>
|
|
<li><p><strong><a href="#remotepackage">RemotePackage</a></strong>: Contains information about an update package available for download.</p></li>
|
|
<li><p><strong><a href="#syncstatus">SyncStatus</a></strong>: Defines the possible intermediate and result statuses of the <a href="#codepushsync">sync</a> operation.</p></li>
|
|
</ul>
|
|
|
|
<h3>codePush.checkForUpdate</h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.checkForUpdate(onSuccess, onError?, deploymentKey?: String);
|
|
</code></pre></div>
|
|
<p>Queries the CodePush service to see whether the configured app deployment has an update available. By default, it will use the deployment key that is configured in your <code>config.xml</code> file, but you can override that by specifying a value via the optional <code>deploymentKey</code> parameter. This can be useful when you want to dynamically “redirect” a user to a specific deployment, such as allowing “Early access” via an easter egg or a user setting switch.</p>
|
|
|
|
<p>When the update check completes, it will trigger the <code>onUpdateCheck</code> callback with one of two possible values:</p>
|
|
|
|
<ol>
|
|
<li><p><code>null</code> if there is no update available. This occurs in the following scenarios:</p>
|
|
|
|
<ol>
|
|
<li>The configured deployment doesn’t contain any releases, and therefore, nothing to update.</li>
|
|
<li>The latest release within the configured deployment is targeting a different binary version than what you’re currently running (either older or newer).</li>
|
|
<li>The currently running app already has the latest release from the configured deployment, and therefore, doesn’t need it again.</li>
|
|
</ol></li>
|
|
<li><p>A <code>RemotePackage</code> instance which represents an available update that can be inspected and/or subsequently downloaded.</p></li>
|
|
</ol>
|
|
|
|
<p>Parameters:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>onSuccess</strong>: Callback that is invoked upon receiving a successful response from the server. The callback receives a single parameter, which is described above.</p></li>
|
|
<li><p><strong>onError</strong>: Optional callback that is invoked in the event of an error. The callback takes one error parameter, containing the details of the error.</p></li>
|
|
<li><p><strong>deploymentKey</strong>: Optional deployment key that overrides the <code>config.xml</code> setting.</p></li>
|
|
</ul>
|
|
|
|
<p>Example usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.checkForUpdate(function (update) {
|
|
if (!update) {
|
|
console.log("The app is up to date.");
|
|
} else {
|
|
console.log("An update is available! Should we download it?");
|
|
}
|
|
});
|
|
</code></pre></div>
|
|
<h3>codePush.getCurrentPackage</h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.getCurrentPackage(onSuccess, onError?);
|
|
</code></pre></div>
|
|
<p>Retrieves the metadata about the currently installed “package” (e.g. description, installation time). This can be useful for scenarios such as displaying a “what’s new?” dialog after an update has been applied or checking whether there is a pending update that is waiting to be applied via a resume or restart.</p>
|
|
|
|
<p>When the update retrieval completes, it will trigger the <code>onSuccess</code> callback with one of two possible values:</p>
|
|
|
|
<ol>
|
|
<li><p><code>null</code> if the app is currently running the HTML start page from the binary and not a CodePush update. This occurs in the following scenarios:</p>
|
|
|
|
<ol>
|
|
<li>The end-user installed the app binary and has yet to install a CodePush update</li>
|
|
<li>The end-user installed an update of the binary (e.g. from the store), which cleared away the old CodePush updates, and gave precedence back to the binary.</li>
|
|
</ol></li>
|
|
<li><p>A <code>LocalPackage</code> instance which represents the metadata for the currently running CodePush update.</p></li>
|
|
</ol>
|
|
|
|
<p>Parameters:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>onSuccess</strong>: Callback that is invoked upon receiving the metadata about the currently running update. The callback receives a single parameter, which is described above.</p></li>
|
|
<li><p><strong>onError</strong>: Optional callback that is invoked in the event of an error. The callback takes one error parameter, containing the details of the error.</p></li>
|
|
</ul>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.getCurrentPackage(function (update) {
|
|
if (!update) {
|
|
console.log("No updates have been installed");
|
|
return;
|
|
}
|
|
|
|
// If the current app "session" represents the first time
|
|
// this update has run, and it had a description provided
|
|
// with it upon release, let's show it to the end user
|
|
if (update.isFirstRun && update.description) {
|
|
// Display a "what's new?" modal
|
|
}
|
|
});
|
|
</code></pre></div>
|
|
<h3>codePush.getPendingPackage</h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.getPendingPackage(onSuccess, onError?);
|
|
</code></pre></div>
|
|
<p>Gets the metadata for the currently pending update (if one exists). An update is considered “pending” if it has been downloaded and installed, but hasn’t been applied yet via an app restart. An update could only ever be in this state if <code>InstallMode.ON_NEXT_RESTART</code> or <code>InstallMode.ON_NEXT_RESUME</code> were specified upon calling <code>sync</code> or <code>LocalPackage.install</code>, and the app hasn’t yet been restarted or resumed (respectively). This method can be useful if you’d like to determine whether there is a pending update and then prompt the user if they would like to restart now (via <code>codePush.restartApplication</code>) in order to apply it.</p>
|
|
|
|
<p>When the update retrieval completes, it will trigger the <code>onSuccess</code> callback with one of two possible values:</p>
|
|
|
|
<ol>
|
|
<li><p><code>null</code> if the app doesn’t currently have a pending update (e.g. the app is already running the latest available version).</p></li>
|
|
<li><p>A <code>LocalPackage</code> instance which represents the metadata for the currently pending CodePush update.</p></li>
|
|
</ol>
|
|
|
|
<p>Parameters:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>onSuccess</strong>: Callback that is invoked upon receiving the metadata about the currently pending update. The callback receives a single parameter, which is described above.</p></li>
|
|
<li><p><strong>onError</strong>: Optional callback that is invoked in the event of an error. The callback takes one error parameter, containing the details of the error.</p></li>
|
|
</ul>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.getPendingPackage(function (update) {
|
|
if (update) {
|
|
// An update is currently pending, ask the
|
|
// user if they would like to restart
|
|
}
|
|
});
|
|
</code></pre></div>
|
|
<h3>codePush.notifyApplicationReady</h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.notifyApplicationReady(notifySucceeded?, notifyFailed?);
|
|
</code></pre></div>
|
|
<p>Notifies the CodePush runtime that a freshly installed update should be considered successful, and therefore, an automatic client-side rollback isn’t necessary. It is mandatory to call this function somewhere in the code of the updated bundle. Otherwise, when the app next restarts, the CodePush runtime will assume that the installed update has failed and roll back to the previous version. This behavior exists to help ensure that your end users aren’t blocked by a broken update.</p>
|
|
|
|
<p>If you are using the <code>sync</code> function, and doing your update check on app start, then you don’t need to manually call <code>notifyApplicationReady</code> since <code>sync</code> will call it for you. This behavior exists due to the assumption that the point at which <code>sync</code> is called in your app represents a good approximation of a successful startup.</p>
|
|
|
|
<p>Parameters:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>notifySucceeded</strong>: Optional callback invoked if the plugin was successfully notified.</p></li>
|
|
<li><p><strong>notifyFailed</strong>: Optional callback invoked in case of an error during notifying the plugin.</p></li>
|
|
</ul>
|
|
|
|
<h3>codePush.restartApplication</h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.restartApplication();
|
|
</code></pre></div>
|
|
<p>Immediately restarts the app. This method is for advanced scenarios, and is primarily useful when the following conditions are true:</p>
|
|
|
|
<ol>
|
|
<li><p>Your app is specifying an install mode value of <code>ON_NEXT_RESTART</code> or <code>ON_NEXT_RESUME</code> when calling the <code>sync</code> or <code>LocalPackage.install</code> methods. This has the effect of not applying your update until the app has been restarted (by either the end user or OS) or resumed, and therefore, the update won’t be immediately displayed to the end user.</p></li>
|
|
<li><p>You have an app-specific user event (e.g. the end user navigated back to the app’s home route) that allows you to apply the update in an unobtrusive way, and potentially gets the update in front of the end user sooner then waiting until the next restart or resume.</p></li>
|
|
</ol>
|
|
|
|
<h3>codePush.sync</h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">codePush.sync(syncCallback?, syncOptions?, downloadProgress?);
|
|
</code></pre></div>
|
|
<p>Synchronizes your app’s code and images with the latest release to the configured deployment. Unlike the <code>checkForUpdate</code> method, which simply checks for the presence of an update, and let’s you control what to do next, <code>sync</code> handles the update check, download and installation experience for you.</p>
|
|
|
|
<p>This method provides support for two different (but customizable) “modes” to easily enable apps with different requirements:</p>
|
|
|
|
<ol>
|
|
<li><p><strong>Silent mode</strong> <em>(the default behavior)</em>, which automatically downloads available updates, and applies them the next time the app restarts (e.g. the OS or end user killed it, or the device was restarted). This way, the entire update experience is “silent” to the end user, since they don’t see any update prompt and/or “synthetic” app restarts.</p></li>
|
|
<li><p><strong>Active mode</strong>, which when an update is available, prompts the end user for permission before downloading it, and then immediately applies the update. If an update was released using the mandatory flag, the end user would still be notified about the update, but they wouldn’t have the choice to ignore it.</p></li>
|
|
</ol>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">// Fully silent update which keeps the app in
|
|
// sync with the server, without ever
|
|
// interrupting the end user
|
|
codePush.sync();
|
|
|
|
// Active update, which lets the end user know
|
|
// about each update, and displays it to them
|
|
// immediately after downloading it
|
|
codePush.sync(null, { updateDialog: true, installMode: InstallMode.IMMEDIATE });
|
|
</code></pre></div>
|
|
<p><em>Note: If you want to decide whether you check and/or download an available update based on the end user’s device battery level, network conditions, etc. then simply wrap the call to sync in a condition that ensures you only call it when desired.</em></p>
|
|
|
|
<p>While the sync method tries to make it easy to perform silent and active updates with little configuration, it accepts the following optional parameters which allow you to customize numerous aspects of the default behavior mentioned above:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>syncCallback</strong>: Called when the sync process moves from one stage to another in the overall update process. The method is called with a status code which represents the current state, and can be any of the <a href="#syncstatus"><code>SyncStatus</code></a> values.</p></li>
|
|
<li><p><strong>syncOptions</strong>: Optional <a href="#syncoptions"><code>SyncOptions</code></a> parameter configuring the behavior of the sync operation.</p></li>
|
|
<li><p><strong>downloadProgress</strong>: Called periodically when an available update is being downloaded from the CodePush server. The method is called with a <code>DownloadProgress</code> object, which contains the following two properties:</p>
|
|
|
|
<ul>
|
|
<li><strong>totalBytes</strong> <em>(Number)</em> - The total number of bytes expected to be received for this update (i.e. the size of the set of files which changed from the previous release).</li>
|
|
<li><strong>receivedBytes</strong> <em>(Number)</em> - The number of bytes downloaded thus far, which can be used to track download progress.</li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<h4>SyncOptions</h4>
|
|
|
|
<p>While the <code>sync</code> method tries to make it easy to perform silent and active updates with little configuration, it accepts an “options” object that allows you to customize numerous aspects of the default behavior mentioned above:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>deploymentKey</strong> <em>(String)</em> - Specifies the deployment key you want to query for an update against. By default, this value is derived from the <code>config.xml</code> file, but this option allows you to override it from the script-side if you need to dynamically use a different deployment for a specific call to <code>sync</code>.</p></li>
|
|
<li><p><strong>installMode</strong> <em>(InstallMode)</em> - Specifies when you would like to install optional updates (i.e. those that aren’t marked as mandatory). Defaults to <code>InstallMode.ON_NEXT_RESTART</code>. Refer to the <a href="#installmode"><code>InstallMode</code></a> enum reference for a description of the available options and what they do.</p></li>
|
|
<li><p><strong>mandatoryInstallMode</strong> <em>(InstallMode)</em> - Specifies when you would like to install updates which are marked as mandatory. Defaults to <code>InstallMode.IMMEDIATE</code>. Refer to the <a href="#installmode"><code>InstallMode</code></a> enum reference for a description of the available options and what they do.</p></li>
|
|
<li><p><strong>minimumBackgroundDuration</strong> <em>(Number)</em> - Specifies the minimum number of seconds that the app needs to have been in the background before restarting the app. This property only applies to updates which are installed using <code>InstallMode.ON_NEXT_RESUME</code>, and can be useful for getting your update in front of end users sooner, without being too obtrusive. Defaults to <code>0</code>, which has the effect of applying the update immediately after a resume, regardless how long it was in the background.</p></li>
|
|
<li><p><strong>ignoreFailedUpdates</strong> <em>(Boolean)</em> - Specifies whether an available update should be ignored if it had been previously installed and rolled back on the client (because <code>notifyApplicationReady</code> wasn’t successfully called). Defaults to <code>true</code>.</p></li>
|
|
<li><p><strong>updateDialog</strong> <em>(UpdateDialogOptions)</em> - An “options” object used to determine whether a confirmation dialog should be displayed to the end user when an update is available, and if so, what strings to use. Defaults to <code>null</code>, which has the effect of disabling the dialog completely. Setting this to any truthy value will enable the dialog with the default strings, and passing an object to this parameter allows enabling the dialog as well as overriding one or more of the default strings.</p>
|
|
|
|
<p>The following list represents the available options and their defaults:</p>
|
|
|
|
<ul>
|
|
<li><strong>appendReleaseDescription</strong> <em>(Boolean)</em> - Indicates whether you would like to append the description of an available release to the notification message which is displayed to the end user. Defaults to <code>false</code>.</li>
|
|
<li><strong>descriptionPrefix</strong> <em>(String)</em> - Indicates the string you would like to prefix the release description with, if any, when displaying the update notification to the end user. Defaults to <code>" Description: "</code>.</li>
|
|
<li><strong>mandatoryContinueButtonLabel</strong> <em>(String)</em>: The text to use for the button the end user must press in order to install a mandatory update. Defaults to <code>"Continue"</code>.</li>
|
|
<li><strong>mandatoryUpdateMessage</strong> <em>(String)</em> - The text used as the body of an update notification, when the update is specified as mandatory. Defaults to <code>"An update is available that must be installed."</code>.</li>
|
|
<li><strong>optionalIgnoreButtonLabel</strong> <em>(String)</em> - The text to use for the button the end user can press in order to ignore an optional update that is available. Defaults to <code>"Ignore"</code>.</li>
|
|
<li><strong>optionalInstallButtonLabel</strong> <em>(String)</em> - The text to use for the button the end user can press in order to install an optional update. Defaults to <code>"Install"</code>.</li>
|
|
<li><strong>optionalUpdateMessage</strong> <em>(String)</em> - The text used as the body of an update notification, when the update is optional. Defaults to <code>"An update is available. Would you like to install it?"</code>.</li>
|
|
<li><strong>updateTitle</strong> <em>(String)</em> - The text used as the header of an update notification that is displayed to the end user. Defaults to <code>"Update available"</code>.</li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">// Download the update silently, but install it on
|
|
// the next resume, as long as at least 5 minutes
|
|
// has passed since the app was put into the background.
|
|
codePush.sync(null, { installMode: InstallMode.ON_NEXT_RESUME, minimumBackgroundDuration: 60 * 5 });
|
|
|
|
// Download the update silently, and install optional updates
|
|
// on the next restart, but install mandatory updates on the next resume.
|
|
codePush.sync(null, { mandatoryInstallMode: InstallMode.ON_NEXT_RESUME });
|
|
|
|
// Changing the title displayed in the
|
|
// confirmation dialog of an "active" update
|
|
codePush.sync(null, { updateDialog: { title: "An update is available!" } });
|
|
|
|
// Displaying an update prompt which includes the
|
|
// description associated with the CodePush release
|
|
codePush.sync(null, {
|
|
updateDialog: {
|
|
appendReleaseDescription: true,
|
|
descriptionPrefix: "\n\nChange log:\n"
|
|
},
|
|
installMode: InstallMode.IMMEDIATE
|
|
});
|
|
|
|
// Silently check for the update, but
|
|
// display a custom downloading UI
|
|
// via the SyncStatus and DowloadProgress callbacks
|
|
codePush.sync(syncStatus, null, downloadProgress);
|
|
|
|
function syncStatus(status) {
|
|
switch (status) {
|
|
case SyncStatus.DOWNLOADING_PACKAGE:
|
|
// Show "downloading" modal
|
|
break;
|
|
case SyncStatus.INSTALLING_UPDATE:
|
|
// Hide "downloading" modal
|
|
break;
|
|
}
|
|
}
|
|
|
|
function downloadProgress(downloadProgress) {
|
|
if (downloadProgress) {
|
|
// Update "downloading" modal with current download %
|
|
//console.log("Downloading " + downloadProgress.receivedBytes + " of " + downloadProgress.totalBytes);
|
|
}
|
|
}
|
|
</code></pre></div>
|
|
<p>The <code>sync</code> method can be called anywhere you’d like to check for an update. That could be in the <code>deviceready</code> event handler, the <code>click</code> event of a button, in the callback of a periodic timer, or whatever else makes sense for your needs. Just like the <code>checkForUpdate</code> method, it will perform the network request to check for an update in the background, so it won’t impact your UI thread and/or JavaScript thread’s responsiveness.</p>
|
|
|
|
<h3>Package objects</h3>
|
|
|
|
<p>The <code>checkForUpdate</code> and <code>getCurrentPackage</code> methods invoke success callbacks, that when triggered, provide acces to “package” objects. The package represents your code update as well as any extra metadata (e.g. description, mandatory?). The CodePush API has the distinction between the following types of packages:</p>
|
|
|
|
<ol>
|
|
<li><p><code>LocalPackage</code>: Represents a downloaded update that is either already running, or has been installed and is pending an app restart.</p></li>
|
|
<li><p><code>RemotePackage</code>: Represents an available update on the CodePush server that hasn’t been downloaded yet.</p></li>
|
|
</ol>
|
|
|
|
<h4>LocalPackage</h4>
|
|
|
|
<p>Contains details about an update that has been downloaded locally or already installed. You can get a reference to an instance of this object either by calling the <code>codePush.getCurrentPackage</code> method, or as the value provided to the success callback of the <code>RemotePackage.download</code> method.</p>
|
|
|
|
<h5>Properties</h5>
|
|
|
|
<ul>
|
|
<li><strong>appVersion</strong>: The native version of the application this package update is intended for. <em>(String)</em></li>
|
|
<li><strong>deploymentKey</strong>: Deployment key of the package. <em>(String)</em></li>
|
|
<li><strong>description</strong>: The description of the update. This is the same value that you specified in the CLI when you released the update. <em>(String)</em></li>
|
|
<li><strong>failedInstall</strong>: Indicates whether this update has been previously installed but was rolled back. The <code>sync</code> method will automatically ignore updates which have previously failed, so you only need to worry about this property if using <code>checkForUpdate</code>. <em>(Boolean)</em></li>
|
|
<li><strong>isFirstRun</strong>: Flag indicating if the current application run is the first one after the package was applied. <em>(Boolean)</em></li>
|
|
<li><strong>isMandatory</strong>: Indicates whether the update is considered mandatory. This is the value that was specified in the CLI when the update was released. <em>(Boolean)</em></li>
|
|
<li><strong>label</strong>: The internal label automatically given to the update by the CodePush server, such as <code>v5</code>. This value uniquely identifies the update within it’s deployment. <em>(String)</em></li>
|
|
<li><strong>packageHash</strong>: The SHA hash value of the update. <em>(String)</em></li>
|
|
<li><strong>packageSize</strong>: The size of the code contained within the update, in bytes. <em>(Number)</em></li>
|
|
</ul>
|
|
|
|
<h5>Methods</h5>
|
|
|
|
<ul>
|
|
<li><p><strong>install(installSuccess, installError, installOptions)</strong>: Installs this package to the application.
|
|
The install behavior is dependent on the provided <code>installOptions</code>. By default, the update package is silently installed and the application is reloaded with the new content on the next application start.
|
|
On the first run after the update, the application will wait for a <code>codePush.notifyApplicationReady()</code> call. Once this call is made, the install operation is considered a success.
|
|
Otherwise, the install operation will be marked as failed, and the application is reverted to its previous version on the next run.</p>
|
|
|
|
<h6>InstallOptions</h6>
|
|
|
|
<p>Interface defining several options for customizing install operation behavior.</p>
|
|
|
|
<ul>
|
|
<li><strong>installMode</strong>: Used to specify the <a href="#installmode">InstallMode</a> used for the install operation. Defaults to <code>InstallMode.ON_NEXT_RESTART</code>.</li>
|
|
<li><strong>mandatoryInstallMode</strong>: Used to specify the <a href="#installmode">InstallMode</a> used for the install operation if the package is mandatory. Defaults to <code>InstallMode.IMMEDIATE</code>.</li>
|
|
<li><strong>minimumBackgroundDuration</strong>: If <strong>installMode</strong> is <code>InstallMode.ON_NEXT_RESUME</code>, used to specify the amount of time the app must be in the background before the update is installed when it is resumed. Defaults to <code>0</code>.</li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">// App version 1 (current version)
|
|
|
|
var onError = function (error) {
|
|
console.log("An error occurred. " + error);
|
|
};
|
|
|
|
var onInstallSuccess = function () {
|
|
console.log("Installation succeeded.");
|
|
};
|
|
|
|
var onPackageDownloaded = function (localPackage) {
|
|
// Install regular updates after someone navigates away from the app for more than 2 minutes
|
|
// Install mandatory updates after someone restarts the app
|
|
localPackage.install(onInstallSuccess, onError, { installMode: InstallMode.ON_NEXT_RESUME, minimumBackgroundDuration: 120, mandatoryInstallMode: InstallMode.ON_NEXT_RESTART });
|
|
};
|
|
|
|
var onUpdateCheck = function (remotePackage) {
|
|
if (!remotePackage) {
|
|
console.log("The application is up to date.");
|
|
} else {
|
|
// The hash of each previously reverted package is stored for later use.
|
|
// This way, we avoid going into an infinite bad update/revert loop.
|
|
if (!remotePackage.failedInstall) {
|
|
console.log("A CodePush update is available. Package hash: " + remotePackage.packageHash);
|
|
remotePackage.download(onPackageDownloaded, onError);
|
|
} else {
|
|
console.log("The available update was attempted before and failed.");
|
|
}
|
|
}
|
|
};
|
|
|
|
window.codePush.checkForUpdate(onUpdateCheck, onError);
|
|
|
|
//------------------------------------------------
|
|
|
|
// App version 2 (updated version)
|
|
|
|
var app = {
|
|
onDeviceReady: function () {
|
|
// Calling this function is required during the first application run after an update.
|
|
// If not called, the application will be reverted to the previous version.
|
|
window.codePush.notifyApplicationReady();
|
|
// ...
|
|
}
|
|
}
|
|
</code></pre></div>
|
|
<p>For an example on how you are protected against a bad update, see the <a href="#codepushnotifyapplicationready">notifyApplicationReady() documentation</a>.</p>
|
|
|
|
<h4>RemotePackage</h4>
|
|
|
|
<p>Contains details about an update that is available for download from the CodePush server. You get a reference to an instance of this object by calling the <code>codePush.checkForUpdate</code> method when an update is available. If you are using the sync API, you don’t need to worry about the <code>RemotePackage</code>, since it will handle the download and installation process automatically for you.</p>
|
|
|
|
<h5>Properties</h5>
|
|
|
|
<p>The <code>RemotePackage</code> inherits all of the same properties as the <code>LocalPackage</code>, but includes one additional one:</p>
|
|
|
|
<ul>
|
|
<li><strong>downloadUrl</strong>: The URL at which the package is available for download. This property is only needed for advanced usage, since the <code>download</code> method will automatically handle the acquisition of updates for you. <em>(String)</em></li>
|
|
</ul>
|
|
|
|
<h5>Methods</h5>
|
|
|
|
<ul>
|
|
<li><p><strong>abortDownload(abortSuccess, abortError)</strong>: Aborts the current download session, if any.</p></li>
|
|
<li><p><strong>download(downloadSuccess, downloadError, downloadProgress)</strong>: Downloads the package update from the CodePush service. The <code>downloadSuccess</code> callback is invoked with a <a href="#localpackage">LocalPackage</a> argument, representing the downloaded package.
|
|
The optional <code>downloadProgress</code> callback is invoked several times during the download progress with one <code>DownloadProgress</code> parameter.</p>
|
|
|
|
<h6>DownloadProgress</h6>
|
|
|
|
<p>Defines the format of the DownloadProgress object, used to send periodical update notifications on the progress of the update download.</p>
|
|
|
|
<h6># Properties</h6>
|
|
|
|
<ul>
|
|
<li><strong>totalBytes</strong>: The size of the downloading update package, in bytes. (Number)</li>
|
|
<li><strong>receivedBytes</strong>: The number of bytes already downloaded. (Number)</li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">var onError = function (error) {
|
|
console.log("An error occurred. " + error);
|
|
};
|
|
|
|
var onPackageDownloaded = function (localPackage) {
|
|
console.log("Package downloaded at: " + localPackage.localPath);
|
|
// you can now update your application to the downloaded version by calling localPackage.install()
|
|
};
|
|
|
|
var onProgress = function (downloadProgress) {
|
|
console.log("Downloading " + downloadProgress.receivedBytes + " of " + downloadProgress.totalBytes + " bytes.");
|
|
};
|
|
|
|
var onUpdateCheck = function (remotePackage) {
|
|
if (!remotePackage) {
|
|
console.log("The application is up to date.");
|
|
} else {
|
|
console.log("A CodePush update is available. Package hash: " + remotePackage.packageHash);
|
|
remotePackage.download(onPackageDownloaded, onError, onProgress);
|
|
}
|
|
};
|
|
|
|
window.codePush.checkForUpdate(onUpdateCheck, onError);
|
|
</code></pre></div>
|
|
<h3>Enums</h3>
|
|
|
|
<p>The CodePush API includes the following “enum” objects which can be used to customize the update experience, and are available globally off of the <code>window</code> object:</p>
|
|
|
|
<h4>InstallMode</h4>
|
|
|
|
<p>This enum specified when you would like an installed update to actually be applied, and can be passed to either the <code>sync</code> or <code>LocalPackage.install</code> methods. It includes the following values:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>IMMEDIATE</strong>: The update will be applied to the running application immediately. The application will be reloaded with the new content immediately.</p></li>
|
|
<li><p><strong>ON_NEXT_RESTART</strong>: Indicates that you want to install the update, but not forcibly restart the app. When the app is “naturally” restarted (due the OS or end user killing it), the update will be seamlessly picked up. This value is appropriate when performing silent updates, since it would likely be disruptive to the end user if the app suddenly restarted out of nowhere, since they wouldn’t have realized an update was even downloaded. This is the default mode used for both the <code>sync</code> and <code>LocalPackage.install</code> methods.);
|
|
} else {
|
|
// The hash of each previously reverted package is stored for later use.
|
|
// This way, we avoid going into an infinite bad update/revert loop.
|
|
if (!remotePackage.failedInstall) {
|
|
console.log(“A CodePush update is available. Package hash: ” + remotePackage.packageHash);
|
|
remotePackage.download(onPackageDownloaded, onError);
|
|
} else {
|
|
console.log(“The available update was attempted before and failed.”);
|
|
}
|
|
}
|
|
};</p></li>
|
|
</ul>
|
|
|
|
<p>window.codePush.checkForUpdate(onUpdateCheck, onError);</p>
|
|
|
|
<p>//————————————————</p>
|
|
|
|
<p>// App version 2 (updated version)</p>
|
|
|
|
<p>var app = {
|
|
onDeviceReady: function () {
|
|
// Calling this function is required during the first application run after an update.
|
|
// If not called, the application will be reverted to the previous version.
|
|
window.codePush.notifyApplicationReady();
|
|
// …
|
|
}
|
|
}
|
|
“`</p>
|
|
|
|
<p>For an example on how you are protected against a bad update, see the <a href="#codepushnotifyapplicationready">notifyApplicationReady() documentation</a>.</p>
|
|
|
|
<h4>RemotePackage</h4>
|
|
|
|
<p>Contains details about an update that is available for download from the CodePush server. You get a reference to an instance of this object by calling the <code>codePush.checkForUpdate</code> method when an update is available. If you are using the sync API, you don’t need to worry about the <code>RemotePackage</code>, since it will handle the download and installation process automatically for you.</p>
|
|
|
|
<h5>Properties</h5>
|
|
|
|
<p>The <code>RemotePackage</code> inherits all of the same properties as the <code>LocalPackage</code>, but includes one additional one:</p>
|
|
|
|
<ul>
|
|
<li><strong>downloadUrl</strong>: The URL at which the package is available for download. This property is only needed for advanced usage, since the <code>download</code> method will automatically handle the acquisition of updates for you. <em>(String)</em></li>
|
|
</ul>
|
|
|
|
<h5>Methods</h5>
|
|
|
|
<ul>
|
|
<li><p><strong>abortDownload(abortSuccess, abortError)</strong>: Aborts the current download session, if any.</p></li>
|
|
<li><p><strong>download(downloadSuccess, downloadError, downloadProgress)</strong>: Downloads the package update from the CodePush service. The <code>downloadSuccess</code> callback is invoked with a <a href="#localpackage">LocalPackage</a> argument, representing the downloaded package.
|
|
The optional <code>downloadProgress</code> callback is invoked several times during the download progress with one <code>DownloadProgress</code> parameter.</p>
|
|
|
|
<h6>DownloadProgress</h6>
|
|
|
|
<p>Defines the format of the DownloadProgress object, used to send periodical update notifications on the progress of the update download.</p>
|
|
|
|
<h6># Properties</h6>
|
|
|
|
<ul>
|
|
<li><strong>totalBytes</strong>: The size of the downloading update package, in bytes. (Number)</li>
|
|
<li><strong>receivedBytes</strong>: The number of bytes already downloaded. (Number)</li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<p>Example Usage:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">var onError = function (error) {
|
|
console.log("An error occurred. " + error);
|
|
};
|
|
|
|
var onPackageDownloaded = function (localPackage) {
|
|
console.log("Package downloaded at: " + localPackage.localPath);
|
|
// you can now update your application to the downloaded version by calling localPackage.install()
|
|
};
|
|
|
|
var onProgress = function (downloadProgress) {
|
|
console.log("Downloading " + downloadProgress.receivedBytes + " of " + downloadProgress.totalBytes + " bytes.");
|
|
};
|
|
|
|
var onUpdateCheck = function (remotePackage) {
|
|
if (!remotePackage) {
|
|
console.log("The application is up to date.");
|
|
} else {
|
|
console.log("A CodePush update is available. Package hash: " + remotePackage.packageHash);
|
|
remotePackage.download(onPackageDownloaded, onError, onProgress);
|
|
}
|
|
};
|
|
|
|
window.codePush.checkForUpdate(onUpdateCheck, onError);
|
|
</code></pre></div>
|
|
<h3>Enums</h3>
|
|
|
|
<p>The CodePush API includes the following "enum” objects which can be used to customize the update experience, and are available globally off of the <code>window</code> object:</p>
|
|
|
|
<h4>InstallMode</h4>
|
|
|
|
<p>This enum specified when you would like an installed update to actually be applied, and can be passed to either the <code>sync</code> or <code>LocalPackage.install</code> methods. It includes the following values:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>IMMEDIATE</strong>: The update will be applied to the running application immediately. The application will be reloaded with the new content immediately.</p></li>
|
|
<li><p><strong>ON_NEXT_RESTART</strong>: Indicates that you want to install the update, but not forcibly restart the app. When the app is “naturally” restarted (due the OS or end user killing it), the update will be seamlessly picked up. This value is appropriate when performing silent updates, since it would likely be disruptive to the end user if the app suddenly restarted out of nowhere, since they wouldn’t have realized an update was even downloaded. This is the default mode used for both the <code>sync</code> and <code>LocalPackage.install</code> methods.</p></li>
|
|
<li><p><strong>ON_NEXT_RESUME</strong>: Indicates that you want to install the update, but don’t want to restart the app until the next time the end user resumes it from the background. This way, you don’t disrupt their current session, but you can get the update in front of them sooner then having to wait for the next natural restart. This value is appropriate for silent installs that can be applied on resume in a non-invasive way.</p></li>
|
|
</ul>
|
|
|
|
<h4>SyncStatus</h4>
|
|
|
|
<p>Defines the possible statuses of the <a href="#codepushsync">sync</a> operation. There are two categories of statuses: intermediate and result (final). The intermediate statuses represent progress statuses of the sync operation, and are not final. The result statuses represent final statuses of the sync operation. Every sync operation ends with only one result status, but can have zero or more intermediate statuses.</p>
|
|
|
|
<ul>
|
|
<li><p><strong>UP_TO_DATE</strong>: The app is fully up-to-date with the configured deployment.</p></li>
|
|
<li><p><strong>UPDATE_INSTALLED</strong>: An available update has been installed and will be run either immediately after the callback function returns or the next time the app resumes/restarts, depending on the <code>InstallMode</code> specified in <code>SyncOptions</code>.</p></li>
|
|
<li><p><strong>UPDATE_IGNORED</strong>: The app has an optional update, which the end user chose to ignore. <em>(This is only applicable when the <code>updateDialog</code> is used)</em></p></li>
|
|
<li><p><strong>ERROR</strong>: An error occured during the <code>sync</code> operation. This might be an error while communicating with the server, downloading or unziping the update. The console logs should contain more information about what happened. No update has been applied in this case.</p></li>
|
|
<li><p><strong>IN_PROGRESS</strong>: Another sync is already running, so this attempt to sync has been aborted.</p></li>
|
|
<li><p><strong>CHECKING_FOR_UPDATE</strong>: The CodePush server is being queried for an update.</p></li>
|
|
<li><p><strong>AWAITING_USER_ACTION</strong>: An update is available, and a confirmation dialog was shown to the end user. <em>(This is only applicable when the <code>updateDialog</code> is used)</em></p></li>
|
|
<li><p><strong>DOWNLOADING_PACKAGE</strong>: An available update is being downloaded from the CodePush server.</p></li>
|
|
<li><p><strong>INSTALLING_UPDATE</strong>: An available update was downloaded and is about to be installed.</p></li>
|
|
</ul>
|
|
|
|
<h2>PhoneGap Build</h2>
|
|
|
|
<p>This plugin is compatible with <a href="https://build.phonegap.com">PhoneGap Build</a>, and supports creating Android and iOS builds out-of-the-box. However, in order for CodePush to calculate the hash of your binary contents on Android, PhoneGap Build needs to use Gradle to build your app, which isn’t its default behavior (it uses Ant). To resolve this, simply add the following element to your app’s <code>config.xml</code> file, as a child of the <code><platform name="android"></code> element:</p>
|
|
<div class="highlight"><pre><code class="language-xml" data-lang="xml"><preference name="android-build-tool" value="gradle" />
|
|
</code></pre></div>
|
|
<h2>Example Apps</h2>
|
|
|
|
<p>The Cordova community has graciously created some awesome open source apps that can serve as examples for developers that are getting started. The following is a list of OSS Cordova apps that are also using CodePush, and can therefore be used to see how others are using the service:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://github.com/rangle/pgdays-codepush-demo">PGDay CodePush Demo</a> - Demo app created by <a href="http://rangle.io">Rangle.io</a> used for <a href="http://pgday.phonegap.com/eu2016/">PhoneGap Day Europe 2016</a>.</li>
|
|
</ul>
|
|
|
|
<p><em>Note: If you’ve developed a Cordova app using CodePush, that is also open-source, please let us know. We would love to add it to this list!</em></p>
|
|
|
|
</article>
|
|
<div class="feedback-container">
|
|
<div class="widget">
|
|
<div class="widget-error" style="display:none">
|
|
<div class="header">
|
|
<h3>Server trouble... ☹</h3>
|
|
</div>
|
|
<div class="message">
|
|
<P>We appreciate the effort but we are having issues.</P>
|
|
</div>
|
|
</div>
|
|
<div class="widget-thankyou" style="display:none">
|
|
<div class="header">
|
|
<h3>Thank you!</h3>
|
|
</div>
|
|
<div class="message">
|
|
<P>We appreciate your feedback.</P>
|
|
</div>
|
|
</div>
|
|
<div class="widget-message" style="display:none">
|
|
<div class="header">
|
|
<h3>Additional feedback</h3>
|
|
<!--<span class="charCount">1000</span>-->
|
|
</div>
|
|
<textarea class="form-control widget-text" maxlength="1000" rows="4"></textarea>
|
|
<div class="buttons">
|
|
<button type="submit" onclick="updateFeed(true)">Submit</button>
|
|
<button type="submit" onclick="updateFeed()">Skip this</button>
|
|
</div>
|
|
</div>
|
|
<div class="widget-entry">
|
|
<div class="header">
|
|
<h3> Was this documentation helpful?</h3>
|
|
</div>
|
|
<div class="buttons">
|
|
<button onclick="sendFeed(1)">Yes</button>
|
|
<button onclick="sendFeed(0)"> No</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var baseURL="https://docsfeedback.azurewebsites.net/api/feedback/";
|
|
var feedbackType, messageId;
|
|
var docURL = window.location.host+window.location.pathname;
|
|
var date = new Date().toUTCString();
|
|
var project = "CodePush";
|
|
|
|
function sendFeed(feedType){
|
|
feedbackType = feedType;
|
|
$.ajax({
|
|
method: "POST",
|
|
contentType: "application/x-www-form-urlencoded",
|
|
crossDomain: true,
|
|
cors: true,
|
|
url: baseURL+"create",
|
|
data: { Type: feedbackType, ParentURL: docURL, Project: project, CreationDate: date, Id: messageId}
|
|
})
|
|
.done(function(result, textStatus, xhr) {
|
|
messageId = xhr.responseJSON.Id;
|
|
$('.widget-entry').css('display','none');
|
|
$('.widget-message').css('display','block');
|
|
})
|
|
.fail(function(req, status, error ) {
|
|
console.log( 'Something went wrong - ', status, error );
|
|
$('.widget-entry').css('display','none');
|
|
$('.widget-error').css('display','block');
|
|
});
|
|
}
|
|
|
|
function updateFeed(msg){
|
|
var comments = $('.widget-text').val();
|
|
if(msg){
|
|
$.ajax({
|
|
method: "PUT",
|
|
contentType: "application/x-www-form-urlencoded",
|
|
crossDomain: true,
|
|
cors: true,
|
|
url: baseURL+messageId,
|
|
data: { Type: feedbackType, ParentURL: docURL, Project: project, CreationDate: date, Id: messageId, Message: comments}
|
|
})
|
|
.done(function() {
|
|
$('.widget-message').css('display','none');
|
|
$('.widget-thankyou').css('display','block');
|
|
})
|
|
.fail(function(req, status, error ) {
|
|
console.log( 'Something went wrong - ', status, error );
|
|
$('.widget-message').css('display','none');
|
|
$('.widget-error').css('display','block');
|
|
});
|
|
}
|
|
else{
|
|
$('.widget-message').css('display','none');
|
|
$('.widget-thankyou').css('display','block');
|
|
}
|
|
setTimeout(function(){
|
|
$('.widget').fadeTo( "slow", 0);
|
|
},4000);
|
|
}
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<div class="footer-container">
|
|
<div class="container" id="footer">
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<h4>General</h4>
|
|
<ul class="nav">
|
|
<!--TODO: CHECK LINKS-->
|
|
<li><a href="https://github.com/Microsoft/code-push/blob/master/LICENSE.md" target="_blank">License</a></li>
|
|
<li><a href="https://www.visualstudio.com/en-us/privacy-policy-vs" target="_blank">Privacy</a></li>
|
|
<li><a href="https://msdn.microsoft.com/en-us/cc300389" target="_blank">Terms of Service</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<h4>Community</h4>
|
|
<ul class="nav">
|
|
<li><a href="https://github.com/Microsoft/code-push/" target="_blank">GitHub Project</a></li>
|
|
<li><a href="https://stackoverflow.com/questions/tagged/codepush" target="_blank">Stack Overflow</a></li>
|
|
<li><a href="https://twitter.com/hashtag/codepush" target="_blank">#CodePush</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<h4>Documentation</h4>
|
|
<ul class="nav">
|
|
<li><a href="https://github.com/Microsoft/code-push/blob/master/cli/README.md" target="_blank">CLI Docs</a></li>
|
|
<li><a href="https://github.com/Microsoft/cordova-plugin-code-push/blob/master/README.md" target="_blank">Cordova Plugin Docs</a></li>
|
|
<li><a href="https://github.com/Microsoft/react-native-code-push/blob/master/README.md" target="_blank">React Native Plugin Docs</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<h3><i class="fa fa-comment"></i> Talk to us!</h3>
|
|
<p>If you have any feedback or suggestions on how we can make CodePush more awesome, please contact via Twitter <a href="https://twitter.com/mscodepush">@mscodepush, <a href=mailto:codepush@microsoft.com>email us</a> or ping us in the <a href="https://discord.gg/0ZcbPKXt5bWxFdFu">#code-push</a> channel on Reactiflux (for React Native).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid signature-container">
|
|
<div class="container">
|
|
<div class="row signature">
|
|
<p class="pull-left hidden-xs">Made with <span class="glyphicon glyphicon-heart"></span> in Redmond</p>
|
|
<div class="pull-right">
|
|
<p class="copyright pull-left">©2012-2017 Microsoft
|
|
<img class="ms-logo-footer" src="/code-push/assets/images/Microsoft_logo.svg"/></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|