From 7f336f8491c68c67805d7ced7bf158282af5e51e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 11 Apr 2023 10:56:08 -0400 Subject: [PATCH 1/4] refactor(docs): unversion the CLI portion of the docs (#2896) --- {docs/cli => cli}/commands/.gitignore | 0 {docs/cli => cli}/configuration.md | 0 docs/cli.md => cli/index.md | 1 + {docs/cli => cli}/livereload.md | 0 {docs/cli => cli}/using-a-proxy.md | 0 crowdin.yml | 4 + docusaurus.config.js | 32 +- scripts/cli.js | 4 +- sidebars-cli.js | 31 + sidebars.js | 30 - versioned_docs/version-v5/cli.md | 49 -- .../version-v5/cli/commands/build.md | 174 ------ .../version-v5/cli/commands/capacitor-add.md | 37 -- .../cli/commands/capacitor-build.md | 191 ------ .../version-v5/cli/commands/capacitor-copy.md | 158 ----- .../version-v5/cli/commands/capacitor-open.md | 37 -- .../version-v5/cli/commands/capacitor-run.md | 402 ------------ .../version-v5/cli/commands/capacitor-sync.md | 160 ----- .../cli/commands/capacitor-update.md | 38 -- .../version-v5/cli/commands/completion.md | 22 - .../version-v5/cli/commands/config-get.md | 131 ---- .../version-v5/cli/commands/config-set.md | 166 ----- .../version-v5/cli/commands/config-unset.md | 104 ---- .../version-v5/cli/commands/cordova-build.md | 253 -------- .../cli/commands/cordova-compile.md | 151 ----- .../cli/commands/cordova-emulate.md | 576 ------------------ .../cli/commands/cordova-platform.md | 90 --- .../version-v5/cli/commands/cordova-plugin.md | 114 ---- .../cli/commands/cordova-prepare.md | 171 ------ .../cli/commands/cordova-requirements.md | 35 -- .../cli/commands/cordova-resources.md | 115 ---- .../version-v5/cli/commands/cordova-run.md | 576 ------------------ .../version-v5/cli/commands/deploy-add.md | 148 ----- .../version-v5/cli/commands/deploy-build.md | 104 ---- .../cli/commands/deploy-configure.md | 164 ----- .../cli/commands/deploy-manifest.md | 11 - .../version-v5/cli/commands/docs.md | 46 -- .../version-v5/cli/commands/doctor-check.md | 44 -- .../version-v5/cli/commands/doctor-list.md | 19 - .../version-v5/cli/commands/doctor-treat.md | 42 -- .../cli/commands/enterprise-register.md | 56 -- .../version-v5/cli/commands/generate.md | 70 --- .../version-v5/cli/commands/git-remote.md | 15 - .../version-v5/cli/commands/info.md | 37 -- .../version-v5/cli/commands/init.md | 167 ----- .../cli/commands/integrations-disable.md | 35 -- .../cli/commands/integrations-enable.md | 100 --- .../cli/commands/integrations-list.md | 16 - .../version-v5/cli/commands/link.md | 50 -- .../version-v5/cli/commands/login.md | 66 -- .../version-v5/cli/commands/logout.md | 17 - .../version-v5/cli/commands/package-build.md | 238 -------- .../version-v5/cli/commands/package-deploy.md | 57 -- .../version-v5/cli/commands/repair.md | 39 -- .../version-v5/cli/commands/serve.md | 448 -------------- .../version-v5/cli/commands/signup.md | 13 - .../version-v5/cli/commands/ssh-add.md | 55 -- .../version-v5/cli/commands/ssh-delete.md | 31 - .../version-v5/cli/commands/ssh-generate.md | 130 ---- .../version-v5/cli/commands/ssh-list.md | 35 -- .../version-v5/cli/commands/ssh-setup.md | 15 - .../version-v5/cli/commands/ssh-use.md | 35 -- .../version-v5/cli/commands/ssl-generate.md | 237 ------- .../version-v5/cli/commands/start.md | 301 --------- .../version-v5/cli/configuration.md | 233 ------- versioned_docs/version-v5/cli/livereload.md | 66 -- .../version-v5/cli/using-a-proxy.md | 45 -- versioned_docs/version-v6/cli.md | 54 -- .../version-v6/cli/commands/.gitignore | 2 - .../version-v6/cli/configuration.md | 243 -------- versioned_docs/version-v6/cli/livereload.md | 64 -- .../version-v6/cli/using-a-proxy.md | 45 -- versioned_sidebars/version-v5-sidebars.json | 41 -- versioned_sidebars/version-v6-sidebars.json | 43 -- 74 files changed, 60 insertions(+), 7469 deletions(-) rename {docs/cli => cli}/commands/.gitignore (100%) rename {docs/cli => cli}/configuration.md (100%) rename docs/cli.md => cli/index.md (99%) rename {docs/cli => cli}/livereload.md (100%) rename {docs/cli => cli}/using-a-proxy.md (100%) create mode 100644 sidebars-cli.js delete mode 100644 versioned_docs/version-v5/cli.md delete mode 100644 versioned_docs/version-v5/cli/commands/build.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-add.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-build.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-copy.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-open.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-run.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-sync.md delete mode 100644 versioned_docs/version-v5/cli/commands/capacitor-update.md delete mode 100644 versioned_docs/version-v5/cli/commands/completion.md delete mode 100644 versioned_docs/version-v5/cli/commands/config-get.md delete mode 100644 versioned_docs/version-v5/cli/commands/config-set.md delete mode 100644 versioned_docs/version-v5/cli/commands/config-unset.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-build.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-compile.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-emulate.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-platform.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-plugin.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-prepare.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-requirements.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-resources.md delete mode 100644 versioned_docs/version-v5/cli/commands/cordova-run.md delete mode 100644 versioned_docs/version-v5/cli/commands/deploy-add.md delete mode 100644 versioned_docs/version-v5/cli/commands/deploy-build.md delete mode 100644 versioned_docs/version-v5/cli/commands/deploy-configure.md delete mode 100644 versioned_docs/version-v5/cli/commands/deploy-manifest.md delete mode 100644 versioned_docs/version-v5/cli/commands/docs.md delete mode 100644 versioned_docs/version-v5/cli/commands/doctor-check.md delete mode 100644 versioned_docs/version-v5/cli/commands/doctor-list.md delete mode 100644 versioned_docs/version-v5/cli/commands/doctor-treat.md delete mode 100644 versioned_docs/version-v5/cli/commands/enterprise-register.md delete mode 100644 versioned_docs/version-v5/cli/commands/generate.md delete mode 100644 versioned_docs/version-v5/cli/commands/git-remote.md delete mode 100644 versioned_docs/version-v5/cli/commands/info.md delete mode 100644 versioned_docs/version-v5/cli/commands/init.md delete mode 100644 versioned_docs/version-v5/cli/commands/integrations-disable.md delete mode 100644 versioned_docs/version-v5/cli/commands/integrations-enable.md delete mode 100644 versioned_docs/version-v5/cli/commands/integrations-list.md delete mode 100644 versioned_docs/version-v5/cli/commands/link.md delete mode 100644 versioned_docs/version-v5/cli/commands/login.md delete mode 100644 versioned_docs/version-v5/cli/commands/logout.md delete mode 100644 versioned_docs/version-v5/cli/commands/package-build.md delete mode 100644 versioned_docs/version-v5/cli/commands/package-deploy.md delete mode 100644 versioned_docs/version-v5/cli/commands/repair.md delete mode 100644 versioned_docs/version-v5/cli/commands/serve.md delete mode 100644 versioned_docs/version-v5/cli/commands/signup.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssh-add.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssh-delete.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssh-generate.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssh-list.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssh-setup.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssh-use.md delete mode 100644 versioned_docs/version-v5/cli/commands/ssl-generate.md delete mode 100644 versioned_docs/version-v5/cli/commands/start.md delete mode 100644 versioned_docs/version-v5/cli/configuration.md delete mode 100644 versioned_docs/version-v5/cli/livereload.md delete mode 100644 versioned_docs/version-v5/cli/using-a-proxy.md delete mode 100644 versioned_docs/version-v6/cli.md delete mode 100644 versioned_docs/version-v6/cli/commands/.gitignore delete mode 100644 versioned_docs/version-v6/cli/configuration.md delete mode 100644 versioned_docs/version-v6/cli/livereload.md delete mode 100644 versioned_docs/version-v6/cli/using-a-proxy.md diff --git a/docs/cli/commands/.gitignore b/cli/commands/.gitignore similarity index 100% rename from docs/cli/commands/.gitignore rename to cli/commands/.gitignore diff --git a/docs/cli/configuration.md b/cli/configuration.md similarity index 100% rename from docs/cli/configuration.md rename to cli/configuration.md diff --git a/docs/cli.md b/cli/index.md similarity index 99% rename from docs/cli.md rename to cli/index.md index a75302d0937..103bcde35e7 100644 --- a/docs/cli.md +++ b/cli/index.md @@ -1,6 +1,7 @@ --- title: Ionic CLI sidebar_label: Overview +slug: / --- diff --git a/docs/cli/livereload.md b/cli/livereload.md similarity index 100% rename from docs/cli/livereload.md rename to cli/livereload.md diff --git a/docs/cli/using-a-proxy.md b/cli/using-a-proxy.md similarity index 100% rename from docs/cli/using-a-proxy.md rename to cli/using-a-proxy.md diff --git a/crowdin.yml b/crowdin.yml index 33a536865ca..4b1c07d48aa 100644 --- a/crowdin.yml +++ b/crowdin.yml @@ -11,3 +11,7 @@ files: - /docs/api/**/* - /docs/cli/commands/**/* - /docs/native/**/* + - source: /cli/**/* + translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% + ignore: + - /cli/commands/**/* diff --git a/docusaurus.config.js b/docusaurus.config.js index 0a291d3c1ef..b6866a3dbb5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -86,10 +86,9 @@ module.exports = { position: 'left', }, { - type: 'doc', - docId: 'cli', + to: 'cli', label: 'CLI', - position: 'left', + position: 'left' }, { type: 'doc', @@ -269,12 +268,6 @@ module.exports = { if ((match = docPath.match(/api\/(.*)\.md/)) != null) { return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.md`; } - if ((match = docPath.match(/cli\/commands\/(.*)\.md/)) != null) { - return `https://github.com/ionic-team/ionic-cli/edit/develop/packages/@ionic/cli/src/commands/${match[1].replace( - '-', - '/' - )}.ts`; - } if ((match = docPath.match(/native\/(.*)\.md/)) != null) { return `https://github.com/ionic-team/capacitor-plugins/edit/main/${match[1]}/README.md`; } @@ -289,6 +282,27 @@ module.exports = { }, }, ], + [ + '@docusaurus/plugin-content-docs', + { + id: 'cli', + path: 'cli', + routeBasePath: 'cli', + sidebarPath: require.resolve('./sidebars-cli.js'), + editUrl: ({ versionDocsDirPath, docPath, locale }) => { + if (locale != 'en') { + return 'https://crowdin.com/project/ionic-docs'; + } + if ((match = docPath.match(/cli\/commands\/(.*)\.md/)) != null) { + return `https://github.com/ionic-team/ionic-cli/edit/develop/packages/@ionic/cli/src/commands/${match[1].replace( + '-', + '/' + )}.ts`; + } + return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`; + }, + } + ], '@docusaurus/plugin-content-pages', '@docusaurus/plugin-debug', '@docusaurus/plugin-sitemap', diff --git a/scripts/cli.js b/scripts/cli.js index 6bb3ad18fea..8c09b2371e7 100644 --- a/scripts/cli.js +++ b/scripts/cli.js @@ -26,9 +26,7 @@ function writePage(page) { renderExamples(page), ].join(''); - const path = `cli/commands/${commandToKebab(page.name)}.md`; - fs.writeFileSync(`docs/${path}`, data); - fs.writeFileSync(`versioned_docs/version-v6/${path}`, data); + fs.writeFileSync(`cli/commands/${commandToKebab(page.name)}.md`, data); } function renderFrontmatter({ name, groups }) { diff --git a/sidebars-cli.js b/sidebars-cli.js new file mode 100644 index 00000000000..73011e76269 --- /dev/null +++ b/sidebars-cli.js @@ -0,0 +1,31 @@ +module.exports = { + cli: [ + { + type: 'category', + label: 'CLI Documentation', + collapsed: false, + items: [ + 'index', + 'configuration', + 'livereload', + 'using-a-proxy', + { + type: 'link', + label: 'Changelog', + href: 'https://github.com/ionic-team/ionic-cli/blob/develop/packages/@ionic/cli/CHANGELOG.md', + }, + ], + }, + { + type: 'category', + label: 'Command Reference', + collapsed: false, + items: [ + { + type: 'autogenerated', + dirName: 'commands', // Generate section automatically based on files + }, + ], + }, + ], +} diff --git a/sidebars.js b/sidebars.js index 2e7f6c563f1..04ffbd30e3d 100644 --- a/sidebars.js +++ b/sidebars.js @@ -485,36 +485,6 @@ module.exports = { }, ], - cli: [ - { - type: 'category', - label: 'CLI Documentation', - collapsed: false, - items: [ - 'cli', - 'cli/configuration', - 'cli/livereload', - 'cli/using-a-proxy', - { - type: 'link', - label: 'Changelog', - href: 'https://github.com/ionic-team/ionic-cli/blob/develop/packages/@ionic/cli/CHANGELOG.md', - }, - ], - }, - { - type: 'category', - label: 'Command Reference', - collapsed: false, - items: [ - { - type: 'autogenerated', - dirName: 'cli/commands', // Generate section automatically based on files - }, - ], - }, - ], - native: [ { type: 'category', diff --git a/versioned_docs/version-v5/cli.md b/versioned_docs/version-v5/cli.md deleted file mode 100644 index c0536705c77..00000000000 --- a/versioned_docs/version-v5/cli.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: Overview -title: 'Ionic CLI Framework: Command-Line Interface to Develop Apps' -description: The Ionic command-line interface (CLI) is the go-to tool for developing Ionic apps. Install our framework globally with npm. ---- - -# Ionic CLI - -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. - -## Installation - -The Ionic CLI can be installed globally with npm: - -```shell -npm install -g @ionic/cli -``` - -## Help - -The Ionic CLI ships with command documentation that is accessible with the `--help` flag. - -```shell -$ ionic --help -$ ionic --help -$ ionic --help -``` - -:::note -Be sure to run `ionic --help` in your project directory. - -For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. -::: - - - -## Architecture - -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. - -## Troubleshooting - -To troubleshoot issues with the Ionic CLI, the following may be useful: - -- Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. -- The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). diff --git a/versioned_docs/version-v5/cli/commands/build.md b/versioned_docs/version-v5/cli/commands/build.md deleted file mode 100644 index 1ffdb2115db..00000000000 --- a/versioned_docs/version-v5/cli/commands/build.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: 'Angular NG Build Configuration to Build Ionic Apps | ionic build' -description: 'Build web assets and prepare your Ionic app for any platform targets. Ionic build uses the Angular CLI—see the ng build docs for how to use the configuration.' -sidebar_label: 'build' ---- - -# ionic build - -Build web assets and prepare your app for any platform targets - -```shell -ionic build [options] -``` - -`ionic build` will perform an Ionic build, which compiles web assets and prepares them for deployment. - -`ionic build` uses the Angular CLI. Use `ng build --help` to list all Angular CLI options for building your app. See the `ng build` [docs](https://angular.io/cli/build) for explanations. Options not listed below are considered advanced and can be passed to the `ng` CLI using the `--` separator after the Ionic CLI arguments. See the examples. - -## Examples - -```shell -$ ionic build -$ ionic build --prod -$ ionic build --watch -``` - -## Options - - - - - - - - - - - - - -
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --watch - -

-
Description -
-

Rebuild when files change

-
-
-

- - --engine - =<engine> - -

-
Description -
-

- Target engine (e.g. browser, cordova) -

-
-
-

- - --platform - =<platform> - -

-
Description -
-

- Target platform on chosen engine (e.g. ios, android) -

-
-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-add.md b/versioned_docs/version-v5/cli/commands/capacitor-add.md deleted file mode 100644 index aed24b4ee48..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-add.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_label: 'capacitor add' ---- - -# ionic capacitor add - -Add a native platform to your Ionic project - -```shell -ionic capacitor add [options] -``` - -`ionic capacitor add` will do the following: - -- Add a new platform specific folder to your project (ios, android, or electron) - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to add (e.g. android, ios, electron) -

-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-build.md b/versioned_docs/version-v5/cli/commands/capacitor-build.md deleted file mode 100644 index 0ceb0c36de7..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-build.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -sidebar_label: 'capacitor build' ---- - -# ionic capacitor build - -Build an Ionic project for a given platform - -```shell -ionic capacitor build [options] -``` - -`ionic capacitor build` will do the following: - -- Perform `ionic build` -- Copy web assets into the specified native platform -- Open the IDE for your native project (Xcode for iOS, Android Studio for Android) - -Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported. - -To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration). - -## Examples - -```shell -$ ionic capacitor build -$ ionic capacitor build android -$ ionic capacitor build ios -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to build for (e.g. android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --no-build - -

-
Description -

Do not invoke Ionic build

-
-

- - --no-open - -

-
Description -

Do not invoke Capacitor open

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --watch - -

-
Description -
-

Rebuild when files change

-
-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-copy.md b/versioned_docs/version-v5/cli/commands/capacitor-copy.md deleted file mode 100644 index 895f1732bd0..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-copy.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -sidebar_label: 'capacitor copy' ---- - -# ionic capacitor copy - -Copy web assets to native platforms - -```shell -ionic capacitor copy [options] -``` - -`ionic capacitor copy` will do the following: - -- Perform an Ionic build, which compiles web assets -- Copy web assets to Capacitor native platform(s) - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to copy (e.g. android, ios, electron) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --no-build - -

-
Description -

Do not invoke an Ionic build

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --watch - -

-
Description -
-

Rebuild when files change

-
-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-open.md b/versioned_docs/version-v5/cli/commands/capacitor-open.md deleted file mode 100644 index 063ea8ff67d..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-open.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_label: 'capacitor open' ---- - -# ionic capacitor open - -Open the IDE for a given native platform project - -```shell -ionic capacitor open [options] -``` - -`ionic capacitor open` will do the following: - -- Open the IDE for your native project (Xcode for iOS, Android Studio for Android) - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to open (e.g. android, ios) -

-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-run.md b/versioned_docs/version-v5/cli/commands/capacitor-run.md deleted file mode 100644 index fe13636676a..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-run.md +++ /dev/null @@ -1,402 +0,0 @@ ---- -sidebar_label: 'capacitor run' ---- - -# ionic capacitor run - -Run an Ionic project on a connected device - -```shell -ionic capacitor run [options] -``` - -`ionic capacitor run` will do the following: - -- Perform `ionic build` (or run the dev server from `ionic serve` with the `--livereload` option) -- Copy web assets into the specified native platform -- Open the IDE for your native project (Xcode for iOS, Android Studio for Android) - -When using the `--livereload` option and need to serve to your LAN, a device, or an emulator, use the `--external` option also. Otherwise, the web view tries to access `localhost`. - -Once the web assets and configuration are copied into your native project, the app can run on devices and emulators/simulators using the native IDE. Unfortunately, programmatically building and launching the native project is not yet supported. - -For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips). - -## Examples - -```shell -$ ionic capacitor run -$ ionic capacitor run android -$ ionic capacitor run android -l --external -$ ionic capacitor run ios --livereload --external -$ ionic capacitor run ios --livereload-url=http://localhost:8100 -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to run (e.g. android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --ssl - -

-
Description -

Use HTTPS for the dev server

-
-

- - --no-build - -

-
Description -

Do not invoke Ionic build

-
-

- - --no-open - -

-
Description -

Do not invoke Capacitor open

-
-

- - --external - -

-
Description -

- Host dev server on all network interfaces (i.e. --host=0.0.0.0) -

-
-

- - --livereload - -

-
Description -

Spin up dev server to live-reload www files

-
Aliases - -l -
-

- - --livereload-url - =<url> - -

-
Description -

Provide a custom URL to the dev server

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --consolelogs - -

-
Description -
-

Print app console logs to the terminal

-
-
-

- - --consolelogs-port - =<port> - -

-
Description -
-

Use specific port for console logs server

-
-
-

- - --host - =<host> - -

-
Description -
-

Use specific host for the dev server

-
-
Defaultlocalhost
-

- - --port - =<port> - -

-
Description -
-

Use specific port for the dev server

-
-
Aliases - -p -
Default8100
-

- - --public-host - =<host> - -

-
Description -
-

The host used for the browser or web view

-
-
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --watch - -

-
Description -
-

Rebuild when files change

-
-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-sync.md b/versioned_docs/version-v5/cli/commands/capacitor-sync.md deleted file mode 100644 index e7d9d0177d0..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-sync.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -sidebar_label: 'capacitor sync' ---- - -# ionic capacitor sync - -Sync (copy + update) an Ionic project - -```shell -ionic capacitor sync [options] -``` - -`ionic capacitor sync` will do the following: - -- Perform an Ionic build, which compiles web assets -- Copy web assets to Capacitor native platform(s) -- Update Capacitor native platform(s) and dependencies -- Install any discovered Capacitor or Cordova plugins - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to sync (e.g. android, ios, electron) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --no-build - -

-
Description -

Do not invoke an Ionic build

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --watch - -

-
Description -
-

Rebuild when files change

-
-
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-update.md b/versioned_docs/version-v5/cli/commands/capacitor-update.md deleted file mode 100644 index 3637ef495c3..00000000000 --- a/versioned_docs/version-v5/cli/commands/capacitor-update.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -sidebar_label: 'capacitor update' ---- - -# ionic capacitor update - -Update Capacitor native platforms, install Capacitor/Cordova plugins - -```shell -ionic capacitor update [options] -``` - -`ionic capacitor update` will do the following: - -- Update Capacitor native platform(s) and dependencies -- Install any discovered Capacitor or Cordova plugins - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to update (e.g. android, ios, electron) -

-
diff --git a/versioned_docs/version-v5/cli/commands/completion.md b/versioned_docs/version-v5/cli/commands/completion.md deleted file mode 100644 index 7949a77a9da..00000000000 --- a/versioned_docs/version-v5/cli/commands/completion.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -sidebar_label: 'completion' ---- - -# ionic completion - -Enables tab-completion for Ionic CLI commands. - -```shell -ionic completion [options] -``` - -This command is experimental and only works for Z shell (zsh) and non-Windows platforms. - -To enable completions for the Ionic CLI, you can add the completion code that this command prints to your **~/.zshrc** (or any other file loaded with your shell). See the examples. - -## Examples - -```shell -$ ionic completion -$ ionic completion >> ~/.zshrc -``` diff --git a/versioned_docs/version-v5/cli/commands/config-get.md b/versioned_docs/version-v5/cli/commands/config-get.md deleted file mode 100644 index b48fd333c63..00000000000 --- a/versioned_docs/version-v5/cli/commands/config-get.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -sidebar_label: 'config get' ---- - -# ionic config get - -Print config values - -```shell -ionic config get [options] -``` - -This command reads and prints configuration values from the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option. - -For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property. - -Without a `property` argument, this command prints out the entire config. - -For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option. - -If you are using this command programmatically, you can use the `--json` option. - -This command will sanitize config output for known sensitive fields (disabled when using `--json`). - -## Examples - -```shell -$ ionic config get -$ ionic config get id -$ ionic config get --global user.email -$ ionic config get -g npmClient -``` - -## Inputs - - - - - - - - - - - - - -
-

property

-
Description -

The property name you wish to get

-
- -## Options - - - - - - - - - - - - - - - - - -
-

- - --global - -

-
Description -

Use global CLI config

-
Aliases - -g -
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --json - -

-
Description -
-

Output config values in JSON

-
-
-

- - --root - -

-
Description -
-

- Operate on root of ./ionic.config.json -

-
-
diff --git a/versioned_docs/version-v5/cli/commands/config-set.md b/versioned_docs/version-v5/cli/commands/config-set.md deleted file mode 100644 index 3f702d7c09a..00000000000 --- a/versioned_docs/version-v5/cli/commands/config-set.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -sidebar_label: 'config set' ---- - -# ionic config set - -Set config values - -```shell -ionic config set [options] -``` - -This command writes configuration values to the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option. - -For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property. - -For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option. - -This command will attempt to coerce `value` into a suitable JSON type. If it is JSON-parsable, such as `123`, `true`, `[]`, etc., then it takes the parsed result. Otherwise, the value is interpreted as a string. For stricter input, use `--json`, which will error with non-JSON values. - -By default, if `property` exists and is an object or an array, the value is not overwritten. To disable this check and always overwrite the property, use `--force`. - -## Examples - -```shell -$ ionic config set name newAppName -$ ionic config set name "\"newAppName\"" --json -$ ionic config set -g interactive false -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

property

-
Description -

The property name you wish to set

-
-

value

-
Description -

The new value of the given property

-
- -## Options - - - - - - - - - - - - - - - - - -
-

- - --global - -

-
Description -

Use global CLI config

-
Aliases - -g -
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --json - -

-
Description -
-

- Always interpret value as JSON -

-
-
-

- - --force - -

-
Description -
-

Always overwrite existing values

-
-
-

- - --root - -

-
Description -
-

- Operate on root of ./ionic.config.json -

-
-
diff --git a/versioned_docs/version-v5/cli/commands/config-unset.md b/versioned_docs/version-v5/cli/commands/config-unset.md deleted file mode 100644 index 97d1d785af3..00000000000 --- a/versioned_docs/version-v5/cli/commands/config-unset.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'config unset' ---- - -# ionic config unset - -Delete config values - -```shell -ionic config unset [options] -``` - -This command deletes configuration values from the project's **./ionic.config.json** file. It can also operate on the global CLI configuration (**~/.ionic/config.json**) using the `--global` option. - -For nested properties, separate nest levels with dots. For example, the property name `integrations.cordova` will look in the **integrations** object for the **cordova** property. - -For multi-app projects, this command is scoped to the current project by default. To operate at the root of the project configuration file instead, use the `--root` option. - -## Examples - -```shell -$ ionic config unset -$ ionic config unset type -$ ionic config unset --global git.setup -$ ionic config unset -g interactive -``` - -## Inputs - - - - - - - - - - - - - -
-

property

-
Description -

The property name you wish to delete

-
- -## Options - - - - - - - - - - - - - - - - - -
-

- - --global - -

-
Description -

Use global CLI config

-
Aliases - -g -
- -## Advanced Options - - - - - - - - - - - - - -
-

- - --root - -

-
Description -
-

- Operate on root of ./ionic.config.json -

-
-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-build.md b/versioned_docs/version-v5/cli/commands/cordova-build.md deleted file mode 100644 index 8d42b3f143e..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-build.md +++ /dev/null @@ -1,253 +0,0 @@ ---- -sidebar_label: 'cordova build' ---- - -# ionic cordova build - -Use Cordova to build for Android and iOS platform targets - -```shell -ionic cordova build [options] -``` - -Like running `cordova build` directly, `ionic cordova build` also builds web assets from `ionic build` and provides friendly checks for Android and iOS platforms. - -To pass additional options to the Cordova CLI, use the `--` separator after the Ionic CLI arguments. - -The Cordova CLI requires a separator for platform-specific arguments for Android [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#using-flags), so an additional separator is required for the Ionic CLI, but it is not required for iOS [builds](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#using-flags). See the example commands for usage with separators. To avoid using flags, consider using `--buildConfig` with a **build.json** file. - -## Examples - -```shell -$ ionic cordova build android -$ ionic cordova build android --buildConfig=build.json -$ ionic cordova build android --prod --release -- -- --gradleArg=-PcdvBuildMultipleApks=true -$ ionic cordova build android --prod --release -- -- --keystore=filename.keystore --alias=myalias -$ ionic cordova build android --prod --release -- -- --minSdkVersion=21 -$ ionic cordova build android --prod --release -- -- --versionCode=55 -$ ionic cordova build android --prod --release --buildConfig=build.json -$ ionic cordova build ios -$ ionic cordova build ios --buildConfig=build.json -$ ionic cordova build ios --prod --release -$ ionic cordova build ios --prod --release -- --developmentTeam="ABCD" --codeSignIdentity="iPhone Developer" --packageType="app-store" -$ ionic cordova build ios --prod --release --buildConfig=build.json -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to build (e.g. android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --no-build - -

-
Description -

Do not invoke an Ionic build

-
-

- - --debug - -

-
Description -

Mark as a debug build

-
-

- - --release - -

-
Description -

Mark as a release build

-
-

- - --device - -

-
Description -

Deploy build to a device

-
-

- - --emulator - -

-
Description -

Deploy build to an emulator

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --buildConfig - =<file> - -

-
Description -
-

Use the specified build configuration

-
-
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-compile.md b/versioned_docs/version-v5/cli/commands/cordova-compile.md deleted file mode 100644 index 2d42ae162f5..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-compile.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -sidebar_label: 'cordova compile' ---- - -# ionic cordova compile - -Compile native platform code - -```shell -ionic cordova compile [options] -``` - -Like running `cordova compile` directly, but provides friendly checks. - -## Examples - -```shell -$ ionic cordova compile ios -$ ionic cordova compile ios --device -$ ionic cordova compile android -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to compile (android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --debug - -

-
Description -

Mark as a debug build

-
-

- - --release - -

-
Description -

Mark as a release build

-
-

- - --device - -

-
Description -

Deploy build to a device

-
-

- - --emulator - -

-
Description -

Deploy build to an emulator

-
- -## Advanced Options - - - - - - - - - - - - - -
-

- - --buildConfig - =<file> - -

-
Description -
-

Use the specified build configuration

-
-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-emulate.md b/versioned_docs/version-v5/cli/commands/cordova-emulate.md deleted file mode 100644 index e364dcbad9d..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-emulate.md +++ /dev/null @@ -1,576 +0,0 @@ ---- -title: 'Emulate Android and iOS Apps with Ionic Cordova Emulator' -description: 'Emulate an Ionic project on a simulator/emulator for Android and iOS apps. Build your app and deploy it to devices and emulators using Ionic Cordova Emulator.' -sidebar_label: 'cordova emulate' ---- - -# ionic cordova emulate - -Emulate an Ionic project on a simulator/emulator - -```shell -ionic cordova emulate [options] -``` - -Build your app and deploy it to devices and emulators using this command. Optionally specify the `--livereload` option to use the dev server from `ionic serve` for livereload functionality. - -This command will first use `ionic build` to build web assets (or `ionic serve` with the `--livereload` option). Then, `cordova build` is used to compile and prepare your app. Finally, the `native-run` [utility](https://github.com/ionic-team/native-run) is used to run your app on a device. To use Cordova for this process instead, use the `--no-native-run` option. - -If you have multiple devices and emulators, you can target a specific one with the `--target` option. You can list targets with `--list`. - -For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips). - -When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information. - -Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option. - -## Examples - -```shell -$ ionic cordova emulate android -$ ionic cordova emulate android --buildConfig=build.json -$ ionic cordova emulate android --prod --release -- -- --gradleArg=-PcdvBuildMultipleApks=true -$ ionic cordova emulate android --prod --release -- -- --keystore=filename.keystore --alias=myalias -$ ionic cordova emulate android --prod --release -- -- --minSdkVersion=21 -$ ionic cordova emulate android --prod --release -- -- --versionCode=55 -$ ionic cordova emulate android --prod --release --buildConfig=build.json -$ ionic cordova emulate android -l -$ ionic cordova emulate ios -$ ionic cordova emulate ios --buildConfig=build.json -$ ionic cordova emulate ios --livereload --external -$ ionic cordova emulate ios --livereload-url=http://localhost:8100 -$ ionic cordova emulate ios --prod --release -$ ionic cordova emulate ios --prod --release -- --developmentTeam="ABCD" --codeSignIdentity="iPhone Developer" --packageType="app-store" -$ ionic cordova emulate ios --prod --release --buildConfig=build.json -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to run (e.g. android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --ssl - -

-
Description -

Use HTTPS for the dev server

-
-

- - --list - -

-
Description -

List all available targets

-
-

- - --no-build - -

-
Description -

Do not invoke Ionic build

-
-

- - --external - -

-
Description -

- Host dev server on all network interfaces (i.e. --host=0.0.0.0) -

-
-

- - --livereload - -

-
Description -

Spin up dev server to live-reload www files

-
Aliases - -l -
-

- - --livereload-url - =<url> - -

-
Description -

Provide a custom URL to the dev server

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
-

- - --debug - -

-
Description -

Mark as a debug build

-
-

- - --release - -

-
Description -

Mark as a release build

-
-

- - --device - -

-
Description -

Deploy build to a device

-
-

- - --emulator - -

-
Description -

Deploy build to an emulator

-
-

- - --no-native-run - -

-
Description -

- Do not use native-run to run the app; use Cordova instead -

-
-

- - --connect - -

-
Description -

Tie the running app to the process

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --consolelogs - -

-
Description -
-

Print app console logs to the terminal

-
-
-

- - --consolelogs-port - =<port> - -

-
Description -
-

Use specific port for console logs server

-
-
-

- - --host - =<host> - -

-
Description -
-

Use specific host for the dev server

-
-
Defaultlocalhost
-

- - --port - =<port> - -

-
Description -
-

Use specific port for the dev server

-
-
Aliases - -p -
Default8100
-

- - --public-host - =<host> - -

-
Description -
-

The host used for the browser or web view

-
-
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --buildConfig - =<file> - -

-
Description -
-

Use the specified build configuration

-
-
-

- - --target - =<target> - -

-
Description -
-

- Deploy build to a device (use --list to see all) -

-
-
-

- - --json - -

-
Description -
-

Output targets in JSON

-
-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-platform.md b/versioned_docs/version-v5/cli/commands/cordova-platform.md deleted file mode 100644 index 80710262ced..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-platform.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'ionic cordova platform: Remove, Add, & Manage Cordova Platforms' -description: 'Manage, add, and remove Cordova platforms with ionic cordova platform. Like running cordova directly, with added resources and providing friendly checks.' -sidebar_label: 'cordova platform' ---- - -# ionic cordova platform - -Manage Cordova platform targets - -```shell -ionic cordova platform [options] -``` - -Like running `cordova platform` directly, but adds default Ionic icons and splash screen resources (during `add`) and provides friendly checks. - -## Examples - -```shell -$ ionic cordova platform -$ ionic cordova platform add ios -$ ionic cordova platform add android -$ ionic cordova platform rm ios -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

action

-
Description -

- add, remove, or update a platform; ls, check, - or save all project platforms -

-
-

platform

-
Description -

- The platform that you would like to add (android, ios) -

-
- -## Options - - - - - - - - - - - - - -
-

- - --no-resources - -

-
Description -

- Do not pregenerate icons and splash screen resources (corresponds to add) -

-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-plugin.md b/versioned_docs/version-v5/cli/commands/cordova-plugin.md deleted file mode 100644 index 3b57f2dd4b1..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-plugin.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'cordova plugin' ---- - -# ionic cordova plugin - -Manage Cordova plugins - -```shell -ionic cordova plugin [options] -``` - -Like running `cordova plugin` directly, but provides friendly checks. - -## Examples - -```shell -$ ionic cordova plugin -$ ionic cordova plugin add cordova-plugin-inappbrowser@latest -$ ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=XXXXX -$ ionic cordova plugin rm cordova-plugin-camera -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

action

-
Description -

- add or remove a plugin; ls or save all project plugins -

-
-

plugin

-
Description -

- The name of the plugin (corresponds to add and remove) -

-
- -## Options - - - - - - - - - - - - - -
-

- - --variable - =<KEY=VALUE> - -

-
Description -

Specify plugin variables

-
- -## Advanced Options - - - - - - - - - - - - - -
-

- - --force - -

-
Description -
-

- Force overwrite the plugin if it exists (corresponds to add) -

-
-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-prepare.md b/versioned_docs/version-v5/cli/commands/cordova-prepare.md deleted file mode 100644 index 1fb9bf8657c..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-prepare.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -sidebar_label: 'cordova prepare' ---- - -# ionic cordova prepare - -Copies assets to Cordova platforms, preparing them for native builds - -```shell -ionic cordova prepare [options] -``` - -`ionic cordova prepare` will do the following: - -- Perform an Ionic build, which compiles web assets to **www/**. -- Copy the **www/** directory into your Cordova platforms. -- Transform **config.xml** into platform-specific manifest files. -- Copy icons and splash screens from **resources/** to into your Cordova platforms. -- Copy plugin files into specified platforms. - -You may wish to use `ionic cordova prepare` if you run your project with Android Studio or Xcode. - -## Examples - -```shell -$ ionic cordova prepare -$ ionic cordova prepare ios -$ ionic cordova prepare android -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform you would like to prepare (e.g. android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --no-build - -

-
Description -

Do not invoke an Ionic build

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --watch - -

-
Description -
-

Rebuild when files change

-
-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-requirements.md b/versioned_docs/version-v5/cli/commands/cordova-requirements.md deleted file mode 100644 index db80d482976..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-requirements.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: 'cordova requirements' ---- - -# ionic cordova requirements - -Checks and print out all the requirements for platforms - -```shell -ionic cordova requirements [options] -``` - -Like running `cordova requirements` directly, but provides friendly checks. - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform for which you would like to gather requirements (android, ios) -

-
diff --git a/versioned_docs/version-v5/cli/commands/cordova-resources.md b/versioned_docs/version-v5/cli/commands/cordova-resources.md deleted file mode 100644 index b913544dd7a..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-resources.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 'Splash Screen Image Icon Generator | Generate Cordova Resources' -description: 'Generate perfectly-sized icons and splash screens from PNG source images for your Cordova platforms. Automatically create icons with Ionic Cordova Resources.' -sidebar_label: 'cordova resources' ---- - -# ionic cordova resources - -Automatically create icon and splash screen resources - -```shell -ionic cordova resources [options] -``` - -Generate perfectly sized icons and splash screens from PNG source images for your Cordova platforms with this command. - -The source image for icons should ideally be at least **1024×1024px** and located at **resources/icon.png**. The source image for splash screens should ideally be at least **2732×2732px** and located at **resources/splash.png**. If you used `ionic start`, there should already be default Ionic resources in the **resources/** directory, which you can overwrite. - -You can also generate platform-specific icons and splash screens by placing them in the respective **resources/<platform>/** directory. For example, to generate an icon for Android, place your image at **resources/android/icon.png**. - -For best results, the splash screen's artwork should roughly fit within a square (**1200×1200px**) at the center of the image. You can use **[https://code.ionicframework.com/resources/splash.psd](https://code.ionicframework.com/resources/splash.psd)** as a template for your splash screen. - -`ionic cordova resources` will automatically update your **config.xml** to reflect the changes in the generated images, which Cordova then configures. - -This command uses the `cordova-res` [utility](https://github.com/ionic-team/cordova-res) to generate resources locally. - -Cordova reference documentation: - -- Icons: **[https://cordova.apache.org/docs/en/latest/config_ref/images.html](https://cordova.apache.org/docs/en/latest/config_ref/images.html)** -- Splash Screens: **[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/)** - -## Examples - -```shell -$ ionic cordova resources -$ ionic cordova resources ios -$ ionic cordova resources android -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform for which you would like to generate resources (ios, android) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --icon - -

-
Description -

Generate icon resources

-
Aliases - -i -
-

- - --splash - -

-
Description -

Generate splash screen resources

-
Aliases - -s -
diff --git a/versioned_docs/version-v5/cli/commands/cordova-run.md b/versioned_docs/version-v5/cli/commands/cordova-run.md deleted file mode 100644 index 872d669978b..00000000000 --- a/versioned_docs/version-v5/cli/commands/cordova-run.md +++ /dev/null @@ -1,576 +0,0 @@ ---- -title: 'ionic cordova run: native-run Android and iOS Apps in Browsers' -description: 'Build your app and deploy it to devices and emulators using ionic cordova run. Use the native-run utility to run your app in an Android or iOS device browser.' -sidebar_label: 'cordova run' ---- - -# ionic cordova run - -Run an Ionic project on a connected device - -```shell -ionic cordova run [options] -``` - -Build your app and deploy it to devices and emulators using this command. Optionally specify the `--livereload` option to use the dev server from `ionic serve` for livereload functionality. - -This command will first use `ionic build` to build web assets (or `ionic serve` with the `--livereload` option). Then, `cordova build` is used to compile and prepare your app. Finally, the `native-run` [utility](https://github.com/ionic-team/native-run) is used to run your app on a device. To use Cordova for this process instead, use the `--no-native-run` option. - -If you have multiple devices and emulators, you can target a specific one with the `--target` option. You can list targets with `--list`. - -For Android and iOS, you can setup Remote Debugging on your device with browser development tools using these [docs](https://ionicframework.com/docs/developer-resources/developer-tips). - -When using `--livereload` with hardware devices, remember that livereload needs an active connection between device and computer. In some scenarios, you may need to host the dev server on an external address using the `--external` option. See these [docs](https://ionicframework.com/docs/cli/livereload) for more information. - -Just like with `ionic cordova build`, you can pass additional options to the Cordova CLI using the `--` separator. To pass additional options to the dev server, consider using `ionic serve` separately and using the `--livereload-url` option. - -## Examples - -```shell -$ ionic cordova run android -$ ionic cordova run android --buildConfig=build.json -$ ionic cordova run android --prod --release -- -- --gradleArg=-PcdvBuildMultipleApks=true -$ ionic cordova run android --prod --release -- -- --keystore=filename.keystore --alias=myalias -$ ionic cordova run android --prod --release -- -- --minSdkVersion=21 -$ ionic cordova run android --prod --release -- -- --versionCode=55 -$ ionic cordova run android --prod --release --buildConfig=build.json -$ ionic cordova run android -l -$ ionic cordova run ios -$ ionic cordova run ios --buildConfig=build.json -$ ionic cordova run ios --livereload --external -$ ionic cordova run ios --livereload-url=http://localhost:8100 -$ ionic cordova run ios --prod --release -$ ionic cordova run ios --prod --release -- --developmentTeam="ABCD" --codeSignIdentity="iPhone Developer" --packageType="app-store" -$ ionic cordova run ios --prod --release --buildConfig=build.json -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to run (e.g. android, ios) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --ssl - -

-
Description -

Use HTTPS for the dev server

-
-

- - --list - -

-
Description -

List all available targets

-
-

- - --no-build - -

-
Description -

Do not invoke Ionic build

-
-

- - --external - -

-
Description -

- Host dev server on all network interfaces (i.e. --host=0.0.0.0) -

-
-

- - --livereload - -

-
Description -

Spin up dev server to live-reload www files

-
Aliases - -l -
-

- - --livereload-url - =<url> - -

-
Description -

Provide a custom URL to the dev server

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
-

- - --debug - -

-
Description -

Mark as a debug build

-
-

- - --release - -

-
Description -

Mark as a release build

-
-

- - --device - -

-
Description -

Deploy build to a device

-
-

- - --emulator - -

-
Description -

Deploy build to an emulator

-
-

- - --no-native-run - -

-
Description -

- Do not use native-run to run the app; use Cordova instead -

-
-

- - --connect - -

-
Description -

Tie the running app to the process

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --consolelogs - -

-
Description -
-

Print app console logs to the terminal

-
-
-

- - --consolelogs-port - =<port> - -

-
Description -
-

Use specific port for console logs server

-
-
-

- - --host - =<host> - -

-
Description -
-

Use specific host for the dev server

-
-
Defaultlocalhost
-

- - --port - =<port> - -

-
Description -
-

Use specific port for the dev server

-
-
Aliases - -p -
Default8100
-

- - --public-host - =<host> - -

-
Description -
-

The host used for the browser or web view

-
-
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output source maps

-
-
-

- - --buildConfig - =<file> - -

-
Description -
-

Use the specified build configuration

-
-
-

- - --target - =<target> - -

-
Description -
-

- Deploy build to a device (use --list to see all) -

-
-
-

- - --json - -

-
Description -
-

Output targets in JSON

-
-
diff --git a/versioned_docs/version-v5/cli/commands/deploy-add.md b/versioned_docs/version-v5/cli/commands/deploy-add.md deleted file mode 100644 index 7c1874666af..00000000000 --- a/versioned_docs/version-v5/cli/commands/deploy-add.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -sidebar_label: 'deploy add' ---- - -# ionic deploy add - -Adds Appflow Deploy to the project - -```shell -ionic deploy add [options] -``` - -This command adds the Appflow Deploy plugin (`cordova-plugin-ionic`) for both Capacitor and Cordova projects. - -For Capacitor projects it runs all the steps necessary to install the plugin, sync with the native projects and add the configuration to the proper iOS and Android configuration files. - -For Cordova projects it just takes care of running the proper Cordova CLI command with the submitted parameters. - -## Examples - -```shell -$ ionic deploy add -$ ionic deploy add --app-id=abcd1234 --channel-name="Master" --update-method=background -$ ionic deploy add --max-store=2 --min-background-duration=30 -$ ionic deploy add --app-id=abcd1234 --channel-name="Master" --update-method=background --max-store=2 --min-background-duration=30 -``` - -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --app-id - =<id> - -

-
Description -

Your Appflow app ID

-
-

- - --channel-name - =<name> - -

-
Description -

The channel to check for updates from

-
-

- - --update-method - =<name> - -

-
Description -

The update method that dictates the behavior of the plugin

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --max-store - =<quantity> - -

-
Description -
-

The maximum number of downloaded versions to store on the device

-
-
Default2
-

- - --min-background-duration - =<seconds> - -

-
Description -
-

The minimum duration after which the app checks for an update in the background

-
-
Default30
diff --git a/versioned_docs/version-v5/cli/commands/deploy-build.md b/versioned_docs/version-v5/cli/commands/deploy-build.md deleted file mode 100644 index 1f56be7b4d8..00000000000 --- a/versioned_docs/version-v5/cli/commands/deploy-build.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'deploy build' ---- - -# ionic deploy build - -Create a deploy build on Appflow - -```shell -ionic deploy build [options] -``` - -This command creates a deploy build on Appflow. While the build is running, it prints the remote build log to the terminal. - -Customizing the build: - -- The `--environment` and `--channel` options can be used to customize the groups of values exposed to the build. - -Apart from `--commit`, every option can be specified using the full name setup within the Appflow [Dashboard](https://dashboard.ionicframework.com). - -## Examples - -```shell -$ ionic deploy build -$ ionic deploy build --environment="My Custom Environment Name" -$ ionic deploy build --commit=2345cd3305a1cf94de34e93b73a932f25baac77c -$ ionic deploy build --channel="Master" -$ ionic deploy build --channel="Master" --channel="My Custom Channel" -``` - -## Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --environment - =<name> - -

-
Description -

The group of environment variables exposed to your build

-
-

- - --channel - =<name> - -

-
Description -

- The channel you want to auto deploy the build to. This can be repeated multiple times if multiple channels - need to be specified. -

-
- -## Advanced Options - - - - - - - - - - - - - -
-

- - --commit - =<sha1> - -

-
Description -
-

Commit (defaults to HEAD)

-
-
diff --git a/versioned_docs/version-v5/cli/commands/deploy-configure.md b/versioned_docs/version-v5/cli/commands/deploy-configure.md deleted file mode 100644 index 02275b6aaa9..00000000000 --- a/versioned_docs/version-v5/cli/commands/deploy-configure.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -sidebar_label: 'deploy configure' ---- - -# ionic deploy configure - -Overrides Appflow Deploy configuration - -```shell -ionic deploy configure [options] -``` - -This command overrides configuration for the Appflow Deploy plugin (`cordova-plugin-ionic`) in Capacitor projects. - -For Capacitor projects, if the plugin is already installed, it overrides the configuration variables in the native projects. - -For Cordova projects this is not implemented because it is better to reinstall the plugin with the different parameters and let Cordova deal with the changes. - -## Examples - -```shell -$ ionic deploy configure -$ ionic deploy configure --app-id=abcd1234 --channel-name="Master" --update-method=background -$ ionic deploy configure --max-store=2 --min-background-duration=30 -$ ionic deploy configure --app-id=abcd1234 --channel-name="Master" --update-method=background --max-store=2 --min-background-duration=30 -$ ionic deploy configure android -$ ionic deploy configure ios -``` - -## Inputs - - - - - - - - - - - - - -
-

platform

-
Description -

- The native platform (e.g. ios, android) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --app-id - =<id> - -

-
Description -

Your Appflow app ID

-
-

- - --channel-name - =<name> - -

-
Description -

The channel to check for updates from

-
-

- - --update-method - =<name> - -

-
Description -

The update method that dictates the behavior of the plugin

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --max-store - =<quantity> - -

-
Description -
-

The maximum number of downloaded versions to store on the device

-
-
-

- - --min-background-duration - =<seconds> - -

-
Description -
-

The minimum duration after which the app checks for an update in the background

-
-
diff --git a/versioned_docs/version-v5/cli/commands/deploy-manifest.md b/versioned_docs/version-v5/cli/commands/deploy-manifest.md deleted file mode 100644 index a0fa17d7a65..00000000000 --- a/versioned_docs/version-v5/cli/commands/deploy-manifest.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -sidebar_label: 'deploy manifest' ---- - -# ionic deploy manifest - -Generates a manifest file for the deploy service from a built app directory - -```shell -ionic deploy manifest [options] -``` diff --git a/versioned_docs/version-v5/cli/commands/docs.md b/versioned_docs/version-v5/cli/commands/docs.md deleted file mode 100644 index 32623a978a6..00000000000 --- a/versioned_docs/version-v5/cli/commands/docs.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_label: 'docs' ---- - -# ionic docs - -Open the Ionic documentation website - -```shell -ionic docs [options] -``` - -## Advanced Options - - - - - - - - - - - - - - - - - -
-

- - --browser - =<browser> - -

-
Description -
-

- Specifies the browser to use (safari, firefox, google chrome) -

-
-
Aliases - -w -
diff --git a/versioned_docs/version-v5/cli/commands/doctor-check.md b/versioned_docs/version-v5/cli/commands/doctor-check.md deleted file mode 100644 index 523a24a90f4..00000000000 --- a/versioned_docs/version-v5/cli/commands/doctor-check.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -sidebar_label: 'doctor check' ---- - -# ionic doctor check - -Check the health of your Ionic project - -```shell -ionic doctor check [options] -``` - -This command detects and prints common issues and suggested steps to fix them. - -Some issues can be fixed automatically. See `ionic doctor treat --help`. - -Optionally supply the `id` argument to check a single issue. Use `ionic doctor list` to list all known issues. - -## Examples - -```shell -$ ionic doctor check -$ ionic doctor check git-not-used -``` - -## Inputs - - - - - - - - - - - - - -
-

id

-
Description -

The issue identifier

-
diff --git a/versioned_docs/version-v5/cli/commands/doctor-list.md b/versioned_docs/version-v5/cli/commands/doctor-list.md deleted file mode 100644 index d6f4cbff085..00000000000 --- a/versioned_docs/version-v5/cli/commands/doctor-list.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -sidebar_label: 'doctor list' ---- - -# ionic doctor list - -List all issues and their identifiers - -```shell -ionic doctor list [options] -``` - -Issues can have various tags: - -- **treatable**: `ionic doctor treat` can attempt to fix the issue -- **ignored**: configured not to be detected in `ionic doctor check` or `ionic doctor treat` -- **explicit-detection**: issue is only detected explicitly with `ionic doctor check ` - -You can flip whether an issue is ignored or not by using `ionic config set -g doctor.issues..ignored true/false`, where `` matches an ID listed with this command. diff --git a/versioned_docs/version-v5/cli/commands/doctor-treat.md b/versioned_docs/version-v5/cli/commands/doctor-treat.md deleted file mode 100644 index 4c143e68fdc..00000000000 --- a/versioned_docs/version-v5/cli/commands/doctor-treat.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: 'doctor treat' ---- - -# ionic doctor treat - -Attempt to fix issues in your Ionic project - -```shell -ionic doctor treat [options] -``` - -This command detects and attempts to fix common issues. Before a fix is attempted, the steps are printed and a confirmation prompt is displayed. - -Optionally supply the `id` argument to attempt to fix a single issue. Use `ionic doctor list` to list all known issues. - -## Examples - -```shell -$ ionic doctor treat -$ ionic doctor treat git-not-used -``` - -## Inputs - - - - - - - - - - - - - -
-

id

-
Description -

The issue identifier

-
diff --git a/versioned_docs/version-v5/cli/commands/enterprise-register.md b/versioned_docs/version-v5/cli/commands/enterprise-register.md deleted file mode 100644 index 571783599bb..00000000000 --- a/versioned_docs/version-v5/cli/commands/enterprise-register.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: 'enterprise register' ---- - -# ionic enterprise register - -Register your Product Key with this app - -```shell -ionic enterprise register [options] -``` - -## Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --app-id - =<id> - -

-
Description -

The Ionic App ID

-
-

- - --key - =<key> - -

-
Description -

The Product Key

-
diff --git a/versioned_docs/version-v5/cli/commands/generate.md b/versioned_docs/version-v5/cli/commands/generate.md deleted file mode 100644 index 71503afc9d4..00000000000 --- a/versioned_docs/version-v5/cli/commands/generate.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -sidebar_label: 'generate' ---- - -# ionic generate - -Create Pages, Components, & Angular Features - -```shell -ionic generate [options] -``` - -Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as `pages`, `components`, `directives`, `services`, and more. - -- For a full list of available types, use `npx ng g --help` -- For a list of options for a types, use `npx ng g --help` - -You can specify a path to nest your feature within any number of subdirectories. For example, specify a name of `"pages/New Page"` to generate page files at **src/app/pages/new-page/**. - -To test a generator before file modifications are made, use the `--dry-run` option. - -## Examples - -```shell -$ ionic generate -$ ionic generate page -$ ionic generate page contact -$ ionic generate component contact/form -$ ionic generate component login-form --change-detection=OnPush -$ ionic generate directive ripple --skip-import -$ ionic generate service api/user -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

type

-
Description -

- The type of feature (e.g. page, component, directive,{' '} - service) -

-
-

name

-
Description -

The name/path of the feature being generated

-
diff --git a/versioned_docs/version-v5/cli/commands/git-remote.md b/versioned_docs/version-v5/cli/commands/git-remote.md deleted file mode 100644 index 8df6822ec8c..00000000000 --- a/versioned_docs/version-v5/cli/commands/git-remote.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -sidebar_label: 'git remote' ---- - -# ionic git remote - -Adds/updates the Appflow git remote to your local Ionic app - -```shell -ionic git remote [options] -``` - -This command is used by `ionic link` when Appflow is used as the git host. - -`ionic git remote` will check the local repository for whether or not the git remote is properly set up. This command operates on the **ionic** remote. For advanced configuration, see **Settings** => **Git** in the app settings of the [Dashboard](https://dashboard.ionicframework.com). diff --git a/versioned_docs/version-v5/cli/commands/info.md b/versioned_docs/version-v5/cli/commands/info.md deleted file mode 100644 index 256903121ce..00000000000 --- a/versioned_docs/version-v5/cli/commands/info.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_label: 'info' ---- - -# ionic info - -Print project, system, and environment information - -```shell -ionic info [options] -``` - -This command is an easy way to share information about your setup. If applicable, be sure to run `ionic info` within your project directory to display even more information. - -## Options - - - - - - - - - - - - - -
-

- - --json - -

-
Description -

Print system/environment info in JSON format

-
diff --git a/versioned_docs/version-v5/cli/commands/init.md b/versioned_docs/version-v5/cli/commands/init.md deleted file mode 100644 index cc11dd0d18d..00000000000 --- a/versioned_docs/version-v5/cli/commands/init.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -sidebar_label: 'init' ---- - -# ionic init - -Initialize existing projects with Ionic - -```shell -ionic init [options] -``` - -This command will initialize an Ionic app within the current directory. Usually, this means an `ionic.config.json` file is created. If used within a multi-app project, the app is initialized in the root `ionic.config.json`. - -`ionic init` will prompt for a project name and then proceed to determine the type of your project. You can specify the `name` argument and `--type` option to provide these values via command-line. - -If the `--multi-app` flag is specified, this command will initialize your project as a multi-app project, allowing for apps within monorepos and unconventional repository structures. See the multi-app [docs](https://ionicframework.com/docs/cli/configuration#multi-app-projects) for details. Once a multi-app project is initialized, you can run `ionic init` again within apps in your project to initialize them. - -## Examples - -```shell -$ ionic init -$ ionic init "My App" -$ ionic init "My App" --type=angular -$ ionic init --multi-app -``` - -## Inputs - - - - - - - - - - - - - -
-

name

-
Description -

- The name of your project (e.g. myApp, "My App") -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --type - =<type> - -

-
Description -

- Type of project (e.g. angular, react, vue, custom) -

-
-

- - --force - -

-
Description -

Initialize even if a project already exists

-
Aliases - -f -
-

- - --multi-app - -

-
Description -

Initialize a multi-app project

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --project-id - =<slug> - -

-
Description -
-

Specify a slug for your app

-
-
-

- - --default - -

-
Description -
-

Mark the initialized app as the default project

-
-
diff --git a/versioned_docs/version-v5/cli/commands/integrations-disable.md b/versioned_docs/version-v5/cli/commands/integrations-disable.md deleted file mode 100644 index adf7d146ad2..00000000000 --- a/versioned_docs/version-v5/cli/commands/integrations-disable.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: 'integrations disable' ---- - -# ionic integrations disable - -Disable an integration - -```shell -ionic integrations disable [options] -``` - -Integrations, such as Cordova, can be disabled with this command. - -## Inputs - - - - - - - - - - - - - -
-

name

-
Description -

- The integration to disable (e.g. capacitor, cordova, enterprise) -

-
diff --git a/versioned_docs/version-v5/cli/commands/integrations-enable.md b/versioned_docs/version-v5/cli/commands/integrations-enable.md deleted file mode 100644 index 8dc92c66bdd..00000000000 --- a/versioned_docs/version-v5/cli/commands/integrations-enable.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -sidebar_label: 'integrations enable' ---- - -# ionic integrations enable - -Add & enable integrations to your app - -```shell -ionic integrations enable [options] -``` - -Integrations, such as Cordova, can be enabled with this command. If the integration has never been added to the project, `ionic integrations enable` will download and add the integration. - -Integrations can be re-added with the `--add` option. - -## Inputs - - - - - - - - - - - - - -
-

name

-
Description -

- The integration to enable (e.g. capacitor, cordova, enterprise) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --add - -

-
Description -

Download and add the integration even if enabled

-
-

- - --root - =<path> - -

-
Description -

Specify an alternative destination to download into when adding

-
-

- - --quiet - -

-
Description -

Less verbose output, ignore integration errors

-
diff --git a/versioned_docs/version-v5/cli/commands/integrations-list.md b/versioned_docs/version-v5/cli/commands/integrations-list.md deleted file mode 100644 index c4f838fff69..00000000000 --- a/versioned_docs/version-v5/cli/commands/integrations-list.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -sidebar_label: 'integrations list' ---- - -# ionic integrations list - -List available and active integrations in your app - -```shell -ionic integrations list [options] -``` - -This command will print the status of integrations in Ionic projects. Integrations can be **enabled** (added and enabled), **disabled** (added but disabled), and **not added** (never added to the project). - -- To enable or add integrations, see `ionic integrations enable --help` -- To disable integrations, see `ionic integrations disable --help` diff --git a/versioned_docs/version-v5/cli/commands/link.md b/versioned_docs/version-v5/cli/commands/link.md deleted file mode 100644 index 6117a9f0dd9..00000000000 --- a/versioned_docs/version-v5/cli/commands/link.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: 'link' ---- - -# ionic link - -Connect local apps to Ionic - -```shell -ionic link [options] -``` - -Link apps on Appflow to local Ionic projects with this command. - -If the `id` argument is excluded, this command will prompt you to select an app from Appflow. - -Appflow uses a git-based workflow to manage app updates. During the linking process, select **GitHub** (recommended) or **Appflow** as a git host. See our [documentation](https://ionicframework.com/docs/appflow/basics/git) for more information. - -Ultimately, this command sets the **id** property in **./ionic.config.json**, which marks this app as linked. - -If you are having issues linking, please get in touch with our [Support](https://ion.link/support-request). - -## Examples - -```shell -$ ionic link -$ ionic link a1b2c3d4 -``` - -## Inputs - - - - - - - - - - - - - -
-

id

-
Description -

- The Appflow ID of the app to link (e.g. a1b2c3d4) -

-
diff --git a/versioned_docs/version-v5/cli/commands/login.md b/versioned_docs/version-v5/cli/commands/login.md deleted file mode 100644 index f610b0b0243..00000000000 --- a/versioned_docs/version-v5/cli/commands/login.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -sidebar_label: 'login' ---- - -# ionic login - -Log in to Ionic - -```shell -ionic login [options] -``` - -Authenticate with Ionic and retrieve a user token, which is stored in the CLI config. The most secure way to log in is running `ionic login` without arguments, which will open a browser where you can submit your credentials. - -If the `IONIC_TOKEN` environment variable is set, the CLI will automatically authenticate you. To retrieve your user token, first use `ionic login ` to log in, then use `ionic config get -g tokens.user` to print the token. (**Note**: Tokens retrieved from the browser login are short-lived and not recommended for use with `IONIC_TOKEN`.) - -`ionic login` will also accept `password` through stdin, e.g.: `echo "" | ionic login `. - -If you need to create an Ionic account, use `ionic signup` or the Ionic [Website](https://ionicframework.com/signup). - -You can reset your password in the [Dashboard](https://dashboard.ionicframework.com/reset-password). - -If you are having issues logging in, please get in touch with our [Support](https://ion.link/support-request). - -## Examples - -```shell -$ ionic login -$ ionic login john@example.com -$ ionic login hello@example.com secret -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

email

-
Description -

Your email address

-
-

password

-
Description -

Your password

-
diff --git a/versioned_docs/version-v5/cli/commands/logout.md b/versioned_docs/version-v5/cli/commands/logout.md deleted file mode 100644 index 7e0a52c76ed..00000000000 --- a/versioned_docs/version-v5/cli/commands/logout.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -sidebar_label: 'logout' ---- - -# ionic logout - -Log out of Ionic - -```shell -ionic logout [options] -``` - -Remove the Ionic user token from the CLI config. - -Log in again with `ionic login`. - -If you need to create an Ionic account, use `ionic signup`. diff --git a/versioned_docs/version-v5/cli/commands/package-build.md b/versioned_docs/version-v5/cli/commands/package-build.md deleted file mode 100644 index 4122503fcca..00000000000 --- a/versioned_docs/version-v5/cli/commands/package-build.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -sidebar_label: 'package build' ---- - -# ionic package build - -Create a package build on Appflow - -```shell -ionic package build [options] -``` - -This command creates a package build on Appflow. While the build is running, it prints the remote build log to the terminal. If the build is successful, it downloads the created app package file in the current directory. - -Apart from `--commit`, every option can be specified using the full name setup within the [Dashboard](https://dashboard.ionicframework.com). - -The `--signing-certificate` option is mandatory for any iOS build but not for Android debug builds. - -Customizing the build: - -- The `--environment` and `--native-config` options can be used to customize the groups of values exposed to the build. -- Override the preferred platform with `--build-stack`. This is useful for building older iOS apps. - -Deploying the build to an App Store: - -- The `--destination` option can be used to deliver the app created by the build to the configured App Store. This can be used only together with build type `release` for Android and build types `app-store` or `enterprise` for iOS. - -## Examples - -```shell -$ ionic package build android debug -$ ionic package build ios development --signing-certificate="iOS Signing Certificate Name" -$ ionic package build android debug --environment="My Custom Environment Name" -$ ionic package build android debug --native-config="My Custom Native Config Name" -$ ionic package build android debug --commit=2345cd3305a1cf94de34e93b73a932f25baac77c -$ ionic package build ios development --signing-certificate="iOS Signing Certificate Name" --build-stack="iOS - Xcode 9" -$ ionic package build ios development --signing-certificate="iOS Signing Certificate Name" --build-file-name=my_custom_file_name.ipa -$ ionic package build ios app-store --signing-certificate="iOS Signing Certificate Name" --destination="Apple App Store Destination" -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

platform

-
Description -

- The platform to package (android, ios) -

-
-

type

-
Description -

- The build type (debug, release, development, ad-hoc,{' '} - app-store, enterprise) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --signing-certificate - =<name> - -

-
Description -

Signing certificate

-
-

- - --environment - =<name> - -

-
Description -

The group of environment variables exposed to your build

-
-

- - --native-config - =<name> - -

-
Description -

The group of native config variables exposed to your build

-
-

- - --destination - =<name> - -

-
Description -

The configuration to deploy the build artifact to the app store

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --commit - =<sha1> - -

-
Description -
-

Commit (defaults to HEAD)

-
-
-

- - --build-stack - =<name> - -

-
Description -
-

- Build stack ("Android", "iOS - Xcode 11 (Preferred)",{' '} - "iOS - Xcode 10") -

-
-
-

- - --build-file-name - =<name> - -

-
Description -
-

The name for the downloaded build file

-
-
diff --git a/versioned_docs/version-v5/cli/commands/package-deploy.md b/versioned_docs/version-v5/cli/commands/package-deploy.md deleted file mode 100644 index a0b2b4ebaee..00000000000 --- a/versioned_docs/version-v5/cli/commands/package-deploy.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -sidebar_label: 'package deploy' ---- - -# ionic package deploy - -Deploys a binary to a destination, such as an app store using Appflow - -```shell -ionic package deploy [options] -``` - -This command deploys a binary to a destination using Appflow. While running, the remote log is printed to the terminal. - -The command takes two parameters: the numeric ID of the package build that previously created the binary and the name of the destination where the binary is going to be deployed. -Both can be retrieved from the [Dashboard](https://dashboard.ionicframework.com). - -## Examples - -```shell -ionic package deploy 123456789 "My app store destination" -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

build-id

-
Description -

The build id of the desired successful package build

-
-

destination

-
Description -

The destination to deploy the build artifact to the app store

-
diff --git a/versioned_docs/version-v5/cli/commands/repair.md b/versioned_docs/version-v5/cli/commands/repair.md deleted file mode 100644 index 6e4174c0e10..00000000000 --- a/versioned_docs/version-v5/cli/commands/repair.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -sidebar_label: 'repair' ---- - -# ionic repair - -Remove and recreate dependencies and generated files - -```shell -ionic repair [options] -``` - -This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project. - -For Cordova apps, it removes and recreates the generated native project and the native dependencies of your project. - -## Options - - - - - - - - - - - - - -
-

- - --cordova - -

-
Description -

Only perform the repair steps for Cordova platforms and plugins.

-
diff --git a/versioned_docs/version-v5/cli/commands/serve.md b/versioned_docs/version-v5/cli/commands/serve.md deleted file mode 100644 index ad20fc6c253..00000000000 --- a/versioned_docs/version-v5/cli/commands/serve.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -sidebar_label: 'serve' ---- - -# ionic serve - -Start a local dev server for app dev/testing - -```shell -ionic serve [options] -``` - -Easily spin up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build. - -By default, `ionic serve` boots up a development server on `localhost`. To serve to your LAN, specify the `--external` option, which will use all network interfaces and print the external address(es) on which your app is being served. - -Try the `--lab` option to see multiple platforms at once. - -`ionic serve` uses the Angular CLI. Use `ng serve --help` to list all Angular CLI options for serving your app. See the `ng serve` [docs](https://angular.io/cli/serve) for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the `--` separator after the Ionic CLI arguments. See the examples. - -The dev server can use HTTPS via the `--ssl` option **(experimental)**. There are several known issues with HTTPS. See issue [#3305](https://github.com/ionic-team/ionic-cli/issues/3305). - -## Examples - -```shell -$ ionic serve -$ ionic serve --external -$ ionic serve --lab -$ ionic serve -- --proxy-config proxy.conf.json -``` - -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --ssl - -

-
Description -

Use HTTPS for the dev server

-
-

- - --prod - -

-
Description -

- Flag to use the production configuration -

-
-

- - --external - -

-
Description -

- Host dev server on all network interfaces (i.e. --host=0.0.0.0) -

-
-

- - --no-livereload - -

-
Description -

Do not spin up dev server--just serve files

-
-

- - --no-open - -

-
Description -

Do not open a browser window

-
-

- - --lab - -

-
Description -

Test your apps on multiple platform types in the browser

-
Aliases - -l -
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --consolelogs - -

-
Description -
-

Print app console logs to the terminal

-
-
-

- - --consolelogs-port - =<port> - -

-
Description -
-

Use specific port for console logs server

-
-
-

- - --configuration - =<conf> - -

-
Description -
-

Specify the configuration to use.

-
-
Aliases - -c -
-

- - --source-map - -

-
Description -
-

Output sourcemaps

-
-
-

- - --host - =<host> - -

-
Description -
-

Use specific host for the dev server

-
-
Defaultlocalhost
-

- - --port - =<port> - -

-
Description -
-

Use specific port for the dev server

-
-
Aliases - -p -
Default8100
-

- - --public-host - =<host> - -

-
Description -
-

The host used for the browser or web view

-
-
-

- - --lab-host - =<host> - -

-
Description -
-

Use specific host for Ionic Lab server

-
-
Defaultlocalhost
-

- - --lab-port - =<port> - -

-
Description -
-

Use specific port for Ionic Lab server

-
-
Default8200
-

- - --browser - =<browser> - -

-
Description -
-

- Specifies the browser to use (safari, firefox, google chrome) -

-
-
Aliases - -w -
-

- - --browseroption - =<path> - -

-
Description -
-

- Specifies a path to open to (/#/tab/dash) -

-
-
Aliases - -o -
diff --git a/versioned_docs/version-v5/cli/commands/signup.md b/versioned_docs/version-v5/cli/commands/signup.md deleted file mode 100644 index 6dbf42dd971..00000000000 --- a/versioned_docs/version-v5/cli/commands/signup.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -sidebar_label: 'signup' ---- - -# ionic signup - -Create an Ionic account - -```shell -ionic signup [options] -``` - -If you are having issues signing up, please get in touch with our [Support](https://ion.link/support-request). diff --git a/versioned_docs/version-v5/cli/commands/ssh-add.md b/versioned_docs/version-v5/cli/commands/ssh-add.md deleted file mode 100644 index e8f2ad3f737..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssh-add.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: 'ssh add' ---- - -# ionic ssh add - -Add an SSH public key to Ionic - -```shell -ionic ssh add [options] -``` - -## Inputs - - - - - - - - - - - - - -
-

pubkey-path

-
Description -

Location of public key file to add to Ionic

-
- -## Options - - - - - - - - - - - - - -
-

- - --use - -

-
Description -

Use the newly added key as your default SSH key for Ionic

-
diff --git a/versioned_docs/version-v5/cli/commands/ssh-delete.md b/versioned_docs/version-v5/cli/commands/ssh-delete.md deleted file mode 100644 index 6e4f94de927..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssh-delete.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_label: 'ssh delete' ---- - -# ionic ssh delete - -Delete an SSH public key from Ionic - -```shell -ionic ssh delete [options] -``` - -## Inputs - - - - - - - - - - - - - -
-

key-id

-
Description -

The ID of the public key to delete

-
diff --git a/versioned_docs/version-v5/cli/commands/ssh-generate.md b/versioned_docs/version-v5/cli/commands/ssh-generate.md deleted file mode 100644 index 3aefae63d81..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssh-generate.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -sidebar_label: 'ssh generate' ---- - -# ionic ssh generate - -Generates a private and public SSH key pair - -```shell -ionic ssh generate [options] -``` - -## Inputs - - - - - - - - - - - - - -
-

key-path

-
Description -

Destination of private key file

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --type - =<type> - -

-
Description -
-

- The type of key to generate: ecdsa, ed25519, rsa -

-
-
Aliases - -t -
Defaultrsa
-

- - --bits - =<bits> - -

-
Description -
-

Number of bits in the key

-
-
Aliases - -b -
Default2048
-

- - --annotation - =<annotation> - -

-
Description -
-

Annotation (comment) in public key. Your Ionic email address will be used

-
-
Aliases - -C -
diff --git a/versioned_docs/version-v5/cli/commands/ssh-list.md b/versioned_docs/version-v5/cli/commands/ssh-list.md deleted file mode 100644 index 3f448b9b31b..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssh-list.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: 'ssh list' ---- - -# ionic ssh list - -List your SSH public keys on Ionic - -```shell -ionic ssh list [options] -``` - -## Options - - - - - - - - - - - - - -
-

- - --json - -

-
Description -

Output SSH keys in JSON

-
diff --git a/versioned_docs/version-v5/cli/commands/ssh-setup.md b/versioned_docs/version-v5/cli/commands/ssh-setup.md deleted file mode 100644 index c5b2aa17978..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssh-setup.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -sidebar_label: 'ssh setup' ---- - -# ionic ssh setup - -Setup your Ionic SSH keys automatically - -```shell -ionic ssh setup [options] -``` - -This command offers a setup wizard for Ionic SSH keys using a series of prompts. For more control, see the commands available for managing SSH keys with the `ionic ssh --help` command. For an entirely manual approach, see **Personal Settings** => **SSH Keys** in the [Dashboard](https://dashboard.ionicframework.com/settings/ssh-keys). - -If you are having issues setting up SSH keys, please get in touch with our [Support](https://ion.link/support-request). diff --git a/versioned_docs/version-v5/cli/commands/ssh-use.md b/versioned_docs/version-v5/cli/commands/ssh-use.md deleted file mode 100644 index 498019b8615..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssh-use.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: 'ssh use' ---- - -# ionic ssh use - -Set your active Ionic SSH key - -```shell -ionic ssh use [options] -``` - -This command modifies the SSH configuration file (**~/.ssh/config**) to set an active private key for the **git.ionicjs.com** host. Read more about SSH configuration by running the `man ssh_config` command or by visiting online man [pages](https://linux.die.net/man/5/ssh_config). - -Before making changes, `ionic ssh use` will print a diff and ask for permission to write the file. - -## Inputs - - - - - - - - - - - - - -
-

key-path

-
Description -

Location of private key file to use

-
diff --git a/versioned_docs/version-v5/cli/commands/ssl-generate.md b/versioned_docs/version-v5/cli/commands/ssl-generate.md deleted file mode 100644 index aca945d2b5e..00000000000 --- a/versioned_docs/version-v5/cli/commands/ssl-generate.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -sidebar_label: 'ssl generate' ---- - -# ionic ssl generate - -Generates an SSL key & certificate - -```shell -ionic ssl generate [options] -``` - -Uses OpenSSL to create a self-signed certificate for **localhost** (by default). - -After the certificate is generated, you will still need to add it to your system or browser as a trusted certificate. - -The default directory for `--key-path` and `--cert-path` is `.ionic/ssl/`. - -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --key-path - =<path> - -

-
Description -

Destination of private key file

-
Default./.ionic/ssl/key.pem
-

- - --cert-path - =<path> - -

-
Description -

Destination of certificate file

-
Default./.ionic/ssl/cert.pem
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --country-name - =<C> - -

-
Description -
-

The country name (C) of the SSL certificate

-
-
DefaultUS
-

- - --state-or-province-name - =<ST> - -

-
Description -
-

The state or province name (ST) of the SSL certificate

-
-
DefaultWisconsin
-

- - --locality-name - =<L> - -

-
Description -
-

The locality name (L) of the SSL certificate

-
-
DefaultMadison
-

- - --organization-name - =<O> - -

-
Description -
-

The organization name (O) of the SSL certificate

-
-
DefaultIonic
-

- - --common-name - =<CN> - -

-
Description -
-

The common name (CN) of the SSL certificate

-
-
Defaultlocalhost
-

- - --bits - =<bits> - -

-
Description -
-

Number of bits in the key

-
-
Aliases - -b -
Default2048
diff --git a/versioned_docs/version-v5/cli/commands/start.md b/versioned_docs/version-v5/cli/commands/start.md deleted file mode 100644 index 8fd719a80e8..00000000000 --- a/versioned_docs/version-v5/cli/commands/start.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: 'How to Create A New Application with Ionic Start for New Projects' -description: 'Learn how to create a new app project with Ionic Start. This command creates a working Ionic app that installs dependencies for you and sets up your project.' -sidebar_label: 'start' ---- - -# ionic start - -Create a new project - -```shell -ionic start [options] -``` - -This command creates a working Ionic app. It installs dependencies for you and sets up your project. - -Running `ionic start` without any arguments will prompt you for information about your new project. - -The first argument is your app's `name`. Don't worry--you can always change this later. The `--project-id` is generated from `name` unless explicitly specified. - -The second argument is the `template` from which to generate your app. You can list all templates with the `--list` option. You can also specify a git repository URL for `template`, in which case the existing project will be cloned. - -Use the `--type` option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with `--type=ionic-angular`. Use `--list` to see all project types and templates. - -## Examples - -```shell -$ ionic start -$ ionic start --list -$ ionic start myApp -$ ionic start myApp blank -$ ionic start myApp tabs --cordova -$ ionic start myApp tabs --capacitor -$ ionic start myApp super --type=ionic-angular -$ ionic start myApp blank --type=ionic1 -$ ionic start cordovaApp tabs --cordova -$ ionic start "My App" blank -$ ionic start "Conference App" https://github.com/ionic-team/ionic-conference-app -``` - -## Inputs - - - - - - - - - - - - - - - - - - - - - - - - -
-

name

-
Description -

- The name of your new project (e.g. myApp, "My App") -

-
-

template

-
Description -

- The starter template to use (e.g. blank, tabs; use --list to see all) -

-
- -## Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --list - -

-
Description -

List available starter templates

-
Aliases - -l -
-

- - --type - =<type> - -

-
Description -

- Type of project to start (e.g. angular, react, ionic-angular,{' '} - ionic1) -

-
-

- - --cordova - -

-
Description -

Include Cordova integration

-
-

- - --capacitor - -

-
Description -

Include Capacitor integration

-
-

- - --id - =<id> - -

-
Description -

Specify an Ionic App ID to link

-
- -## Advanced Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- - --no-deps - -

-
Description -
-

Do not install npm/yarn dependencies

-
-
-

- - --no-git - -

-
Description -
-

Do not initialize a git repo

-
-
-

- - --link - -

-
Description -
-

Connect your new app to Ionic

-
-
-

- - --project-id - =<slug> - -

-
Description -
-

Specify a slug for your app (used for the directory name and package name)

-
-
-

- - --package-id - =<id> - -

-
Description -
-

Specify the bundle ID/application ID for your app (reverse-DNS notation)

-
-
diff --git a/versioned_docs/version-v5/cli/configuration.md b/versioned_docs/version-v5/cli/configuration.md deleted file mode 100644 index 63d6ca786af..00000000000 --- a/versioned_docs/version-v5/cli/configuration.md +++ /dev/null @@ -1,233 +0,0 @@ -# Configuration - -## Files - -Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`. - -The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md). - -### Project Configuration File - -Each Ionic project has a project configuration file, usually at the project's root directory. The following is an annotated `ionic.config.json` file. - -```json -{ - // The human-readable name of the app. - "name": "My App", - - // The project type of the app. The CLI uses this value to determine which - // commands and command options are available, what to output for help - // documentation, and what to use for web asset builds and the dev server. - "type": "angular", - - // The App ID for Appflow. - "id": "abc123", - - // Configuration object for integrations such as Cordova and Capacitor. - "integrations": { - "cordova": { - ... - } - }, - - // Hook configuration--see the Hooks section below for details. - "hooks": { - ... - } -} -``` - -## Environment Variables - -The CLI will look for the following environment variables: - -- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). -- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). - -## Flags - -CLI flags are global options that alter the behavior of a CLI command. - -- `--help`: Instead of running the command, view its help page. -- `--verbose`: Show all log messages for debugging purposes. -- `--quiet`: Only show `WARN` and `ERROR` log messages. -- `--no-interactive`: Turn off interactive prompts and fancy outputs. If CI or a non-TTY terminal is detected, the CLI is automatically non-interactive. -- `--confirm`: Turn on auto-confirmation of confirmation prompts. Careful: the CLI prompts before doing something potentially harmful. Auto-confirming may have unintended results. - -## Hooks - -The CLI can run scripts during certain events, such as before and after builds. To hook into the CLI, the following [npm scripts](https://docs.npmjs.com/misc/scripts) can be used in `package.json`: - -- `ionic:serve:before`: executed before the dev server starts -- `ionic:serve:after`: executed after the dev server is terminated -- `ionic:build:before`: executed before a web asset build begins -- `ionic:build:after`: executed after a web asset build finishes -- `ionic:capacitor:run:before`: executed during `ionic capacitor run` before capacitor open is executed -- `ionic:capacitor:build:before`: executed during `ionic capacitor build` before capacitor open is executed -- `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync - -When using a shell script for any of the hooks, hook context is defined in environment variables prefixed with `IONIC_CLI_HOOK_CTX_`. - -The following example shows the environment variables that are set for the `ionic:capacitor:build` hook. - -```shell -IONIC_CLI_HOOK_CTX_NAME=capacitor:build:before -IONIC_CLI_HOOK_CTX_BUILD_CORDOVA_ASSETS=true -IONIC_CLI_HOOK_CTX_BUILD_ENGINE=browser -IONIC_CLI_HOOK_CTX_BUILD_PROJECT=app -IONIC_CLI_HOOK_CTX_BUILD_TYPE=angular -IONIC_CLI_HOOK_CTX_BUILD_VERBOSE=false -IONIC_CLI_HOOK_CTX_CAPACITOR_APP_ID=io.ionic.starter -IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=ionic-starter-app -IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false -``` - -Hooks can also be defined in `ionic.config.json`. Define a `hooks` object within the project, where each key is the name of the hook (without the `ionic:` prefix), and the value is a path to a JavaScript file or an array of paths. - -In the following example, the file is imported and run during the `ionic:build:before` hook. - -```json -"hooks": { - "build:before": "./scripts/build-before.js" -}, -``` - -JavaScript hook files should export a single function, which is passed a single argument (`ctx`) whenever the hook executes. - -The argument is the context given to the hook file, which differs from hook to hook and with different invocations. - -`./scripts/build-before.js`: - -```javascript -module.exports = function (ctx) { - console.log(ctx); -}; -``` - -## Multi-app Projects - - - Available in CLI 6.2.0+ - - -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). - -:::note -These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. - -If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples. -::: - -### Setup Steps - -1. Create a directory and initialize a monorepo (see [Project Structure](#project-structure) for full details). -1. Initialize the monorepo as an Ionic multi-app project. This will create a multi-app `ionic.config.json` file. See [Config File](#config-file) for full details. - - ```shell - $ ionic init --multi-app - ``` - -1. Use `ionic start` to create Ionic apps or `ionic init` to initialize existing apps (see [Adding an App](#adding-an-app) for full details). - -### Project Structure - -In a multi-app project, project structure is flexible. The only requirement is a multi-app `ionic.config.json` file at the root of the repository. - -Below is an example setup, where apps in the `apps/` directory are separated from the shared code in the `lib/` directory. Notice the root `ionic.config.json` file and the monorepo's `package.json` file. - -```bash -apps/ -├── myApp/ -└── myOtherApp/ -lib/ -ionic.config.json -package.json -``` - -### Config File - -In a multi-app project, apps share a single `ionic.config.json` file at the root of the repository instead of each app having their own. The multi-app config file contains the configuration for each app by nesting configuration objects in a `projects` object. A default app can be specified using `defaultProject`. - -Below is an example file, which corresponds to the file structure above. - -```json -{ - "defaultProject": "myApp", - "projects": { - "myApp": { - "name": "My App", - "integrations": {}, - "type": "angular", - "root": "apps/myApp" - }, - "myOtherApp": { - "name": "My Other App", - "integrations": {}, - "type": "angular", - "root": "apps/myOtherApp" - } - } -} -``` - -When a multi-app project is detected, the Ionic CLI will operate under the context of an app configured in the root `ionic.config.json`. Project selection criteria is as follows: - -1. If the global CLI option `--project` is specified, the project is looked up by key in the `projects` object. For example, `--project=myApp` will select the `myApp` project. -1. If the CLI detects it is being run within a project path, configured with the `root` key, it will select the matched project. For example, using the CLI within the `apps/myOtherApp/src` directory will select the `myOtherApp` project. -1. If a `defaultProject` is specified in `ionic.config.json`, it will select the specified project when the above criteria is not met. - -### Adding an App - -Apps can be registered in a multi-app project either by using `ionic start` to create new apps or `ionic init` to initialize existing apps. - -#### Using `ionic start` - -If a multi-app project is detected during `ionic start`, the CLI will add the app configuration to the root `ionic.config.json` file instead of creating a project-specific one. - -Dependency installation can be skipped using `--no-deps` if dependencies are hoisted to the root of the monorepo. - -```shell -$ cd apps/ -$ ionic start "My New App" --no-deps -``` - -#### Using `ionic init` - -If an app was created in a way other than `ionic start`, for example by using a prebuilt template, use `ionic init` to register the existing app with the multi-app project. - -:::note -Make sure the app doesn't have an existing `ionic.config.json`. -::: - -```shell -$ cd apps/existing-app/ -$ ionic init -``` - -## Advanced Configuration - -### Overriding the Build - -Normally, the CLI runs a hard-coded set of commands based on the project type. For example, the standard web asset build for Angular projects is `ng run app:build`. The web asset build can be overridden and `ionic build` can continue to be used by utilizing the `ionic:build` [npm script](https://docs.npmjs.com/misc/scripts). Similarly, the dev server can be overridden by using the `ionic:serve` npm script. - -Pay close attention to the flags supplied to the script by the Ionic CLI. Irregularities may occur if options are not respected, especially for livereload on devices. - -### Command Options - -Command options can be expressed with environment variables. They are normally set with `--opt=value` syntax. The naming of these environment variables follows a pattern: start with `IONIC_CMDOPTS_`, add the command name (replacing any spaces with underscores), add the option name (replacing any hyphens with underscores), and then uppercase everything. Boolean flags (command-line options that don't take a value) can be set to `1` or `0`. Strip the `--no-` prefix in boolean flags, if it exists (`--no-open` in ionic serve can be expressed with `IONIC_CMDOPTS_SERVE_OPEN=0`, for example). - -For example, the command options in `ionic cordova run ios -lc --livereload-port=1234 --host=0.0.0.0` can also be expressed with this series of environment variables: - -```shell -$ export IONIC_CMDOPTS_CORDOVA_RUN_LIVERELOAD=1 -$ export IONIC_CMDOPTS_CORDOVA_RUN_CONSOLELOGS=1 -$ export IONIC_CMDOPTS_CORDOVA_RUN_LIVERELOAD_PORT=1234 -$ export IONIC_CMDOPTS_CORDOVA_RUN_HOST=0.0.0.0 -``` - -If these variables are set in the environment, `ionic cordova build ios` will use new defaults for its options. - -### Telemetry - -The CLI sends usage data to Ionic to create a better experience. To disable this functionality, run `ionic config set -g telemetry false`. diff --git a/versioned_docs/version-v5/cli/livereload.md b/versioned_docs/version-v5/cli/livereload.md deleted file mode 100644 index d43ea298b02..00000000000 --- a/versioned_docs/version-v5/cli/livereload.md +++ /dev/null @@ -1,66 +0,0 @@ -# Live Reload - -One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices. - -## Terms - -Live Reload is a conflated term. With `ionic serve`, Live Reload just refers to reloading the browser when changes are made. Live Reload can also be used with Capacitor and Cordova to provide the same experience on virtual and hardware devices, which eliminates the need for re-deploying a native binary. - -## Usage - -Since live-reload requires the Web View to load your app from a URL hosted by your computer instead of just reading files on the device, setting up live-reload for hardware devices can be tricky. - -As with regular device deploys, you will need a cable to connect your device to your computer. The difference is the Ionic CLI configures the Web View to load your app from the dev server on your computer. - -### Capacitor - -Capacitor does not yet have a programmatic build for development (track [this issue](https://github.com/ionic-team/capacitor/issues/324) for progress), so the Ionic CLI does **not** automatically forward ports for iOS and Android. - -To use Live Reload with Capacitor, make sure you're either using a virtual device or a hardware device connected to the same Wi-Fi network as your computer. Then, you'll need to specify that you want to use an external address for the dev server using the `--external` flag. - -```shell -$ ionic capacitor run ios -l --external -$ ionic capacitor run android -l --external -``` - -:::note -Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app. -::: - -### Cordova - -#### Android - -For Android devices, the Ionic CLI will automatically forward the dev server port. This means you can use a `localhost` address and it will refer to your computer when loaded in the Web View, not the device. - -The following all-in-one command will start a live-reload server on `localhost` and deploy the app to an Android device using Cordova: - -```shell -ionic cordova run android -l -``` - -#### iOS - -For iOS devices, port forwarding is not yet an option. This means you'll need to connect your device to the same Wi-Fi network as your computer and use an external address for the dev server. - -:::note -You can track [this issue](https://github.com/ionic-team/native-run/issues/20) for progress on iOS port forwarding with Ionic. -::: - -In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network. - -The following all-in-one command will start a live-reload server on **all addresses** and deploy the app to an iOS device using Cordova: - -```shell -ionic cordova run ios -l --external -``` - -:::note -Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app. -::: - -## Tips - -- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md). -- You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`. -- For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable. diff --git a/versioned_docs/version-v5/cli/using-a-proxy.md b/versioned_docs/version-v5/cli/using-a-proxy.md deleted file mode 100644 index 2bc33cfb579..00000000000 --- a/versioned_docs/version-v5/cli/using-a-proxy.md +++ /dev/null @@ -1,45 +0,0 @@ -# Using a Proxy - -Proxy support is built-in to the Ionic CLI. Proxy settings can be configured via the config file or an environment variable. - -To configure proxy settings via the config file, run the following with the URL of the proxy server: - -```shell -ionic config set -g proxy http://proxy.example.com:8888 -``` - -To configure proxy settings via an environment variable, use one of the following: - -```shell -$ export HTTP_PROXY="http://proxy.example.com:8888" # also used by npm -$ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm -$ export IONIC_HTTP_PROXY="http://proxy.example.com:8888" -``` - -### Other CLIs - -Each CLI that you use must be configured separately to proxy network requests. - -#### npm - -```shell -npm config set proxy http://proxy.company.com:8888 -``` - -#### git - -```shell -git config --global http.proxy http://proxy.example.com:8888 -``` - -### SSL Configuration - -The Ionic CLI can be configured to use various SSL settings for HTTP requests. - -```shell -$ ionic config set -g ssl.cafile /path/to/cafile # file path to your CA root certificate -$ ionic config set -g ssl.certfile /path/to/certfile # file path to a client certificate -$ ionic config set -g ssl.keyfile /path/to/keyfile # file path to a client key file -``` - -The `cafile`, `certfile`, and `keyfile` entries can be manually edited as arrays of strings in `~/.ionic/config.json` to include multiple files. diff --git a/versioned_docs/version-v6/cli.md b/versioned_docs/version-v6/cli.md deleted file mode 100644 index a75302d0937..00000000000 --- a/versioned_docs/version-v6/cli.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Ionic CLI -sidebar_label: Overview ---- - - - Ionic CLI Framework: Command-Line Interface to Develop Apps - - - -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. - -## Installation - -The Ionic CLI can be installed globally with npm: - -```shell -npm install -g @ionic/cli -``` - -## Help - -The Ionic CLI ships with command documentation that is accessible with the `--help` flag. - -```shell -$ ionic --help -$ ionic --help -$ ionic --help -``` - -:::note -Be sure to run `ionic --help` in your project directory. - -For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. -::: - - - -## Architecture - -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. - -## Troubleshooting - -To troubleshoot issues with the Ionic CLI, the following may be useful: - -- Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. -- The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). diff --git a/versioned_docs/version-v6/cli/commands/.gitignore b/versioned_docs/version-v6/cli/commands/.gitignore deleted file mode 100644 index d6b7ef32c84..00000000000 --- a/versioned_docs/version-v6/cli/commands/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -* -!.gitignore diff --git a/versioned_docs/version-v6/cli/configuration.md b/versioned_docs/version-v6/cli/configuration.md deleted file mode 100644 index 9b3d7d31a95..00000000000 --- a/versioned_docs/version-v6/cli/configuration.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Configuration ---- - - - Capacitor Configuration | Maintain a Global Configuration File - - - -## Files - -Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`. - -The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md). - -### Project Configuration File - -Each Ionic project has a project configuration file, usually at the project's root directory. The following is an annotated `ionic.config.json` file. - -```json -{ - // The human-readable name of the app. - "name": "My App", - - // The project type of the app. The CLI uses this value to determine which - // commands and command options are available, what to output for help - // documentation, and what to use for web asset builds and the dev server. - "type": "angular", - - // The App ID for Appflow. - "id": "abc123", - - // Configuration object for integrations such as Cordova and Capacitor. - "integrations": { - "cordova": { - ... - } - }, - - // Hook configuration--see the Hooks section below for details. - "hooks": { - ... - } -} -``` - -## Environment Variables - -The CLI will look for the following environment variables: - -- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). -- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). - -## Flags - -CLI flags are global options that alter the behavior of a CLI command. - -- `--help`: Instead of running the command, view its help page. -- `--verbose`: Show all log messages for debugging purposes. -- `--quiet`: Only show `WARN` and `ERROR` log messages. -- `--no-interactive`: Turn off interactive prompts and fancy outputs. If CI or a non-TTY terminal is detected, the CLI is automatically non-interactive. -- `--confirm`: Turn on auto-confirmation of confirmation prompts. Careful: the CLI prompts before doing something potentially harmful. Auto-confirming may have unintended results. - -## Hooks - -The CLI can run scripts during certain events, such as before and after builds. To hook into the CLI, the following [npm scripts](https://docs.npmjs.com/misc/scripts) can be used in `package.json`: - -- `ionic:serve:before`: executed before the dev server starts -- `ionic:serve:after`: executed after the dev server is terminated -- `ionic:build:before`: executed before a web asset build begins -- `ionic:build:after`: executed after a web asset build finishes -- `ionic:capacitor:run:before`: executed during `ionic capacitor run` before capacitor open is executed -- `ionic:capacitor:build:before`: executed during `ionic capacitor build` before capacitor open is executed -- `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync - -When using a shell script for any of the hooks, hook context is defined in environment variables prefixed with `IONIC_CLI_HOOK_CTX_`. - -The following example shows the environment variables that are set for the `ionic:capacitor:build` hook. - -```shell -IONIC_CLI_HOOK_CTX_NAME=capacitor:build:before -IONIC_CLI_HOOK_CTX_BUILD_CORDOVA_ASSETS=true -IONIC_CLI_HOOK_CTX_BUILD_ENGINE=browser -IONIC_CLI_HOOK_CTX_BUILD_PROJECT=app -IONIC_CLI_HOOK_CTX_BUILD_TYPE=angular -IONIC_CLI_HOOK_CTX_BUILD_VERBOSE=false -IONIC_CLI_HOOK_CTX_CAPACITOR_APP_ID=io.ionic.starter -IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=ionic-starter-app -IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false -``` - -Hooks can also be defined in `ionic.config.json`. Define a `hooks` object within the project, where each key is the name of the hook (without the `ionic:` prefix), and the value is a path to a JavaScript file or an array of paths. - -In the following example, the file is imported and run during the `ionic:build:before` hook. - -```json -"hooks": { - "build:before": "./scripts/build-before.js" -}, -``` - -JavaScript hook files should export a single function, which is passed a single argument (`ctx`) whenever the hook executes. - -The argument is the context given to the hook file, which differs from hook to hook and with different invocations. - -`./scripts/build-before.js`: - -```javascript -module.exports = function (ctx) { - console.log(ctx); -}; -``` - -## Multi-app Projects - - - Available in CLI 6.2.0+ - - -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). - -:::note -These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. - -If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples. -::: - -### Setup Steps - -1. Create a directory and initialize a monorepo (see [Project Structure](#project-structure) for full details). -1. Initialize the monorepo as an Ionic multi-app project. This will create a multi-app `ionic.config.json` file. See [Config File](#config-file) for full details. - - ```shell - $ ionic init --multi-app - ``` - -1. Use `ionic start` to create Ionic apps or `ionic init` to initialize existing apps (see [Adding an App](#adding-an-app) for full details). - -### Project Structure - -In a multi-app project, project structure is flexible. The only requirement is a multi-app `ionic.config.json` file at the root of the repository. - -Below is an example setup, where apps in the `apps/` directory are separated from the shared code in the `lib/` directory. Notice the root `ionic.config.json` file and the monorepo's `package.json` file. - -```bash -apps/ -├── myApp/ -└── myOtherApp/ -lib/ -ionic.config.json -package.json -``` - -### Config File - -In a multi-app project, apps share a single `ionic.config.json` file at the root of the repository instead of each app having their own. The multi-app config file contains the configuration for each app by nesting configuration objects in a `projects` object. A default app can be specified using `defaultProject`. - -Below is an example file, which corresponds to the file structure above. - -```json -{ - "defaultProject": "myApp", - "projects": { - "myApp": { - "name": "My App", - "integrations": {}, - "type": "angular", - "root": "apps/myApp" - }, - "myOtherApp": { - "name": "My Other App", - "integrations": {}, - "type": "angular", - "root": "apps/myOtherApp" - } - } -} -``` - -When a multi-app project is detected, the Ionic CLI will operate under the context of an app configured in the root `ionic.config.json`. Project selection criteria is as follows: - -1. If the global CLI option `--project` is specified, the project is looked up by key in the `projects` object. For example, `--project=myApp` will select the `myApp` project. -1. If the CLI detects it is being run within a project path, configured with the `root` key, it will select the matched project. For example, using the CLI within the `apps/myOtherApp/src` directory will select the `myOtherApp` project. -1. If a `defaultProject` is specified in `ionic.config.json`, it will select the specified project when the above criteria is not met. - -### Adding an App - -Apps can be registered in a multi-app project either by using `ionic start` to create new apps or `ionic init` to initialize existing apps. - -#### Using `ionic start` - -If a multi-app project is detected during `ionic start`, the CLI will add the app configuration to the root `ionic.config.json` file instead of creating a project-specific one. - -Dependency installation can be skipped using `--no-deps` if dependencies are hoisted to the root of the monorepo. - -```shell -$ cd apps/ -$ ionic start "My New App" --no-deps -``` - -#### Using `ionic init` - -If an app was created in a way other than `ionic start`, for example by using a prebuilt template, use `ionic init` to register the existing app with the multi-app project. - -:::note -Make sure the app doesn't have an existing `ionic.config.json`. -::: - -```shell -$ cd apps/existing-app/ -$ ionic init -``` - -## Advanced Configuration - -### Overriding the Build - -Normally, the CLI runs a hard-coded set of commands based on the project type. For example, the standard web asset build for Angular projects is `ng run app:build`. The web asset build can be overridden and `ionic build` can continue to be used by utilizing the `ionic:build` [npm script](https://docs.npmjs.com/misc/scripts). Similarly, the dev server can be overridden by using the `ionic:serve` npm script. - -Pay close attention to the flags supplied to the script by the Ionic CLI. Irregularities may occur if options are not respected, especially for livereload on devices. - -### Command Options - -Command options can be expressed with environment variables. They are normally set with `--opt=value` syntax. The naming of these environment variables follows a pattern: start with `IONIC_CMDOPTS_`, add the command name (replacing any spaces with underscores), add the option name (replacing any hyphens with underscores), and then uppercase everything. Boolean flags (command-line options that don't take a value) can be set to `1` or `0`. Strip the `--no-` prefix in boolean flags, if it exists (`--no-open` in ionic serve can be expressed with `IONIC_CMDOPTS_SERVE_OPEN=0`, for example). - -For example, the command options in `ionic cordova run ios -lc --livereload-port=1234 --host=0.0.0.0` can also be expressed with this series of environment variables: - -```shell -$ export IONIC_CMDOPTS_CORDOVA_RUN_LIVERELOAD=1 -$ export IONIC_CMDOPTS_CORDOVA_RUN_CONSOLELOGS=1 -$ export IONIC_CMDOPTS_CORDOVA_RUN_LIVERELOAD_PORT=1234 -$ export IONIC_CMDOPTS_CORDOVA_RUN_HOST=0.0.0.0 -``` - -If these variables are set in the environment, `ionic cordova build ios` will use new defaults for its options. - -### Telemetry - -The CLI sends usage data to Ionic to create a better experience. To disable this functionality, run `ionic config set -g telemetry false`. diff --git a/versioned_docs/version-v6/cli/livereload.md b/versioned_docs/version-v6/cli/livereload.md deleted file mode 100644 index 67a571ef1cd..00000000000 --- a/versioned_docs/version-v6/cli/livereload.md +++ /dev/null @@ -1,64 +0,0 @@ -# Live Reload - -One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices. - -## Terms - -Live Reload is a conflated term. With `ionic serve`, Live Reload just refers to reloading the browser when changes are made. Live Reload can also be used with Capacitor and Cordova to provide the same experience on virtual and hardware devices, which eliminates the need for re-deploying a native binary. - -## Usage - -Since live-reload requires the Web View to load your app from a URL hosted by your computer instead of just reading files on the device, setting up live-reload for hardware devices can be tricky. - -As with regular device deploys, you will need a cable to connect your device to your computer. The difference is the Ionic CLI configures the Web View to load your app from the dev server on your computer. - -### Capacitor - -To use Live Reload with Capacitor, make sure you're either using a virtual device or a hardware device connected to the same Wi-Fi network as your computer. Then, you'll need to specify that you want to use an external address for the dev server using the `--external` flag. - -```shell -$ ionic capacitor run ios -l --external -$ ionic capacitor run android -l --external -``` - -:::note -Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app. -::: - -### Cordova - -#### Android - -For Android devices, the Ionic CLI will automatically forward the dev server port. This means you can use a `localhost` address and it will refer to your computer when loaded in the Web View, not the device. - -The following all-in-one command will start a live-reload server on `localhost` and deploy the app to an Android device using Cordova: - -```shell -ionic cordova run android -l -``` - -#### iOS - -For iOS devices, port forwarding is not yet an option. This means you'll need to connect your device to the same Wi-Fi network as your computer and use an external address for the dev server. - -:::note -You can track [this issue](https://github.com/ionic-team/native-run/issues/20) for progress on iOS port forwarding with Ionic. -::: - -In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network. - -The following all-in-one command will start a live-reload server on **all addresses** and deploy the app to an iOS device using Cordova: - -```shell -ionic cordova run ios -l --external -``` - -:::note -Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app. -::: - -## Tips - -- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md). -- You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`. -- For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable. diff --git a/versioned_docs/version-v6/cli/using-a-proxy.md b/versioned_docs/version-v6/cli/using-a-proxy.md deleted file mode 100644 index 2bc33cfb579..00000000000 --- a/versioned_docs/version-v6/cli/using-a-proxy.md +++ /dev/null @@ -1,45 +0,0 @@ -# Using a Proxy - -Proxy support is built-in to the Ionic CLI. Proxy settings can be configured via the config file or an environment variable. - -To configure proxy settings via the config file, run the following with the URL of the proxy server: - -```shell -ionic config set -g proxy http://proxy.example.com:8888 -``` - -To configure proxy settings via an environment variable, use one of the following: - -```shell -$ export HTTP_PROXY="http://proxy.example.com:8888" # also used by npm -$ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm -$ export IONIC_HTTP_PROXY="http://proxy.example.com:8888" -``` - -### Other CLIs - -Each CLI that you use must be configured separately to proxy network requests. - -#### npm - -```shell -npm config set proxy http://proxy.company.com:8888 -``` - -#### git - -```shell -git config --global http.proxy http://proxy.example.com:8888 -``` - -### SSL Configuration - -The Ionic CLI can be configured to use various SSL settings for HTTP requests. - -```shell -$ ionic config set -g ssl.cafile /path/to/cafile # file path to your CA root certificate -$ ionic config set -g ssl.certfile /path/to/certfile # file path to a client certificate -$ ionic config set -g ssl.keyfile /path/to/keyfile # file path to a client key file -``` - -The `cafile`, `certfile`, and `keyfile` entries can be manually edited as arrays of strings in `~/.ionic/config.json` to include multiple files. diff --git a/versioned_sidebars/version-v5-sidebars.json b/versioned_sidebars/version-v5-sidebars.json index 3d581ed3003..f62ebf319b5 100644 --- a/versioned_sidebars/version-v5-sidebars.json +++ b/versioned_sidebars/version-v5-sidebars.json @@ -1152,47 +1152,6 @@ ] } ], - "version-v5/cli": [ - { - "collapsed": false, - "type": "category", - "label": "CLI Documentation", - "items": [ - { - "type": "doc", - "id": "version-v5/cli" - }, - { - "type": "doc", - "id": "version-v5/cli/configuration" - }, - { - "type": "doc", - "id": "version-v5/cli/livereload" - }, - { - "type": "doc", - "id": "version-v5/cli/using-a-proxy" - }, - { - "type": "link", - "label": "Changelog", - "href": "https://github.com/ionic-team/ionic-cli/blob/develop/packages/@ionic/cli/CHANGELOG.md" - } - ] - }, - { - "collapsed": false, - "type": "category", - "label": "Command Reference", - "items": [ - { - "type": "autogenerated", - "dirName": "cli/commands" - } - ] - } - ], "version-v5/native": [ { "collapsed": false, diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json index 6ab704f7beb..a5acf94ee45 100644 --- a/versioned_sidebars/version-v6-sidebars.json +++ b/versioned_sidebars/version-v6-sidebars.json @@ -1289,49 +1289,6 @@ "collapsible": true } ], - "version-v6/cli": [ - { - "type": "category", - "label": "CLI Documentation", - "collapsed": false, - "items": [ - { - "type": "doc", - "id": "version-v6/cli" - }, - { - "type": "doc", - "id": "version-v6/cli/configuration" - }, - { - "type": "doc", - "id": "version-v6/cli/livereload" - }, - { - "type": "doc", - "id": "version-v6/cli/using-a-proxy" - }, - { - "type": "link", - "label": "Changelog", - "href": "https://github.com/ionic-team/ionic-cli/blob/develop/packages/@ionic/cli/CHANGELOG.md" - } - ], - "collapsible": true - }, - { - "type": "category", - "label": "Command Reference", - "collapsed": false, - "items": [ - { - "type": "autogenerated", - "dirName": "cli/commands" - } - ], - "collapsible": true - } - ], "version-v6/native": [ { "type": "category", From d21f67ecf8c38ec2d28c2ad4719de47d5cf25c46 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 11 Apr 2023 13:16:36 -0400 Subject: [PATCH 2/4] refactor(docs): unversion the Native portion of the docs (#2898) --- crowdin.yml | 5 +- docusaurus.config.js | 24 +- docs/native-faq.md => native/faq.md | 1 - docs/native.md => native/index.md | 3 +- {docs/native => native/plugins}/.gitignore | 0 docs/native-setup.md => native/setup.md | 3 +- scripts/native.js | 12 +- sidebars-native.js | 25 + sidebars.js | 24 - versioned_docs/version-v5/native-community.md | 195 ------- versioned_docs/version-v5/native-faq.md | 85 --- versioned_docs/version-v5/native.md | 53 -- versioned_docs/version-v5/native/abbyy-rtr.md | 109 ---- .../version-v5/native/action-sheet.md | 123 ---- versioned_docs/version-v5/native/adjust.md | 104 ---- .../version-v5/native/admob-plus.md | 80 --- versioned_docs/version-v5/native/admob.md | 239 -------- versioned_docs/version-v5/native/aes-256.md | 127 ----- .../version-v5/native/all-in-one-sdk.md | 118 ---- .../version-v5/native/analytics-firebase.md | 134 ----- .../version-v5/native/android-exoplayer.md | 100 ---- .../version-v5/native/android-full-screen.md | 108 ---- .../version-v5/native/android-notch.md | 125 ----- .../version-v5/native/android-permissions.md | 117 ---- versioned_docs/version-v5/native/anyline.md | 103 ---- .../version-v5/native/app-availability.md | 114 ---- .../version-v5/native/app-center-analytics.md | 116 ---- .../version-v5/native/app-center-crashes.md | 115 ---- .../version-v5/native/app-center-push.md | 110 ---- .../version-v5/native/app-preferences.md | 105 ---- versioned_docs/version-v5/native/app-rate.md | 120 ---- .../version-v5/native/app-version.md | 113 ---- .../version-v5/native/apple-wallet.md | 189 ------- versioned_docs/version-v5/native/appsflyer.md | 106 ---- .../version-v5/native/background-fetch.md | 125 ----- .../native/background-geolocation.md | 137 ----- .../version-v5/native/background-mode.md | 110 ---- .../version-v5/native/background-upload.md | 109 ---- versioned_docs/version-v5/native/badge.md | 106 ---- .../version-v5/native/barcode-scanner.md | 116 ---- .../version-v5/native/battery-status.md | 109 ---- versioned_docs/version-v5/native/biocatch.md | 103 ---- .../version-v5/native/biometric-wrapper.md | 102 ---- versioned_docs/version-v5/native/ble.md | 249 -------- versioned_docs/version-v5/native/blinkid.md | 162 ------ .../version-v5/native/bluetooth-le.md | 114 ---- .../version-v5/native/bluetooth-serial.md | 114 ---- versioned_docs/version-v5/native/branch-io.md | 101 ---- .../version-v5/native/broadcaster.md | 104 ---- .../version-v5/native/build-info.md | 111 ---- versioned_docs/version-v5/native/calendar.md | 109 ---- .../version-v5/native/call-directory.md | 111 ---- .../version-v5/native/call-number.md | 103 ---- .../version-v5/native/camera-preview.md | 167 ------ versioned_docs/version-v5/native/camera.md | 128 ----- versioned_docs/version-v5/native/chooser.md | 116 ---- versioned_docs/version-v5/native/clevertap.md | 95 ---- versioned_docs/version-v5/native/clipboard.md | 111 ---- .../version-v5/native/cloud-settings.md | 110 ---- versioned_docs/version-v5/native/code-push.md | 106 ---- .../version-v5/native/custom-uisdk.md | 98 ---- versioned_docs/version-v5/native/deeplinks.md | 139 ----- .../version-v5/native/device-accounts.md | 100 ---- .../version-v5/native/device-motion.md | 118 ---- .../version-v5/native/device-orientation.md | 125 ----- versioned_docs/version-v5/native/device.md | 101 ---- .../version-v5/native/dfu-update.md | 108 ---- .../version-v5/native/diagnostic.md | 115 ---- versioned_docs/version-v5/native/dialogs.md | 107 ---- versioned_docs/version-v5/native/dns.md | 102 ---- .../version-v5/native/document-picker.md | 104 ---- .../version-v5/native/document-scanner.md | 109 ---- .../version-v5/native/document-viewer.md | 112 ---- .../version-v5/native/email-composer.md | 157 ------ versioned_docs/version-v5/native/fabric.md | 102 ---- versioned_docs/version-v5/native/facebook.md | 176 ------ versioned_docs/version-v5/native/fcm.md | 137 ----- .../version-v5/native/file-opener.md | 107 ---- versioned_docs/version-v5/native/file-path.md | 100 ---- .../version-v5/native/file-transfer.md | 146 ----- versioned_docs/version-v5/native/file.md | 107 ---- .../version-v5/native/firebase-analytics.md | 130 ----- .../native/firebase-authentication.md | 111 ---- .../version-v5/native/firebase-config.md | 109 ---- .../version-v5/native/firebase-crash.md | 107 ---- .../version-v5/native/firebase-crashlytics.md | 109 ---- .../native/firebase-dynamic-links.md | 126 ----- .../version-v5/native/firebase-messaging.md | 109 ---- .../version-v5/native/firebase-vision.md | 117 ---- .../version-v5/native/firebase-x.md | 109 ---- versioned_docs/version-v5/native/firebase.md | 111 ---- .../version-v5/native/flashlight.md | 107 ---- .../version-v5/native/foreground-service.md | 126 ----- versioned_docs/version-v5/native/ftp.md | 103 ---- .../version-v5/native/gao-de-location.md | 140 ----- .../version-v5/native/ge-tui-sdk-plugin.md | 114 ---- .../version-v5/native/geolocation.md | 127 ----- .../version-v5/native/globalization.md | 107 ---- .../version-v5/native/google-analytics.md | 115 ---- .../version-v5/native/google-nearby.md | 107 ---- .../version-v5/native/google-plus.md | 104 ---- .../version-v5/native/health-kit.md | 97 ---- versioned_docs/version-v5/native/health.md | 115 ---- versioned_docs/version-v5/native/http.md | 124 ---- .../version-v5/native/iamport-cordova.md | 103 ---- versioned_docs/version-v5/native/ibeacon.md | 130 ----- .../version-v5/native/image-picker.md | 108 ---- versioned_docs/version-v5/native/imap.md | 210 ------- .../version-v5/native/in-app-browser.md | 114 ---- .../version-v5/native/in-app-purchase-2.md | 427 -------------- .../version-v5/native/in-app-review.md | 104 ---- versioned_docs/version-v5/native/insomnia.md | 117 ---- versioned_docs/version-v5/native/instagram.md | 101 ---- versioned_docs/version-v5/native/intercom.md | 103 ---- .../version-v5/native/ionic-webview.md | 113 ---- .../ios-aswebauthenticationsession-api.md | 109 ---- versioned_docs/version-v5/native/is-debug.md | 102 ---- versioned_docs/version-v5/native/keyboard.md | 112 ---- versioned_docs/version-v5/native/keychain.md | 111 ---- .../version-v5/native/kommunicate.md | 122 ---- .../version-v5/native/launch-navigator.md | 113 ---- .../version-v5/native/launch-review.md | 107 ---- .../version-v5/native/line-login.md | 105 ---- .../version-v5/native/local-notifications.md | 139 ----- .../version-v5/native/location-accuracy.md | 116 ---- .../version-v5/native/lottie-splash-screen.md | 110 ---- .../version-v5/native/media-capture.md | 110 ---- versioned_docs/version-v5/native/media.md | 178 ------ versioned_docs/version-v5/native/metrix.md | 102 ---- versioned_docs/version-v5/native/mixpanel.md | 107 ---- .../version-v5/native/mlkit-translate.md | 110 ---- .../version-v5/native/mobile-messaging.md | 128 ----- .../native/multiple-document-picker.md | 111 ---- .../version-v5/native/music-controls.md | 208 ------- .../version-v5/native/native-audio.md | 119 ---- .../version-v5/native/native-geocoder.md | 115 ---- .../version-v5/native/native-keyboard.md | 105 ---- .../native/native-page-transitions.md | 136 ----- .../version-v5/native/native-storage.md | 118 ---- .../version-v5/native/network-interface.md | 118 ---- versioned_docs/version-v5/native/network.md | 132 ----- versioned_docs/version-v5/native/nfc.md | 126 ----- versioned_docs/version-v5/native/ocr.md | 110 ---- versioned_docs/version-v5/native/onesignal.md | 182 ------ .../version-v5/native/open-native-settings.md | 175 ------ versioned_docs/version-v5/native/openalpr.md | 107 ---- .../version-v5/native/pdf-generator.md | 99 ---- .../version-v5/native/photo-library.md | 120 ---- .../version-v5/native/photo-viewer.md | 102 ---- versioned_docs/version-v5/native/printer.md | 108 ---- .../version-v5/native/pspdfkit-cordova.md | 114 ---- versioned_docs/version-v5/native/purchases.md | 135 ----- versioned_docs/version-v5/native/push.md | 161 ------ .../version-v5/native/pushape-push.md | 108 ---- .../native/safari-view-controller.md | 131 ----- .../version-v5/native/screen-orientation.md | 123 ---- .../version-v5/native/service-discovery.md | 108 ---- versioned_docs/version-v5/native/shake.md | 101 ---- .../version-v5/native/sign-in-with-apple.md | 125 ----- versioned_docs/version-v5/native/smartlook.md | 107 ---- .../version-v5/native/sms-retriever.md | 111 ---- versioned_docs/version-v5/native/sms.md | 103 ---- .../version-v5/native/social-sharing.md | 123 ---- .../version-v5/native/speech-recognition.md | 137 ----- .../version-v5/native/spinner-dialog.md | 110 ---- .../version-v5/native/splash-screen.md | 108 ---- .../version-v5/native/spotify-auth.md | 122 ---- .../version-v5/native/sqlite-db-copy.md | 103 ---- .../version-v5/native/sqlite-porter.md | 127 ----- versioned_docs/version-v5/native/sqlite.md | 117 ---- versioned_docs/version-v5/native/star-prnt.md | 103 ---- .../version-v5/native/status-bar.md | 111 ---- .../version-v5/native/streaming-media.md | 112 ---- versioned_docs/version-v5/native/stripe.md | 111 ---- versioned_docs/version-v5/native/sum-up.md | 132 ----- .../version-v5/native/taptic-engine.md | 109 ---- .../version-v5/native/tealium-adidentifier.md | 104 ---- .../native/tealium-installreferrer.md | 104 ---- versioned_docs/version-v5/native/tealium.md | 113 ---- .../version-v5/native/theme-detection.md | 115 ---- .../version-v5/native/three-dee-touch.md | 152 ----- versioned_docs/version-v5/native/toast.md | 107 ---- versioned_docs/version-v5/native/touch-id.md | 127 ----- .../version-v5/native/unvired-cordova-sdk.md | 220 -------- versioned_docs/version-v5/native/uptime.md | 101 ---- .../version-v5/native/urbanairship.md | 103 ---- .../version-v5/native/usabilla-cordova-sdk.md | 112 ---- versioned_docs/version-v5/native/vibes.md | 114 ---- versioned_docs/version-v5/native/vibration.md | 111 ---- .../version-v5/native/video-editor.md | 107 ---- .../version-v5/native/video-player.md | 107 ---- .../version-v5/native/web-intent.md | 112 ---- .../version-v5/native/web-server.md | 115 ---- .../version-v5/native/web-socket-server.md | 122 ---- versioned_docs/version-v5/native/webengage.md | 99 ---- versioned_docs/version-v5/native/wechat.md | 103 ---- .../version-v5/native/wheel-selector.md | 195 ------- .../version-v5/native/wifi-wizard-2.md | 531 ------------------ .../version-v5/native/wonderpush.md | 143 ----- .../version-v5/native/youtube-video-player.md | 110 ---- versioned_docs/version-v5/native/zbar.md | 112 ---- versioned_docs/version-v5/native/zeroconf.md | 116 ---- versioned_docs/version-v5/native/zoom.md | 158 ------ versioned_docs/version-v6/native-faq.md | 25 - versioned_docs/version-v6/native-setup.md | 146 ----- versioned_docs/version-v6/native.md | 36 -- versioned_docs/version-v6/native/.gitignore | 2 - versioned_sidebars/version-v5-sidebars.json | 37 -- versioned_sidebars/version-v6-sidebars.json | 34 -- 209 files changed, 53 insertions(+), 24221 deletions(-) rename docs/native-faq.md => native/faq.md (98%) rename docs/native.md => native/index.md (98%) rename {docs/native => native/plugins}/.gitignore (100%) rename docs/native-setup.md => native/setup.md (99%) create mode 100644 sidebars-native.js delete mode 100644 versioned_docs/version-v5/native-community.md delete mode 100644 versioned_docs/version-v5/native-faq.md delete mode 100644 versioned_docs/version-v5/native.md delete mode 100644 versioned_docs/version-v5/native/abbyy-rtr.md delete mode 100644 versioned_docs/version-v5/native/action-sheet.md delete mode 100644 versioned_docs/version-v5/native/adjust.md delete mode 100644 versioned_docs/version-v5/native/admob-plus.md delete mode 100644 versioned_docs/version-v5/native/admob.md delete mode 100644 versioned_docs/version-v5/native/aes-256.md delete mode 100644 versioned_docs/version-v5/native/all-in-one-sdk.md delete mode 100644 versioned_docs/version-v5/native/analytics-firebase.md delete mode 100644 versioned_docs/version-v5/native/android-exoplayer.md delete mode 100644 versioned_docs/version-v5/native/android-full-screen.md delete mode 100644 versioned_docs/version-v5/native/android-notch.md delete mode 100644 versioned_docs/version-v5/native/android-permissions.md delete mode 100644 versioned_docs/version-v5/native/anyline.md delete mode 100644 versioned_docs/version-v5/native/app-availability.md delete mode 100644 versioned_docs/version-v5/native/app-center-analytics.md delete mode 100644 versioned_docs/version-v5/native/app-center-crashes.md delete mode 100644 versioned_docs/version-v5/native/app-center-push.md delete mode 100644 versioned_docs/version-v5/native/app-preferences.md delete mode 100644 versioned_docs/version-v5/native/app-rate.md delete mode 100644 versioned_docs/version-v5/native/app-version.md delete mode 100644 versioned_docs/version-v5/native/apple-wallet.md delete mode 100644 versioned_docs/version-v5/native/appsflyer.md delete mode 100644 versioned_docs/version-v5/native/background-fetch.md delete mode 100644 versioned_docs/version-v5/native/background-geolocation.md delete mode 100644 versioned_docs/version-v5/native/background-mode.md delete mode 100644 versioned_docs/version-v5/native/background-upload.md delete mode 100644 versioned_docs/version-v5/native/badge.md delete mode 100644 versioned_docs/version-v5/native/barcode-scanner.md delete mode 100644 versioned_docs/version-v5/native/battery-status.md delete mode 100644 versioned_docs/version-v5/native/biocatch.md delete mode 100644 versioned_docs/version-v5/native/biometric-wrapper.md delete mode 100644 versioned_docs/version-v5/native/ble.md delete mode 100644 versioned_docs/version-v5/native/blinkid.md delete mode 100644 versioned_docs/version-v5/native/bluetooth-le.md delete mode 100644 versioned_docs/version-v5/native/bluetooth-serial.md delete mode 100644 versioned_docs/version-v5/native/branch-io.md delete mode 100644 versioned_docs/version-v5/native/broadcaster.md delete mode 100644 versioned_docs/version-v5/native/build-info.md delete mode 100644 versioned_docs/version-v5/native/calendar.md delete mode 100644 versioned_docs/version-v5/native/call-directory.md delete mode 100644 versioned_docs/version-v5/native/call-number.md delete mode 100644 versioned_docs/version-v5/native/camera-preview.md delete mode 100644 versioned_docs/version-v5/native/camera.md delete mode 100644 versioned_docs/version-v5/native/chooser.md delete mode 100644 versioned_docs/version-v5/native/clevertap.md delete mode 100644 versioned_docs/version-v5/native/clipboard.md delete mode 100644 versioned_docs/version-v5/native/cloud-settings.md delete mode 100644 versioned_docs/version-v5/native/code-push.md delete mode 100644 versioned_docs/version-v5/native/custom-uisdk.md delete mode 100644 versioned_docs/version-v5/native/deeplinks.md delete mode 100644 versioned_docs/version-v5/native/device-accounts.md delete mode 100644 versioned_docs/version-v5/native/device-motion.md delete mode 100644 versioned_docs/version-v5/native/device-orientation.md delete mode 100644 versioned_docs/version-v5/native/device.md delete mode 100644 versioned_docs/version-v5/native/dfu-update.md delete mode 100644 versioned_docs/version-v5/native/diagnostic.md delete mode 100644 versioned_docs/version-v5/native/dialogs.md delete mode 100644 versioned_docs/version-v5/native/dns.md delete mode 100644 versioned_docs/version-v5/native/document-picker.md delete mode 100644 versioned_docs/version-v5/native/document-scanner.md delete mode 100644 versioned_docs/version-v5/native/document-viewer.md delete mode 100644 versioned_docs/version-v5/native/email-composer.md delete mode 100644 versioned_docs/version-v5/native/fabric.md delete mode 100644 versioned_docs/version-v5/native/facebook.md delete mode 100644 versioned_docs/version-v5/native/fcm.md delete mode 100644 versioned_docs/version-v5/native/file-opener.md delete mode 100644 versioned_docs/version-v5/native/file-path.md delete mode 100644 versioned_docs/version-v5/native/file-transfer.md delete mode 100644 versioned_docs/version-v5/native/file.md delete mode 100644 versioned_docs/version-v5/native/firebase-analytics.md delete mode 100644 versioned_docs/version-v5/native/firebase-authentication.md delete mode 100644 versioned_docs/version-v5/native/firebase-config.md delete mode 100644 versioned_docs/version-v5/native/firebase-crash.md delete mode 100644 versioned_docs/version-v5/native/firebase-crashlytics.md delete mode 100644 versioned_docs/version-v5/native/firebase-dynamic-links.md delete mode 100644 versioned_docs/version-v5/native/firebase-messaging.md delete mode 100644 versioned_docs/version-v5/native/firebase-vision.md delete mode 100644 versioned_docs/version-v5/native/firebase-x.md delete mode 100644 versioned_docs/version-v5/native/firebase.md delete mode 100644 versioned_docs/version-v5/native/flashlight.md delete mode 100644 versioned_docs/version-v5/native/foreground-service.md delete mode 100644 versioned_docs/version-v5/native/ftp.md delete mode 100644 versioned_docs/version-v5/native/gao-de-location.md delete mode 100644 versioned_docs/version-v5/native/ge-tui-sdk-plugin.md delete mode 100644 versioned_docs/version-v5/native/geolocation.md delete mode 100644 versioned_docs/version-v5/native/globalization.md delete mode 100644 versioned_docs/version-v5/native/google-analytics.md delete mode 100644 versioned_docs/version-v5/native/google-nearby.md delete mode 100644 versioned_docs/version-v5/native/google-plus.md delete mode 100644 versioned_docs/version-v5/native/health-kit.md delete mode 100644 versioned_docs/version-v5/native/health.md delete mode 100644 versioned_docs/version-v5/native/http.md delete mode 100644 versioned_docs/version-v5/native/iamport-cordova.md delete mode 100644 versioned_docs/version-v5/native/ibeacon.md delete mode 100644 versioned_docs/version-v5/native/image-picker.md delete mode 100644 versioned_docs/version-v5/native/imap.md delete mode 100644 versioned_docs/version-v5/native/in-app-browser.md delete mode 100644 versioned_docs/version-v5/native/in-app-purchase-2.md delete mode 100644 versioned_docs/version-v5/native/in-app-review.md delete mode 100644 versioned_docs/version-v5/native/insomnia.md delete mode 100644 versioned_docs/version-v5/native/instagram.md delete mode 100644 versioned_docs/version-v5/native/intercom.md delete mode 100644 versioned_docs/version-v5/native/ionic-webview.md delete mode 100644 versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md delete mode 100644 versioned_docs/version-v5/native/is-debug.md delete mode 100644 versioned_docs/version-v5/native/keyboard.md delete mode 100644 versioned_docs/version-v5/native/keychain.md delete mode 100644 versioned_docs/version-v5/native/kommunicate.md delete mode 100644 versioned_docs/version-v5/native/launch-navigator.md delete mode 100644 versioned_docs/version-v5/native/launch-review.md delete mode 100644 versioned_docs/version-v5/native/line-login.md delete mode 100644 versioned_docs/version-v5/native/local-notifications.md delete mode 100644 versioned_docs/version-v5/native/location-accuracy.md delete mode 100644 versioned_docs/version-v5/native/lottie-splash-screen.md delete mode 100644 versioned_docs/version-v5/native/media-capture.md delete mode 100644 versioned_docs/version-v5/native/media.md delete mode 100644 versioned_docs/version-v5/native/metrix.md delete mode 100644 versioned_docs/version-v5/native/mixpanel.md delete mode 100644 versioned_docs/version-v5/native/mlkit-translate.md delete mode 100644 versioned_docs/version-v5/native/mobile-messaging.md delete mode 100644 versioned_docs/version-v5/native/multiple-document-picker.md delete mode 100644 versioned_docs/version-v5/native/music-controls.md delete mode 100644 versioned_docs/version-v5/native/native-audio.md delete mode 100644 versioned_docs/version-v5/native/native-geocoder.md delete mode 100644 versioned_docs/version-v5/native/native-keyboard.md delete mode 100644 versioned_docs/version-v5/native/native-page-transitions.md delete mode 100644 versioned_docs/version-v5/native/native-storage.md delete mode 100644 versioned_docs/version-v5/native/network-interface.md delete mode 100644 versioned_docs/version-v5/native/network.md delete mode 100644 versioned_docs/version-v5/native/nfc.md delete mode 100644 versioned_docs/version-v5/native/ocr.md delete mode 100644 versioned_docs/version-v5/native/onesignal.md delete mode 100644 versioned_docs/version-v5/native/open-native-settings.md delete mode 100644 versioned_docs/version-v5/native/openalpr.md delete mode 100644 versioned_docs/version-v5/native/pdf-generator.md delete mode 100644 versioned_docs/version-v5/native/photo-library.md delete mode 100644 versioned_docs/version-v5/native/photo-viewer.md delete mode 100644 versioned_docs/version-v5/native/printer.md delete mode 100644 versioned_docs/version-v5/native/pspdfkit-cordova.md delete mode 100644 versioned_docs/version-v5/native/purchases.md delete mode 100644 versioned_docs/version-v5/native/push.md delete mode 100644 versioned_docs/version-v5/native/pushape-push.md delete mode 100644 versioned_docs/version-v5/native/safari-view-controller.md delete mode 100644 versioned_docs/version-v5/native/screen-orientation.md delete mode 100644 versioned_docs/version-v5/native/service-discovery.md delete mode 100644 versioned_docs/version-v5/native/shake.md delete mode 100644 versioned_docs/version-v5/native/sign-in-with-apple.md delete mode 100644 versioned_docs/version-v5/native/smartlook.md delete mode 100644 versioned_docs/version-v5/native/sms-retriever.md delete mode 100644 versioned_docs/version-v5/native/sms.md delete mode 100644 versioned_docs/version-v5/native/social-sharing.md delete mode 100644 versioned_docs/version-v5/native/speech-recognition.md delete mode 100644 versioned_docs/version-v5/native/spinner-dialog.md delete mode 100644 versioned_docs/version-v5/native/splash-screen.md delete mode 100644 versioned_docs/version-v5/native/spotify-auth.md delete mode 100644 versioned_docs/version-v5/native/sqlite-db-copy.md delete mode 100644 versioned_docs/version-v5/native/sqlite-porter.md delete mode 100644 versioned_docs/version-v5/native/sqlite.md delete mode 100644 versioned_docs/version-v5/native/star-prnt.md delete mode 100644 versioned_docs/version-v5/native/status-bar.md delete mode 100644 versioned_docs/version-v5/native/streaming-media.md delete mode 100644 versioned_docs/version-v5/native/stripe.md delete mode 100644 versioned_docs/version-v5/native/sum-up.md delete mode 100644 versioned_docs/version-v5/native/taptic-engine.md delete mode 100644 versioned_docs/version-v5/native/tealium-adidentifier.md delete mode 100644 versioned_docs/version-v5/native/tealium-installreferrer.md delete mode 100644 versioned_docs/version-v5/native/tealium.md delete mode 100644 versioned_docs/version-v5/native/theme-detection.md delete mode 100644 versioned_docs/version-v5/native/three-dee-touch.md delete mode 100644 versioned_docs/version-v5/native/toast.md delete mode 100644 versioned_docs/version-v5/native/touch-id.md delete mode 100644 versioned_docs/version-v5/native/unvired-cordova-sdk.md delete mode 100644 versioned_docs/version-v5/native/uptime.md delete mode 100644 versioned_docs/version-v5/native/urbanairship.md delete mode 100644 versioned_docs/version-v5/native/usabilla-cordova-sdk.md delete mode 100644 versioned_docs/version-v5/native/vibes.md delete mode 100644 versioned_docs/version-v5/native/vibration.md delete mode 100644 versioned_docs/version-v5/native/video-editor.md delete mode 100644 versioned_docs/version-v5/native/video-player.md delete mode 100644 versioned_docs/version-v5/native/web-intent.md delete mode 100644 versioned_docs/version-v5/native/web-server.md delete mode 100644 versioned_docs/version-v5/native/web-socket-server.md delete mode 100644 versioned_docs/version-v5/native/webengage.md delete mode 100644 versioned_docs/version-v5/native/wechat.md delete mode 100644 versioned_docs/version-v5/native/wheel-selector.md delete mode 100644 versioned_docs/version-v5/native/wifi-wizard-2.md delete mode 100644 versioned_docs/version-v5/native/wonderpush.md delete mode 100644 versioned_docs/version-v5/native/youtube-video-player.md delete mode 100644 versioned_docs/version-v5/native/zbar.md delete mode 100644 versioned_docs/version-v5/native/zeroconf.md delete mode 100644 versioned_docs/version-v5/native/zoom.md delete mode 100644 versioned_docs/version-v6/native-faq.md delete mode 100644 versioned_docs/version-v6/native-setup.md delete mode 100644 versioned_docs/version-v6/native.md delete mode 100644 versioned_docs/version-v6/native/.gitignore diff --git a/crowdin.yml b/crowdin.yml index 4b1c07d48aa..c228fc16da1 100644 --- a/crowdin.yml +++ b/crowdin.yml @@ -10,7 +10,10 @@ files: ignore: - /docs/api/**/* - /docs/cli/commands/**/* - - /docs/native/**/* + - source: /native/**/* + translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% + ignore: + - /docs/native/plugins/**/* - source: /cli/**/* translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% ignore: diff --git a/docusaurus.config.js b/docusaurus.config.js index b6866a3dbb5..41fb8e9bae9 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -91,8 +91,7 @@ module.exports = { position: 'left' }, { - type: 'doc', - docId: 'native', + to: 'native', label: 'Native', position: 'left', }, @@ -268,9 +267,6 @@ module.exports = { if ((match = docPath.match(/api\/(.*)\.md/)) != null) { return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.md`; } - if ((match = docPath.match(/native\/(.*)\.md/)) != null) { - return `https://github.com/ionic-team/capacitor-plugins/edit/main/${match[1]}/README.md`; - } return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`; }, exclude: ['README.md'], @@ -282,6 +278,24 @@ module.exports = { }, }, ], + [ + '@docusaurus/plugin-content-docs', + { + id: 'native', + path: 'native', + routeBasePath: 'native', + sidebarPath: require.resolve('./sidebars-native.js'), + editUrl: ({ versionDocsDirPath, docPath, locale }) => { + if (locale != 'en') { + return 'https://crowdin.com/project/ionic-docs'; + } + if ((match = docPath.match(/native\/(.*)\.md/)) != null) { + return `https://github.com/ionic-team/capacitor-plugins/edit/main/${match[1]}/README.md`; + } + return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`; + }, + } + ], [ '@docusaurus/plugin-content-docs', { diff --git a/docs/native-faq.md b/native/faq.md similarity index 98% rename from docs/native-faq.md rename to native/faq.md index ceaf06b6d38..23d637bf205 100644 --- a/docs/native-faq.md +++ b/native/faq.md @@ -1,6 +1,5 @@ --- sidebar_label: FAQ -slug: /native/faq --- # Frequently Asked Question diff --git a/docs/native.md b/native/index.md similarity index 98% rename from docs/native.md rename to native/index.md index c863908c42f..7e36e3e2ea4 100644 --- a/docs/native.md +++ b/native/index.md @@ -1,6 +1,7 @@ --- title: Capacitor hide_table_of_contents: true +slug: / --- import DocsCard from '@components/global/DocsCard'; @@ -33,4 +34,4 @@ While the core features of Capacitor are free and open source, some enterprises -> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) +> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) \ No newline at end of file diff --git a/docs/native/.gitignore b/native/plugins/.gitignore similarity index 100% rename from docs/native/.gitignore rename to native/plugins/.gitignore diff --git a/docs/native-setup.md b/native/setup.md similarity index 99% rename from docs/native-setup.md rename to native/setup.md index 30a8ac5c0fc..ac3c2a9dca6 100644 --- a/docs/native-setup.md +++ b/native/setup.md @@ -2,7 +2,6 @@ title: Capacitor Plugins sidebar_label: Setup hide_table_of_contents: true -slug: /native/setup --- import Tabs from '@theme/Tabs'; @@ -143,4 +142,4 @@ export function CameraComponent() { -```` +```` \ No newline at end of file diff --git a/scripts/native.js b/scripts/native.js index ddd0fa68674..64caff7fa01 100644 --- a/scripts/native.js +++ b/scripts/native.js @@ -35,17 +35,8 @@ async function buildPluginApiDocs(pluginId) { const [readme, pkgJson] = await Promise.all([getReadme(pluginId), getPkgJsonData(pluginId)]); const apiContent = createApiPage(pluginId, readme, pkgJson); - const fileName = `${pluginId}.md`; - // Delete all existing generated markdown files in docs/native - fs.readdirSync('docs/native').forEach((file) => { - if (file.endsWith('.md')) { - fs.rmSync(`docs/native/${file}`); - } - }); - - fs.writeFileSync(`docs/native/${fileName}`, apiContent); - fs.writeFileSync(`versioned_docs/version-v6/native/${fileName}`, apiContent); + fs.writeFileSync(`native/plugins/${pluginId}.md`, apiContent); } function createApiPage(pluginId, readme, pkgJson) { @@ -65,6 +56,7 @@ description: ${desc} editUrl: ${editUrl} editApiUrl: ${editApiUrl} sidebar_label: ${sidebarLabel} +slug: /${pluginId} --- ${readme}`.trim(); } diff --git a/sidebars-native.js b/sidebars-native.js new file mode 100644 index 00000000000..b94ede55dc3 --- /dev/null +++ b/sidebars-native.js @@ -0,0 +1,25 @@ +module.exports = { + native: [ + { + type: 'category', + label: 'Getting Started', + collapsed: false, + items: [ + 'index', + 'setup', + 'faq', + ], + }, + { + type: 'category', + label: 'Plugins', + collapsed: false, + items: [ + { + type: 'autogenerated', + dirName: 'plugins', // Generate section automatically based on files + }, + ], + }, + ], +} diff --git a/sidebars.js b/sidebars.js index 04ffbd30e3d..b1bb34bd6de 100644 --- a/sidebars.js +++ b/sidebars.js @@ -484,28 +484,4 @@ module.exports = { items: ['api'], }, ], - - native: [ - { - type: 'category', - label: 'Getting Started', - collapsed: false, - items: [ - 'native', - 'native-setup', - 'native-faq', - ], - }, - { - type: 'category', - label: 'Plugins', - collapsed: false, - items: [ - { - type: 'autogenerated', - dirName: 'native', // Generate section automatically based on files - }, - ], - }, - ], }; diff --git a/versioned_docs/version-v5/native-community.md b/versioned_docs/version-v5/native-community.md deleted file mode 100644 index cd8773d8bba..00000000000 --- a/versioned_docs/version-v5/native-community.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: 'Cordova Plugins | Cordova Community Core Plugins for Ionic Apps' -description: 'For the Cordova user community, our collection of TypeScript wrappers for open source Cordova core plugins easily add native functionality to any Ionic app.' -sidebar_label: Setup -hide_table_of_contents: true -slug: /native/community ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -# Cordova Community Plugins - -[Apache Cordova](https://cordova.apache.org/) is an open source native runtime that allows developers to build native mobile apps with HTML, CSS, and JavaScript. Similar to [Capacitor](https://capacitorjs.com/), Ionic’s own native runtime, Cordova allows developers to access native device features, such as camera, keyboard, and geolocation, using a system of plugins. A plugin is a small amount of add-on code that provides JavaScript interface to native components. They allow your app to use native device capabilities beyond what is available to pure web apps. - -For developers using Ionic with Cordova, our team has developed a collection of TypeScript wrappers for open source Cordova plugins that make it easy to add native functionality to any Ionic app. See [Ionic Native](https://github.com/ionic-team/ionic-native). - -These plugins are submitted and maintained by the Ionic community. While community members are generally quick to find and fix issues, certain plugins may not function properly. - -For professional developers and teams that require dedicated native plugin support & SLAs, ongoing maintenance, and security patches, please explore our [premium options](https://ionicframework.com/native), including plugin support and pre-built solutions for common native use cases. - - - -:::note -These docs are for apps built with Ionic Framework 4.0.0 and greater. For older Ionic v3 projects, please [see here](https://ionicframework.com/docs/v3/native). -::: - -## Capacitor Support - -In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitorjs.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins). - -## Usage - -All plugins have two components - the native code (Cordova) and the TypeScript code (Ionic Native). -Cordova plugins are also wrapped in a `Promise` or `Observable` in order to provide a common plugin interface and modernized development approach. - -Using the [Camera plugin](native/camera.md) as an example, first install it: - -````mdx-code-block - - - -```shell -// Install Cordova plugin -$ ionic cordova plugin add cordova-plugin-camera - -// Install Ionic Native TypeScript wrapper -$ npm install @awesome-cordova-plugins/camera - -// Install Ionic Native core library (once per project) -$ npm install @awesome-cordova-plugins/core -``` - - - - -For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins). - -```shell -// Install Ionic Native TypeScript wrapper -$ npm install @awesome-cordova-plugins/camera - -// Install Cordova plugin -$ npm install cordova-plugin-camera - -// Update native platform project(s) to include newly added plugin -$ ionic cap sync -``` - - - -```` - -Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](native-faq.md). - -## Angular - -Angular apps can use either Cordova or Capacitor to build native mobile apps. Import the plugin in a `@NgModule` and add it to the list of Providers. For Angular, the import path should end with `/ngx`. Angular's change detection is automatically handled. - -```tsx -// app.module.ts -import { Camera } from '@awesome-cordova-plugins/camera/ngx'; - -... - -@NgModule({ - ... - - providers: [ - ... - Camera - ... - ] - ... -}) -export class AppModule { } -``` - -After the plugin has been declared, it can be imported and injected like any other service: - -```tsx -// camera.service.ts -import { Injectable } from '@angular/core'; -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; - -@Injectable({ - providedIn: 'root', -}) -export class PhotoService { - constructor(private camera: Camera) {} - - takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE, - }; - - this.camera.getPicture(options).then( - (imageData) => { - // Do something with the new photo - }, - (err) => { - // Handle error - console.log('Camera issue: ' + err); - } - ); - } -} -``` - -## React - -React apps must use Capacitor to build native mobile apps. However, Ionic Native (and therefore, Cordova plugins) can still be used. - -```shell-session -// Install Core library (once per project) -$ npm install @awesome-cordova-plugins/core - -// Install Ionic Native TypeScript wrapper -$ npm install @awesome-cordova-plugins/barcode-scanner - -// Install Cordova plugin -$ npm install phonegap-plugin-barcodescanner - -// Update native platform project(s) to include newly added plugin -$ ionic cap sync -``` - -Import the plugin object then use its static methods: - -```tsx -import { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner'; - -const Tab1: React.FC = () => { - const openScanner = async () => { - const data = await BarcodeScanner.scan(); - console.log(`Barcode data: ${data.text}`); - }; - return ( - - - - Tab 1 - - - - Scan barcode - - - ); -}; -``` - -## Vanilla JavaScript - -Vanilla JavaScript apps, targeting ES2015+ and/or TypeScript, can use either Cordova or Capacitor to build native mobile apps. To use any plugin, import the class from the appropriate package and use its static methods: - -```js -import { Camera } from '@awesome-cordova-plugins/camera'; - -document.addEventListener('deviceready', () => { - Camera.getPicture() - .then((data) => console.log('Took a picture!', data)) - .catch((e) => console.log('Error occurred while taking a picture', e)); -}); -``` diff --git a/versioned_docs/version-v5/native-faq.md b/versioned_docs/version-v5/native-faq.md deleted file mode 100644 index 80cb5b1ae89..00000000000 --- a/versioned_docs/version-v5/native-faq.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -sidebar_label: FAQ -slug: /native/faq ---- - -# Ionic Native FAQ - -## Cordova Management Tips - -**1) Use the [Ionic CLI](cli.md) to add/update/delete plugins.** - -Instead of directly editing `config.xml` and `package.json`. Use `ionic` in front of Cordova commands for a better experience and additional functionality (`ionic cordova build ios` instead of `cordova build ios`). - -**2) Upgrade plugins by removing, then re-adding them.** - -```shell -$ ionic cordova plugin remove cordova-plugin-camera -$ ionic cordova plugin add cordova-plugin-camera -``` - -**3) Install explicit versions.** - -To ensure that the same version of a plugin is always installed via `npm install`, specify the version number: - -```shell -ionic cordova plugin add cordova-plugin-camera@4.3.2 -``` - -**4) Restore Cordova in an existing Ionic project** - -Useful when adding new developers to a project. `ionic cordova prepare` restores platforms and plugins from `package.json` and `config.xml`. The version to be installed is taken from `package.json` or `config.xml`, if found in those files. In case of conflicts, `package.json` is given precedence over `config.xml`. - -**5) Troubleshoot Cordova issues with Ionic CLI commands** - -- `ionic doctor list`: Detects [common issues](cli/commands/doctor-list.md) and suggests steps to fix them -- `ionic repair`: Remove, then [regenerate](cli/commands/repair.md) all dependencies - -## Understanding Version Numbers - -For any given Ionic Native plugin, the Ionic Native (TypeScript code) and Cordova (native code) version numbers will not match. The Ionic Native version number is found in `package.json`: - -```json -"@awesome-cordova-plugins/camera": "^5.3.0", -``` - -The Cordova plugin version number is found in both `package.json` and `config.xml`: - -```json -"cordova-plugin-camera": "4.0.3", -``` - -```xml - -``` - -When checking for new native functionality or bug fixes, look for new versions on the Cordova plugin GitHub page itself (here's the [Camera one](https://github.com/apache/cordova-plugin-camera), for example). - -To check for new Ionic Native releases (may include exposing methods recently added by the Cordova plugin, etc.), see [here](https://github.com/ionic-team/ionic-native/releases). - -## Troubleshooting Failed Builds - -Research the build error(s) by checking out these resources: - -- Google & [StackOverflow](https://stackoverflow.com): Many issues are documented online -- Ask the [Ionic Community Ionic Forum](https://forum.ionicframework.com) (see the Ionic Native category) -- See the Ionic Customer Success [Knowledge Base](https://ionic.zendesk.com) - -### Cordova Plugin Conflicts - -Plugins can conflict with each other when they share the same underlying native dependencies or when more than one plugin tries to access the same native code at once. For example, common libraries like the Google Play Services version (Google Maps is using GPS v24.2 but Firebase wants GPS v27.1). Keeping these plugins updated regularly can help with this. - -Another tip is to ensure that your app uses only one plugin per specific feature/functionality (example: Push Notifications). - -## Recommended Upgrade Strategy - -The most Ionic stable apps are routinely updated, especially at the native layer. Keeping native plugins up to date ensures your project has the latest security fixes, new features, and improved performance. - -Update your project's plugins one at a time, ideally in separate code branches. This reduces the surface area that issues can arise from - if you update everything in your project at once, it's sometimes hard to tell where the problem stems from. - -### When should I update? - -- When a new feature/bug is released: Run `npm outdated` to see a list of available updates. -- When new major versions are released: Official blogs, such as the [Cordova blog](https://cordova.apache.org/blog/) and [Ionic blog](https://ionicframework.com/blog/), will publish announcements and news. -- Evaluate the nature of the update: is it a shiny new feature or critical security fix? -- Timing: Where does it fit in against your team's project goals? diff --git a/versioned_docs/version-v5/native.md b/versioned_docs/version-v5/native.md deleted file mode 100644 index 33b13362d24..00000000000 --- a/versioned_docs/version-v5/native.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Native APIs -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard'; - - - Native APIs - Build Open-Source Native Application Experiences - - - - -Build native-powered app experiences with a collection of open source and premium plugins and integrations that make it easy to add native device functionality to any Ionic app with Capacitor or Cordova. - - - -:::note - -[Read about the changes](https://ionicframework.com/blog/a-new-chapter-for-ionic-native/) coming to the Ionic Native project. - -::: - - - -

- A modern, open source native runtime built and maintained by the Ionic team and the Capacitor community. Our - recommended native solution. -

- - -

- A collection of free Cordova plugins, built and maintained by the community, with TypeScript wrappers and a - consistent API and naming convention. -

- - - - - -:::note -These docs are for apps built with Ionic Framework 4.0.0 and greater. For older Ionic v3 projects, please [see here](https://ionicframework.com/docs/v3/native/). -::: diff --git a/versioned_docs/version-v5/native/abbyy-rtr.md b/versioned_docs/version-v5/native/abbyy-rtr.md deleted file mode 100644 index 087c66e3e72..00000000000 --- a/versioned_docs/version-v5/native/abbyy-rtr.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'ABBYY Real-Time Recognition' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# ABBYY Real-Time Recognition - -This plugin allows to use the Text Capture and Data Capture features of -ABBYY Real-Time Recognition SDK (RTR SDK) in apps. - -

- - - - {' '} - https://github.com/abbyysdk/RTR-SDK.Cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-abbyy-rtr-sdk {'\n'}$ npm install @awesome-cordova-plugins/abbyy-rtr {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-abbyy-rtr-sdk {'\n'}$ npm install @awesome-cordova-plugins/abbyy-rtr {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AbbyyRTR } from '@awesome-cordova-plugins/abbyy-rtr/ngx'; - - -constructor(private abbyyRTR: AbbyyRTR) { } - -... - - -this.abbyyRTR.startTextCapture(options) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - - -this.abbyyRTR.startDataCapture(options) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/action-sheet.md b/versioned_docs/version-v5/native/action-sheet.md deleted file mode 100644 index f4946f5dff0..00000000000 --- a/versioned_docs/version-v5/native/action-sheet.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -sidebar_label: 'Action Sheet' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Action Sheet - -The ActionSheet plugin shows a native list of options the user can choose from. - -Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see the [ActionSheet plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-actionsheet). - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-actionsheet - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-actionsheet {'\n'}$ npm install @awesome-cordova-plugins/action-sheet {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-actionsheet {'\n'}$ npm install @awesome-cordova-plugins/action-sheet {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ActionSheet, ActionSheetOptions } from '@awesome-cordova-plugins/action-sheet/ngx'; - -constructor(private actionSheet: ActionSheet) { } - -... - - -let buttonLabels = ['Share via Facebook', 'Share via Twitter']; - -const options: ActionSheetOptions = { - title: 'What do you want with this image?', - subtitle: 'Choose an action', - buttonLabels: buttonLabels, - addCancelButtonWithLabel: 'Cancel', - addDestructiveButtonWithLabel: 'Delete', - androidTheme: this.actionSheet.ANDROID_THEMES.THEME_HOLO_DARK, - destructiveButtonLast: true -} - -this.actionSheet.show(options).then((buttonIndex: number) => { - console.log('Button pressed: ' + buttonIndex); -}); -``` diff --git a/versioned_docs/version-v5/native/adjust.md b/versioned_docs/version-v5/native/adjust.md deleted file mode 100644 index b6bbda06c79..00000000000 --- a/versioned_docs/version-v5/native/adjust.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'Adjust' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Adjust - -This is the Ionic Cordova SDK of Adjust™. You can read more about Adjust™ at adjust.com. - -Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust Cordova SDK](https://github.com/adjust/cordova_sdk) - -

- - - - {' '} - https://github.com/adjust/cordova_sdk - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com.adjust.sdk {'\n'}$ npm install @awesome-cordova-plugins/adjust {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add com.adjust.sdk {'\n'}$ npm install @awesome-cordova-plugins/adjust {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx - import { Adjust, AdjustConfig, AdjustEnvironment } from '@awesome-cordova-plugins/adjust'; - - constructor(private adjust: Adjust) { } - - ... - - const config = new AdjustConfig('APP-TOKEN-HERE', AdjustEnvironment.Sandbox); - config.logLevel = AdjustLogLevel.Verbose; - // Set other config properties. - adjust.create(config); - -``` diff --git a/versioned_docs/version-v5/native/admob-plus.md b/versioned_docs/version-v5/native/admob-plus.md deleted file mode 100644 index a288da3f672..00000000000 --- a/versioned_docs/version-v5/native/admob-plus.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -sidebar_label: 'AdMob Plus' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# AdMob Plus - -AdMob Plus is the successor of cordova-plugin-admob-free, which provides a cleaner API and build with modern tools. - -

- - - - {' '} - https://github.com/admob-plus/admob-plus - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-admob-plus {'\n'}$ npm install @awesome-cordova-plugins/admob-plus {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-admob-plus {'\n'}$ npm install @awesome-cordova-plugins/admob-plus {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS diff --git a/versioned_docs/version-v5/native/admob.md b/versioned_docs/version-v5/native/admob.md deleted file mode 100644 index fd2a295760b..00000000000 --- a/versioned_docs/version-v5/native/admob.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -sidebar_label: 'AdMob' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# AdMob - -Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads. -Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily! - -**Supports:** - -- Banner ads (top and bottom) -- Interstitial ads -- Rewarded ads -- [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads - -

- - - - {' '} - https://github.com/appfeel/admob-google-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-admob {'\n'}$ npm install @awesome-cordova-plugins/admob {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-admob {'\n'}$ npm install @awesome-cordova-plugins/admob {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Browser - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -**Note:** No ads will be served on apps with package name `io.ionic.starter`. This is the default package name for new `ionic` apps. Make sure to rename the package name so ads can be displayed. - -```tsx -import { Admob, AdmobOptions } from '@awesome-cordova-plugins/admob'; - - -constructor(private admob: Admob) { - // Admob options config - const admobOptions: AdmobOptions = { - bannerAdId: 'XXX-XXXX-XXXX', - interstitialAdId: 'XXX-XXXX-XXXX', - rewardedAdId: 'XXX-XXXX-XXXX', - isTesting: true, - autoShowBanner: false, - autoShowInterstitial: false, - autoShowRewarded: false, - adSize: this.admob.AD_SIZE.BANNER - }; - - // Set admob options - this.admob.setOptions(admobOptions) - .then(() => console.log('Admob options have been successfully set')) - .catch(err => console.error('Error setting admob options:', err)); -} - - - -// (Optionally) Load banner ad, in order to have it ready to show -this.admob.createBannerView() - .then(() => console.log('Banner ad loaded')) - .catch(err => console.error('Error loading banner ad:', err)); - - -// Show banner ad (createBannerView must be called before and onAdLoaded() event raised) -this.admob.onAdLoaded().subscribe((ad) => { - if (ad.adType === this.admob.AD_TYPE.BANNER) { - this.admob.showBannerAd() - .then(() => console.log('Banner ad shown')) - .catch(err => console.error('Error showing banner ad:', err)); - } -}); - - -// Hide banner ad, but do not destroy it, so it can be shown later on -// See destroyBannerView in order to hide and destroy banner ad -this.admob.showBannerAd(false) - .then(() => console.log('Banner ad hidden')) - .catch(err => console.error('Error hiding banner ad:', err)); - - - -// Request an interstitial ad, in order to be shown later on -// It is possible to autoshow it via options parameter, see docs -this.admob.requestInterstitialAd() - .then(() => console.log('Interstitial ad loaded')) - .catch(err => console.error('Error loading interstitial ad:', err)); - - -// Show an interstitial ad (requestInterstitialAd must be called before) -this.admob.onAdLoaded().subscribe((ad) => { - if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) { - this.admob.showInterstitialAd() - .then(() => console.log('Interstitial ad shown')) - .catch(err => console.error('Error showing interstitial ad:', err)); - } -}); - - -// Request a rewarded ad -this.admob.requestRewardedAd() - .then(() => console.log('Rewarded ad loaded')) - .catch(err => console.error('Error loading rewarded ad:', err)); - - -// Show rewarded ad (requestRewardedAd must be called before) -this.admob.onAdLoaded().subscribe((ad) => { - if (ad.adType === this.admob.AD_TYPE.REWARDED) { - this.admob.showRewardedAd() - .then(() => console.log('Rewarded ad shown')) - .catch(err => console.error('Error showing rewarded ad:', err)); - } -}); - - -// Hide and destroy banner or interstitial ad -this.admob.destroyBannerView() - .then(() => console.log('Banner or interstitial ad destroyed')) - .catch(err => console.error('Error destroying banner or interstitial ad:', err)); - - - -// On Ad loaded event -this.admob.onAdLoaded().subscribe((ad) => { - if (ad.adType === this.admob.AD_TYPE.BANNER) { - console.log('Banner ad is loaded'); - this.admob.showBannerAd(); - } else if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) { - console.log('Interstitial ad is loaded'); - this.admob.showInterstitialAd(); - } else if (ad.adType === this.admob.AD_TYPE.REWARDED) { - console.log('Rewarded ad is loaded'); - this.admob.showRewardedAd(); - } -}); - - - -// On ad failed to load -this.admob.onAdFailedToLoad().subscribe(err => console.log('Error loading ad:', err)); - - - -// On interstitial ad opened -this.admob.onAdOpened().subscribe(() => console.log('Interstitial ad opened')); - - - -// On interstitial ad closed -this.admob.onAdClosed().subscribe(() => console.log('Interstitial ad closed')); - - - -// On ad clicked and left application -this.admob.onAdLeftApplication().subscribe(() => console.log('Ad lefted application')); - - - -// On user ad rewarded -this.admob.onRewardedAd().subscribe(() => console.log('The user has been rewarded')); - - - -// On rewarded ad video started -this.admob.onRewardedAdVideoStarted().subscribe(() => console.log('Rewarded ad vieo started')); - - - -// On rewarded ad video completed -this.admob.onRewardedAdVideoCompleted().subscribe(() => console.log('Rewarded ad video completed')); - -``` diff --git a/versioned_docs/version-v5/native/aes-256.md b/versioned_docs/version-v5/native/aes-256.md deleted file mode 100644 index 5ab37a3b1e6..00000000000 --- a/versioned_docs/version-v5/native/aes-256.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -sidebar_label: 'AES256' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# AES256 - -This cordova ionic plugin allows you to perform AES 256 encryption and decryption on the plain text. -It's a cross-platform plugin which supports both Android and iOS. -The encryption and decryption are performed on the device native layer so that the performance is much faster. - -

- - - - {' '} - https://github.com/Ideas2IT/cordova-aes256 - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-aes256-encryption {'\n'}$ npm install @awesome-cordova-plugins/aes-256 {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-aes256-encryption {'\n'}$ npm install @awesome-cordova-plugins/aes-256 {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AES256 } from '@awesome-cordova-plugins/aes-256/ngx'; - -private secureKey: string; -private secureIV: string; - -constructor(private aes256: AES256) { - this.generateSecureKeyAndIV(); // To generate the random secureKey and secureIV -} - -... - -async generateSecureKeyAndIV() { - this.secureKey = await this.aes256.generateSecureKey('random password 12345'); // Returns a 32 bytes string - this.secureIV = await this.aes256.generateSecureIV('random password 12345'); // Returns a 16 bytes string -} - -this.aes256.encrypt(this.secureKey, this.secureIV, 'testdata') - .then(res => console.log('Encrypted Data: ',res)) - .catch((error: any) => console.error(error)); - -this.aes256.decrypt(this.secureKey, this.secureIV, 'encryptedData') - .then(res => console.log('Decrypted Data : ',res)) - .catch((error: any) => console.error(error)); - - -* this.aes256.generateSecureKey('random password 12345') - .then(res => console.log('Secure Key : ',res)) - .catch((error: any) => console.error(error)); - - -* this.aes256.generateSecureIV('random password 12345') - .then(res => console.log('Secure IV : ',res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/all-in-one-sdk.md b/versioned_docs/version-v5/native/all-in-one-sdk.md deleted file mode 100644 index f11facc83d0..00000000000 --- a/versioned_docs/version-v5/native/all-in-one-sdk.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -sidebar_label: 'AllInOneSDK' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# AllInOneSDK - -Paytm All-in-One SDK plugin for Cordova/Ionic Applications -Paytm All-in-One SDK provides a swift, secure and seamless payment experience to your users by invoking the Paytm app (if installed on your user’s smartphone) to complete payment for your order. -Paytm All-in-One SDK enables payment acceptance via Paytm wallet, Paytm Payments Bank, saved Debit/Credit cards, Net Banking, BHIM UPI and EMI as available in your customer’s Paytm account. If Paytm app is not installed on a customer's device, the transaction will be processed via web view within the All-in-One SDK. -For more information about Paytm All-in-One SDK, please visit https://developer.paytm.com/docs/all-in-one-sdk/hybrid-apps/cordova/ - -

- - - - {' '} - https://github.com/paytm/paytm-allinonesdk-ionic-cordova.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-paytm-allinonesdk {'\n'}$ npm install @awesome-cordova-plugins/all-in-one-sdk {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-paytm-allinonesdk {'\n'}$ npm install @awesome-cordova-plugins/all-in-one-sdk {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AllInOneSDK } from '@awesome-cordova-plugins/all-in-one-sdk/ngx'; - - -constructor(private allInOneSDK: AllInOneSDK) { } - -... - -For below parameters see [documentation](https://developer.paytm.com/docs/all-in-one-sdk/hybrid-apps/cordova/) -let paymentIntent = { mid : merchantID, orderId: orderId, txnToken: transactionToken, amount: amount, isStaging: isStaging, callbackUrl:callBackURL, restrictAppInvoke:restrictAppInvoke } - -this.allInOneSDK.startTransaction(paymentIntent) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` - -For iOS: -After adding the plugin, open the iOS project, you can find the same at <projectName>/platforms/ios. -In case merchant don’t have callback URL, Add an entry into Info.plist LSApplicationQueriesSchemes(Array) Item 0 (String)-> paytm -Add a URL Scheme “paytm”+”MID” diff --git a/versioned_docs/version-v5/native/analytics-firebase.md b/versioned_docs/version-v5/native/analytics-firebase.md deleted file mode 100644 index 22a483020ce..00000000000 --- a/versioned_docs/version-v5/native/analytics-firebase.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -sidebar_label: 'Analytics Firebase' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Analytics Firebase - -Google Analytics Firebase plugin for Ionic Native apps. - -

- - - - {' '} - https://github.com/appfeel/analytics-google - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-analytics {'\n'}$ npm install @awesome-cordova-plugins/analytics-firebase {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-analytics {'\n'}$ npm install @awesome-cordova-plugins/analytics-firebase {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AnalyticsFirebase } from '@awesome-cordova-plugins/analytics-firebase'; - - -constructor(private analyticsFirebase: AnalyticsFirebase) { } - -// Track an event with default events and params -const eventParams = {}; -eventParams[this.analyticsFirebase.DEFAULT_PARAMS.LEVEL] = 29; -this.analyticsFirebase.logEvent(this.analyticsFirebase.DEFAULT_EVENTS.LEVEL_UP, eventParams) - .then(() => console.log('Event successfully tracked')) - .catch(err => console.log('Error tracking event:', err)); - -// Track an event with custom events and params -const eventParams = {}; -eventParams['my-prop'] = 29; -this.analyticsFirebase.logEvent('my-event', eventParams) - .then(() => console.log('Event successfully tracked')) - .catch(err => console.log('Error tracking event:', err)); - - -// Reset analytics data -this.analyticsFirebase.resetAnalyticsData() - .then(() => console.log('Analytics data have been reset')) - .catch(err => console.log('Error resetting analytics data:', err)); - - -// Track a screen view -this.analyticsFirebase.setCurrentScreen('Home') - .then(() => console.log('View successfully tracked')) - .catch(err => console.log('Error tracking view:', err)); - - -// Set user id -this.analyticsFirebase.setUserId('USER-ID') - .then(() => console.log('User id successfully set')) - .catch(err => console.log('Error setting user id:', err)); - - -// Set user property from default properties -this.analyticsFirebase.setUserProperty('KEY', 'VALUE') - .then(() => console.log('User property successfully set')) - .catch(err => console.log('Error setting user property:', err)); - -``` diff --git a/versioned_docs/version-v5/native/android-exoplayer.md b/versioned_docs/version-v5/native/android-exoplayer.md deleted file mode 100644 index 8d62a3a79a8..00000000000 --- a/versioned_docs/version-v5/native/android-exoplayer.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -sidebar_label: 'Android ExoPlayer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Android ExoPlayer - -Cordova media player plugin using Google's ExoPlayer framework. - -https://github.com/google/ExoPlayer - -

- - - - {' '} - https://github.com/frontyard/cordova-plugin-exoplayer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-exoplayer {'\n'}$ npm install @awesome-cordova-plugins/android-exoplayer {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-exoplayer {'\n'}$ npm install @awesome-cordova-plugins/android-exoplayer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AndroidExoPlayer } from '@awesome-cordova-plugins/android-exoplayer/ngx'; - -constructor(private androidExoPlayer: AndroidExoPlayer) { } - -... - -this.androidExoPlayer.show({url: 'http://www.youtube.com/api/manifest/dash/id/bf5bb2419360daf1/source/youtube'}); - -``` diff --git a/versioned_docs/version-v5/native/android-full-screen.md b/versioned_docs/version-v5/native/android-full-screen.md deleted file mode 100644 index a743922a515..00000000000 --- a/versioned_docs/version-v5/native/android-full-screen.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_label: 'Android Full Screen' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Android Full Screen - -This plugin enables developers to offer users a true full screen experience in their Cordova and PhoneGap apps for Android. -Using Android 4.0+, you can use true full screen in "lean mode", the way you see in apps like YouTube, expanding the app right to the edges of the screen, hiding the status and navigation bars until the user next interacts. This is ideally suited to video or cut-scene content. -In Android 4.4+, however, you can now enter true full screen, fully interactive immersive mode. In this mode, your app will remain in true full screen until you choose otherwise; users can swipe down from the top of the screen to temporarily display the system UI. - -

- - - - {' '} - https://github.com/mesmotronic/cordova-plugin-fullscreen - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-fullscreen {'\n'}$ npm install @awesome-cordova-plugins/android-full-screen {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-fullscreen {'\n'}$ npm install @awesome-cordova-plugins/android-full-screen {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen/ngx'; - -constructor(private androidFullScreen: AndroidFullScreen) { } - -... - -this.androidFullScreen.isImmersiveModeSupported() - .then(() => console.log('Immersive mode supported')) - .catch(err => console.log(err)); - -``` diff --git a/versioned_docs/version-v5/native/android-notch.md b/versioned_docs/version-v5/native/android-notch.md deleted file mode 100644 index 1e124b23fb8..00000000000 --- a/versioned_docs/version-v5/native/android-notch.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -sidebar_label: 'Android Notch' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Android Notch - -This plugin enables developers to get the cutout and android devices inset sizes -It is based on the cordova plugin developed by @tobspr: https://github.com/tobspr/cordova-plugin-android-notch -This plugin works on all android versions, but we can only detect notches starting from Android 9. - -

- - - - {' '} - https://github.com/tobspr/cordova-plugin-android-notch.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-android-notch {'\n'}$ npm install @awesome-cordova-plugins/android-notch {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-android-notch {'\n'}$ npm install @awesome-cordova-plugins/android-notch {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AndroidNotch } from '@awesome-cordova-plugins/android-notch/ngx'; - - -constructor(private androidNotch: AndroidNotch) { } - -... - - -this.androidNotch.hasCutout() - .then((px: number) => console.log('Inset size: '), px) - .catch((error: any) => console.log('Error: ', error)) - -this.androidNotch.getInsetTop() - .then((px: number) => console.log('Inset size: '), px) - .catch((error: any) => console.log('Error: ', error)) - -this.androidNotch.getInsetRight() - .then((px: number) => console.log('Inset size: '), px) - .catch((error: any) => console.log('Error: ', error)) - -this.androidNotch.getInsetBottom() - .then((px: number) => console.log('Inset size: '), px) - .catch((error: any) => console.log('Error: ', error)) - -this.androidNotch.getInsetLeft() - .then((px: number) => console.log('Inset size: '), px) - .catch((error: any) => console.log('Error: ', error)) - -``` diff --git a/versioned_docs/version-v5/native/android-permissions.md b/versioned_docs/version-v5/native/android-permissions.md deleted file mode 100644 index 34847d5f436..00000000000 --- a/versioned_docs/version-v5/native/android-permissions.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Android Permissions | Android Device and Ionic App Permissions' -description: 'This plugin is designed to support Android new permissions checking mechanism. Learn how to install and use Android Device permissions on your Ionic App.' -sidebar_label: 'Android Permissions' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Android Permissions - -This plugin is designed to support Android new permissions checking mechanism. - -You can find all permissions here: https://developer.android.com/reference/android/Manifest.permission.html - -

- - - - {' '} - https://github.com/NeoLSN/cordova-plugin-android-permissions - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-android-permissions {'\n'}$ npm install @awesome-cordova-plugins/android-permissions {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-android-permissions {'\n'}$ npm install @awesome-cordova-plugins/android-permissions{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { AndroidPermissions } from '@awesome-cordova-plugins/android-permissions/ngx'; - - -constructor(private androidPermissions: AndroidPermissions) { } - -... - -this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then( - result => console.log('Has permission?',result.hasPermission), - err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA) -); - -this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.androidPermissions.PERMISSION.GET_ACCOUNTS]); - -``` - -Android 26 and above: due to Android 26's changes to permissions handling (permissions are requested at time of use rather than at runtime,) if your app does not include any functions (eg. other Ionic Native plugins) that utilize a particular permission, then `requestPermission()` and `requestPermissions()` will resolve immediately with no prompt shown to the user. Thus, you must include a function utilizing the feature you would like to use before requesting permission for it. diff --git a/versioned_docs/version-v5/native/anyline.md b/versioned_docs/version-v5/native/anyline.md deleted file mode 100644 index b4d66a84feb..00000000000 --- a/versioned_docs/version-v5/native/anyline.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'Anyline' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Anyline - -Anyline provides an easy-to-use SDK for applications to enable Optical Character Recognition (OCR) on mobile devices. - -

- - - - {' '} - https://github.com/Anyline/anyline-ocr-cordova-module - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install io-anyline-cordova {'\n'}$ npm install @awesome-cordova-plugins/anyline {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add io-anyline-cordova {'\n'}$ npm install @awesome-cordova-plugins/anyline {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Anyline } from '@awesome-cordova-plugins/anyline/ngx'; - - -constructor(private anyline: Anyline) { } - -... - - -this.anyline.scan(options) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/app-availability.md b/versioned_docs/version-v5/native/app-availability.md deleted file mode 100644 index 4c09d772307..00000000000 --- a/versioned_docs/version-v5/native/app-availability.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'App Availability' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Availability - -This plugin allows you to check if an app is installed on the user's device. It requires an URI Scheme (e.g. twitter://) on iOS or a Package Name (e.g com.twitter.android) on Android. - -Requires Cordova plugin: cordova-plugin-appavailability. For more info, please see the [AppAvailability plugin docs](https://github.com/ohh2ahh/AppAvailability). - -

- - - - {' '} - https://github.com/ohh2ahh/AppAvailability - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-appavailability {'\n'}$ npm install @awesome-cordova-plugins/app-availability {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-appavailability {'\n'}$ npm install @awesome-cordova-plugins/app-availability {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppAvailability } from '@awesome-cordova-plugins/app-availability/ngx'; -import { Platform } from 'ionic-angular'; - -constructor(private appAvailability: AppAvailability, private platform: Platform) { } - -... - -let app; - -if (this.platform.is('ios')) { - app = 'twitter://'; -} else if (this.platform.is('android')) { - app = 'com.twitter.android'; -} - -this.appAvailability.check(app) - .then( - (yes: boolean) => console.log(app + ' is available'), - (no: boolean) => console.log(app + ' is NOT available') - ); -``` diff --git a/versioned_docs/version-v5/native/app-center-analytics.md b/versioned_docs/version-v5/native/app-center-analytics.md deleted file mode 100644 index 21d765fb3be..00000000000 --- a/versioned_docs/version-v5/native/app-center-analytics.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -sidebar_label: 'App Center Analytics' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Center Analytics - -App Center Analytics helps you understand user behavior and customer engagement to improve your app. -The SDK automatically captures session count and device properties like model, OS version, etc. -You can define your own custom events to measure things that matter to you. -All the information captured is available in the App Center portal for you to analyze the data. - -For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/analytics/cordova - -

- - - - {' '} - https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-analytics - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-appcenter-analytics {'\n'}$ npm install @awesome-cordova-plugins/app-center-analytics {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-appcenter-analytics {'\n'}$ npm install @awesome-cordova-plugins/app-center-analytics{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppCenterAnalytics } from '@awesome-cordova-plugins/app-center-analytics/ngx'; - - -constructor(private appCenterAnalytics: AppCenterAnalytics) { } - -... - -this.appCenterAnalytics.setEnabled(true).then(() => { - this.appCenterAnalytics.trackEvent('My Event', { TEST: 'HELLO_WORLD' }).then(() => { - console.log('Custom event tracked'); - }); -}); - -``` diff --git a/versioned_docs/version-v5/native/app-center-crashes.md b/versioned_docs/version-v5/native/app-center-crashes.md deleted file mode 100644 index ba91a02c5a6..00000000000 --- a/versioned_docs/version-v5/native/app-center-crashes.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'App Center Crashes' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Center Crashes - -App Center Analytics helps you understand user behavior and customer engagement to improve your app. -The SDK automatically captures session count and device properties like model, OS version, etc. -You can define your own custom events to measure things that matter to you. -All the information captured is available in the App Center portal for you to analyze the data. - -For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/crashes/cordova - -

- - - - {' '} - https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-crashes - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-appcenter-crashes {'\n'}$ npm install @awesome-cordova-plugins/app-center-crashes {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-appcenter-crashes {'\n'}$ npm install @awesome-cordova-plugins/app-center-crashes {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppCenterCrashes } from '@awesome-cordova-plugins/app-center-crashes/ngx'; - - -constructor(private AppCenterCrashes: AppCenterCrashes) { } - -... - -this.AppCenterCrashes.setEnabled(true).then(() => { - this.AppCenterCrashes.lastSessionCrashReport().then(report => { - console.log('Crash report', report); - }); -}); - -``` diff --git a/versioned_docs/version-v5/native/app-center-push.md b/versioned_docs/version-v5/native/app-center-push.md deleted file mode 100644 index 6548a680f89..00000000000 --- a/versioned_docs/version-v5/native/app-center-push.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'App Center Push' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Center Push - -For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/cordova - -

- - - - {' '} - https://github.com/Microsoft/appcenter-sdk-cordova/tree/master/cordova-plugin-appcenter-push - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-appcenter-push {'\n'}$ npm install @awesome-cordova-plugins/app-center-push {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-appcenter-push {'\n'}$ npm install @awesome-cordova-plugins/app-center-push {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppCenterPush } from '@awesome-cordova-plugins/app-center-push/ngx'; - - -constructor(private appCenterPush: AppCenterPush) { } - -... - -this.appCenterPush.setEnabled(true).then(() => { - this.appCenterPush.addEventListener('My Event').subscribe(pushNotification => { - console.log('Recived push notification', pushNotification); - }); -}); - -``` diff --git a/versioned_docs/version-v5/native/app-preferences.md b/versioned_docs/version-v5/native/app-preferences.md deleted file mode 100644 index 2c634099c4f..00000000000 --- a/versioned_docs/version-v5/native/app-preferences.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -sidebar_label: 'App Preferences' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Preferences - -This plugin allows you to read and write app preferences - -

- - - - {' '} - https://github.com/apla/me.apla.cordova.app-preferences - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-app-preferences {'\n'}$ npm install @awesome-cordova-plugins/app-preferences {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-app-preferences {'\n'}$ npm install @awesome-cordova-plugins/app-preferences {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- BlackBerry 10 -- Browser -- iOS -- macOS -- Windows 8 -- Windows Phone - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppPreferences } from '@awesome-cordova-plugins/app-preferences/ngx'; - -constructor(private appPreferences: AppPreferences) { } - -... - -this.appPreferences.fetch('key').then((res) => { console.log(res); }); - -``` diff --git a/versioned_docs/version-v5/native/app-rate.md b/versioned_docs/version-v5/native/app-rate.md deleted file mode 100644 index 197936cb26e..00000000000 --- a/versioned_docs/version-v5/native/app-rate.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -sidebar_label: 'App Rate' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Rate - -The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never. - -Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [AppRate plugin docs](https://github.com/pushandplay/cordova-plugin-apprate). - -

- - - - {' '} - https://github.com/pushandplay/cordova-plugin-apprate - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-apprate {'\n'}$ npm install @awesome-cordova-plugins/app-rate {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-apprate {'\n'}$ npm install @awesome-cordova-plugins/app-rate {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- BlackBerry 10 -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppRate } from '@awesome-cordova-plugins/app-rate/ngx'; - -constructor(private appRate: AppRate) { } - -... -// set certain preferences -this.appRate.preferences.storeAppURL = { - ios: '<app_id>', - android: 'market://details?id=<package_name>', - windows: 'ms-windows-store://review/?ProductId=<store_id>' -} - -this.appRate.promptForRating(true); - -// or, override the whole preferences object -this.appRate.preferences = { - usesUntilPrompt: 3, - storeAppURL: { - ios: '<app_id>', - android: 'market://details?id=<package_name>', - windows: 'ms-windows-store://review/?ProductId=<store_id>' - } -} - -this.appRate.promptForRating(false); -``` diff --git a/versioned_docs/version-v5/native/app-version.md b/versioned_docs/version-v5/native/app-version.md deleted file mode 100644 index ed9c6da1eb9..00000000000 --- a/versioned_docs/version-v5/native/app-version.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'App Version | Cordova Plugin App Version to Read Ionic Apps' -description: 'The App Version feature reads the version of your Ionic app from the target build settings. Usage requires the cordova-plugin-app-version. Read to learn more.' -sidebar_label: 'App Version' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# App Version - -Reads the version of your app from the target build settings. - -Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see the [Cordova App Version docs](https://github.com/whiteoctober/cordova-plugin-app-version). - -

- - - - {' '} - https://github.com/whiteoctober/cordova-plugin-app-version - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-app-version {'\n'}$ npm install @awesome-cordova-plugins/app-version {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-app-version {'\n'}$ npm install @awesome-cordova-plugins/app-version {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppVersion } from '@awesome-cordova-plugins/app-version/ngx'; - -constructor(private appVersion: AppVersion) { } - -... - - -this.appVersion.getAppName(); -this.appVersion.getPackageName(); -this.appVersion.getVersionCode(); -this.appVersion.getVersionNumber(); - -``` diff --git a/versioned_docs/version-v5/native/apple-wallet.md b/versioned_docs/version-v5/native/apple-wallet.md deleted file mode 100644 index 9e3d0c3f980..00000000000 --- a/versioned_docs/version-v5/native/apple-wallet.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -sidebar_label: 'Apple Wallet' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Apple Wallet - -A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet. - -

- - - - {' '} - https://github.com/tomavic/cordova-apple-wallet - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-apple-wallet {'\n'}$ npm install @awesome-cordova-plugins/apple-wallet {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-apple-wallet {'\n'}$ npm install @awesome-cordova-plugins/apple-wallet {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { AppleWallet } from '@awesome-cordova-plugins/apple-wallet/ngx'; - - -constructor(private appleWallet: AppleWallet) { } - - -... - - -// Simple call to determine if the current device supports Apple Pay and has a supported card installed. -this.appleWallet.isAvailable() - .then((res: boolean) => { - // Expect res to be boolean - }) - .catch((err) => { - // Catch {{err}} here - }); - -... - - -// Simple call to check Card Eligibility -this.appleWallet.checkCardEligibility(primaryAccountIdentifier: string) - .then((res: boolean) => { - // Expect res to be boolean - }) - .catch((err) => { - // Catch {{err}} here - }); - - -... - - -// Simple call to checkCardEligibilityBySuffix -this.appleWallet.checkCardEligibilityBySuffix(cardSuffix: string) - .then((res: boolean) => { - // Expect res to be boolean - }) - .catch((err) => { - // Catch {{err}} here - }); - - -... - -// Simple call to check out if there is any paired Watches so that you can toggle visibility of 'Add to Watch' button -this.appleWallet.checkPairedDevices() - .then((res: WatchExistData) => { - // object contains boolean flags showing paired devices - }) - .catch((err) => { - // Catch {{err}} here - }); - - -... - - - -// Simple call to check paired devices with a card by its suffix -this.appleWallet.checkPairedDevicesBySuffix(cardSuffix: string) - .then((res: PairedDevicesFlags) => { - // object contains boolean values that ensure that card is already exists in wallet or paired-watch - }) - .catch((err) => { - // Catch {{err}} here - }); - - -... - - -// Simple call with the configuration data needed to instantiate a new PKAddPaymentPassViewController object. -// This method provides the data needed to create a request to add your payment pass (credit/debit card). After a successful callback, pass the certificate chain to your issuer server-side using our callback delegate method `AppleWallet.completeAddPaymentPass`. The issuer server-side should returns an encrypted JSON payload containing the encrypted card data, which is required to be get the final response - -this.appleWallet.startAddPaymentPass(data: cardData) - .then((res: SignatureCertificatesData) => { - // User proceed and successfully asked to add card to his wallet - // Use the callback response JSON payload to complete addition process - }) - .catch((err) => { - // Catch {{err}} here - }); - - -... - - -this.appleWallet.completeAddPaymentPass(data: encryptedCardData) - .then((res: string) => { - // Expect res to be string either 'success' or 'error' - }) - .catch((err) => { - // Catch {{err}} here - // Error and can not add the card, or something wrong happend - // PKAddPaymentPassViewController will be dismissed - }); - -``` diff --git a/versioned_docs/version-v5/native/appsflyer.md b/versioned_docs/version-v5/native/appsflyer.md deleted file mode 100644 index 74c25f72c59..00000000000 --- a/versioned_docs/version-v5/native/appsflyer.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -sidebar_label: 'Appsflyer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Appsflyer - -Appsflyer Cordova SDK support for Attribution - -

- - - - {' '} - https://github.com/AppsFlyerSDK/cordova-plugin-appsflyer-sdk - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-appsflyer-sdk {'\n'}$ npm install @awesome-cordova-plugins/appsflyer {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-appsflyer-sdk {'\n'}$ npm install @awesome-cordova-plugins/appsflyer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Appsflyer } from '@awesome-cordova-plugins/appsflyer/ngx'; - - -constructor(private appsflyer: Appsflyer) { } - -... - - -this.appsflyer.initSdk(options); - -``` diff --git a/versioned_docs/version-v5/native/background-fetch.md b/versioned_docs/version-v5/native/background-fetch.md deleted file mode 100644 index b1b78cab97b..00000000000 --- a/versioned_docs/version-v5/native/background-fetch.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -sidebar_label: 'Background Fetch' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Background Fetch - -iOS Background Fetch Implementation. See: https://developer.apple.com/reference/uikit/uiapplication#1657399 -iOS Background Fetch is basically an API which wakes up your app about every 15 minutes (during the user's prime-time hours) and provides your app exactly 30s of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs. There is no way to increase the rate which a fetch-event occurs and this plugin sets the rate to the most frequent possible value of UIApplicationBackgroundFetchIntervalMinimum -- iOS determines the rate automatically based upon device usage and time-of-day (ie: fetch-rate is about ~15min during prime-time hours; less frequently when the user is presumed to be sleeping, at 3am for example). -For more detail, please see https://github.com/transistorsoft/cordova-plugin-background-fetch - -

- - - - {' '} - https://github.com/transistorsoft/cordova-plugin-background-fetch - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-background-fetch {'\n'}$ npm install @awesome-cordova-plugins/background-fetch {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BackgroundFetch, BackgroundFetchConfig } from '@awesome-cordova-plugins/background-fetch/ngx'; - - -constructor(private backgroundFetch: BackgroundFetch) { - - const config: BackgroundFetchConfig = { - stopOnTerminate: false, // Set true to cease background-fetch from operating after user "closes" the app. Defaults to true. - } - - backgroundFetch.configure(config) - .then(() => { - console.log('Background Fetch initialized'); - - this.backgroundFetch.finish(); - - }) - .catch(e => console.log('Error initializing background fetch', e)); - - // Start the background-fetch API. Your callbackFn provided to #configure will be executed each time a background-fetch event occurs. NOTE the #configure method automatically calls #start. You do not have to call this method after you #configure the plugin - backgroundFetch.start(); - - // Stop the background-fetch API from firing fetch events. Your callbackFn provided to #configure will no longer be executed. - backgroundFetch.stop(); - - -} - -``` diff --git a/versioned_docs/version-v5/native/background-geolocation.md b/versioned_docs/version-v5/native/background-geolocation.md deleted file mode 100644 index 4c3053f9b1a..00000000000 --- a/versioned_docs/version-v5/native/background-geolocation.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 'Background Geolocation: Cordova Background Geolocation Tracking' -description: "This Cordova plugin provides foreground and background geolocation and tracking with battery-saving 'circular region monitoring' and 'stop detection'." -sidebar_label: 'Background Geolocation' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Background Geolocation - -This plugin provides foreground and background geolocation with battery-saving "circular region monitoring" and "stop detection". For -more detail, please see https://github.com/mauron85/cordova-plugin-background-geolocation - -

- - - - {' '} - https://github.com/mauron85/cordova-plugin-background-geolocation - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install @mauron85/cordova-plugin-background-geolocation {'\n'}$ npm install @awesome-cordova-plugins/background-geolocation{' '} - {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add @mauron85/cordova-plugin-background-geolocation {'\n'}$ npm install @awesome-cordova-plugins/background-geolocation{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -BackgroundGeolocation must be called within app.ts and or before Geolocation. Otherwise the platform will not ask you for background tracking permission. - -```tsx -import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationEvents, BackgroundGeolocationResponse } from '@awesome-cordova-plugins/background-geolocation/ngx'; - -constructor(private backgroundGeolocation: BackgroundGeolocation) { } - -... - -const config: BackgroundGeolocationConfig = { - desiredAccuracy: 10, - stationaryRadius: 20, - distanceFilter: 30, - debug: true, // enable this hear sounds for background-geolocation life-cycle. - stopOnTerminate: false, // enable this to clear background location settings when the app terminates - }; - -this.backgroundGeolocation.configure(config) - .then(() => { - - this.backgroundGeolocation.on(BackgroundGeolocationEvents.location).subscribe((location: BackgroundGeolocationResponse) => { - console.log(location); - - // IMPORTANT: You must execute the finish method here to inform the native plugin that you're finished, - // and the background-task may be completed. You must do this regardless if your operations are successful or not. - // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background. - this.backgroundGeolocation.finish(); // FOR IOS ONLY - }); - - }); - -// start recording location -this.backgroundGeolocation.start(); - -// If you wish to turn OFF background-tracking, call the #stop method. -this.backgroundGeolocation.stop(); - -``` diff --git a/versioned_docs/version-v5/native/background-mode.md b/versioned_docs/version-v5/native/background-mode.md deleted file mode 100644 index 870ca004bcc..00000000000 --- a/versioned_docs/version-v5/native/background-mode.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 'Native Background Mode | Cordova-Plugin-Background-Mode' -description: 'Learn about Cordova-plugin-background-mode usage. This Cordova plugin, for Ionic Native Apps, prevents the app from going to sleep while in background.' -sidebar_label: 'Background Mode' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Background Mode - -Cordova plugin to prevent the app from going to sleep while in background. -Requires Cordova plugin: cordova-plugin-background-mode. For more info about plugin, visit: https://github.com/katzer/cordova-plugin-background-mode - -

- - - - {' '} - https://github.com/katzer/cordova-plugin-background-mode - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-background-mode {'\n'}$ npm install @awesome-cordova-plugins/background-mode {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-background-mode {'\n'}$ npm install @awesome-cordova-plugins/background-mode {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- AmazonFire OS -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BackgroundMode } from '@awesome-cordova-plugins/background-mode/ngx'; - -constructor(private backgroundMode: BackgroundMode) { } - -... - -this.backgroundMode.enable(); -``` diff --git a/versioned_docs/version-v5/native/background-upload.md b/versioned_docs/version-v5/native/background-upload.md deleted file mode 100644 index 34ac732f069..00000000000 --- a/versioned_docs/version-v5/native/background-upload.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'BackgroundUpload' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BackgroundUpload - -This plugin does something - -

- - - - {' '} - https://github.com/spoonconsulting/cordova-plugin-background-upload - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-background-upload {'\n'}$ npm install @awesome-cordova-plugins/background-upload {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-background-upload {'\n'}$ npm install @awesome-cordova-plugins/background-upload {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BackgroundUpload } from '@awesome-cordova-plugins/background-upload/ngx'; - - -constructor(private backgroundUpload: BackgroundUpload) { } - -... - - -this.backgroundUpload.init({}) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/badge.md b/versioned_docs/version-v5/native/badge.md deleted file mode 100644 index 6207c124356..00000000000 --- a/versioned_docs/version-v5/native/badge.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -sidebar_label: 'Badge' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Badge - -The essential purpose of badge numbers is to enable an application to inform its users that it has something for them — for example, unread messages — when the application isn’t running in the foreground. - -Requires Cordova plugin: cordova-plugin-badge. For more info, please see the [Badge plugin docs](https://github.com/katzer/cordova-plugin-badge). - -Android Note: Badges have historically only been a feature implemented by third party launchers and not visible unless one of those launchers was being used (E.G. Samsung or Nova Launcher) and if enabled by the user. As of Android 8 (Oreo), [notification badges](https://developer.android.com/training/notify-user/badges) were introduced officially to reflect unread notifications. This plugin is unlikely to work as expected on devices running Android 8 or newer. Please see the [local notifications plugin docs](https://github.com/katzer/cordova-plugin-local-notifications) for more information on badge use with notifications. - -

- - - - {' '} - https://github.com/katzer/cordova-plugin-badge - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-badge {'\n'}$ npm install @awesome-cordova-plugins/badge {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-badge {'\n'}$ npm install @awesome-cordova-plugins/badge {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Badge } from '@awesome-cordova-plugins/badge/ngx'; - -constructor(private badge: Badge) { } - -... - -this.badge.set(10); -this.badge.increase(1); -this.badge.clear(); -``` diff --git a/versioned_docs/version-v5/native/barcode-scanner.md b/versioned_docs/version-v5/native/barcode-scanner.md deleted file mode 100644 index 52228525d0d..00000000000 --- a/versioned_docs/version-v5/native/barcode-scanner.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 'Barcode Scanner | Install Camera Barcode Scanner Plugin' -description: "Ionic's Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you. Read more for installation and usage." -sidebar_label: 'Barcode Scanner' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Barcode Scanner - -The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you. - -Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner). - -

- - - - {' '} - https://github.com/phonegap/phonegap-plugin-barcodescanner - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install phonegap-plugin-barcodescanner {'\n'}$ npm install @awesome-cordova-plugins/barcode-scanner {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add phonegap-plugin-barcodescanner {'\n'}$ npm install @awesome-cordova-plugins/barcode-scanner {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- BlackBerry 10 -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner/ngx'; - -constructor(private barcodeScanner: BarcodeScanner) { } - -... - - -this.barcodeScanner.scan().then(barcodeData => { - console.log('Barcode data', barcodeData); -}).catch(err => { - console.log('Error', err); -}); -``` diff --git a/versioned_docs/version-v5/native/battery-status.md b/versioned_docs/version-v5/native/battery-status.md deleted file mode 100644 index ea3fbd19623..00000000000 --- a/versioned_docs/version-v5/native/battery-status.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Battery Status' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Battery Status - -Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see the [BatteryStatus plugin docs](https://github.com/apache/cordova-plugin-battery-status). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-battery-status - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-battery-status {'\n'}$ npm install @awesome-cordova-plugins/battery-status {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-battery-status {'\n'}$ npm install @awesome-cordova-plugins/battery-status {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android -- Windows -- Browser - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BatteryStatus } from '@awesome-cordova-plugins/battery-status/ngx'; - -constructor(private batteryStatus: BatteryStatus) { } - -... - - -// watch change in battery status -const subscription = this.batteryStatus.onChange().subscribe(status => { - console.log(status.level, status.isPlugged); -}); - -// stop watch -subscription.unsubscribe(); - -``` diff --git a/versioned_docs/version-v5/native/biocatch.md b/versioned_docs/version-v5/native/biocatch.md deleted file mode 100644 index c1af0bb895e..00000000000 --- a/versioned_docs/version-v5/native/biocatch.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'BioCatch' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BioCatch - -BioCatch SDK Cordova support - -

- - - - {' '} - https://bitbucket.org/carlos_orellana/ionic-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-biocatch {'\n'}$ npm install @awesome-cordova-plugins/biocatch {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-biocatch {'\n'}$ npm install @awesome-cordova-plugins/biocatch {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BioCatch } from '@awesome-cordova-plugins/biocatch'; - - -constructor(private biocatch: BioCatch) { } - -... - - -this.biocatch.start('customer-session-1', 'http://example.com', 'some-public-key') - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/biometric-wrapper.md b/versioned_docs/version-v5/native/biometric-wrapper.md deleted file mode 100644 index 869964d31c5..00000000000 --- a/versioned_docs/version-v5/native/biometric-wrapper.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -sidebar_label: 'BiometricWrapper' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BiometricWrapper - -This plugin capture biometric(Iris and Fingerprint) and validate the user. -May be used in Banking domain - -

- - - - - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-biometric {'\n'}$ npm install @awesome-cordova-plugins/biometric-wrapper {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-biometric {'\n'}$ npm install @awesome-cordova-plugins/biometric-wrapper {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BiometricWrapper } from '@awesome-cordova-plugins/biometric-wrapper/ngx'; - - -constructor(private biometricWrapper: BiometricWrapper) { } - -... - - -this.biometricWrapper.activateIris({'PID_XML': '<pid-xml/>'}) - .then((res: any) => ) - .catch((error: any) => ); - -``` diff --git a/versioned_docs/version-v5/native/ble.md b/versioned_docs/version-v5/native/ble.md deleted file mode 100644 index ad533810383..00000000000 --- a/versioned_docs/version-v5/native/ble.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -sidebar_label: 'BLE' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BLE - -This plugin enables communication between a phone and Bluetooth Low Energy (BLE) peripherals. - -The plugin provides a simple JavaScript API for iOS and Android. - -- Scan for peripherals -- Connect to a peripheral -- Read the value of a characteristic -- Write new value to a characteristic -- Get notified when characteristic's value changes - -Advertising information is returned when scanning for peripherals. Service, characteristic, and property info is returned when connecting to a peripheral. All access is via service and characteristic UUIDs. The plugin manages handles internally. - -Simultaneous connections to multiple peripherals are supported. - -

- - - - {' '} - https://github.com/don/cordova-plugin-ble-central - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ble-central {'\n'}$ npm install @awesome-cordova-plugins/ble {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ble-central {'\n'}$ npm install @awesome-cordova-plugins/ble {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx - -import { BLE } from '@awesome-cordova-plugins/ble/ngx'; - -constructor(private ble: BLE) { } - -``` - -## Peripheral Data - -Peripheral Data is passed to the success callback when scanning and connecting. Limited data is passed when scanning. - -```tsx - { - 'name': 'Battery Demo', - 'id': '20:FF:D0:FF:D1:C0', - 'advertising': [2,1,6,3,3,15,24,8,9,66,97,116,116,101,114,121], - 'rssi': -55 - } -``` - -After connecting, the peripheral object also includes service, characteristic and descriptor information. - -```tsx - { - 'name': 'Battery Demo', - 'id': '20:FF:D0:FF:D1:C0', - 'advertising': [2,1,6,3,3,15,24,8,9,66,97,116,116,101,114,121], - 'rssi': -55, - 'services': [ - '1800', - '1801', - '180f' - ], - 'characteristics': [ - { - 'service': '1800', - 'characteristic': '2a00', - 'properties': [ - 'Read' - ] - }, - { - 'service': '1800', - 'characteristic': '2a01', - 'properties': [ - 'Read' - ] - }, - { - 'service': '1801', - 'characteristic': '2a05', - 'properties': [ - 'Read' - ] - }, - { - 'service': '180f', - 'characteristic': '2a19', - 'properties': [ - 'Read' - ], - 'descriptors': [ - { - 'uuid': '2901' - }, - { - 'uuid': '2904' - } - ] - } - ] - } -``` - -## Advertising Data - -Bluetooth advertising data is returned in when scanning for devices. The format varies depending on your platform. On Android advertising data will be the raw advertising bytes. iOS does not allow access to raw advertising data, so a dictionary of data is returned. - -The advertising information for both Android and iOS appears to be a combination of advertising data and scan response data. - -### Android - -```tsx - { - 'name': 'demo', - 'id': '00:1A:7D:DA:71:13', - 'advertising': ArrayBuffer, - 'rssi': -37 - } -``` - -Convert the advertising info to a Uint8Array for processing. `var adData = new Uint8Array(peripheral.advertising)` - -### iOS - -Note that iOS uses the string value of the constants for the [Advertisement Data Retrieval Keys](https://developer.apple.com/library/ios/documentation/CoreBluetooth/Reference/CBCentralManagerDelegate_Protocol/index.html#//apple_ref/doc/constant_group/Advertisement_Data_Retrieval_Keys). This will likely change in the future. - -```tsx - { - 'name': 'demo', - 'id': 'D8479A4F-7517-BCD3-91B5-3302B2F81802', - 'advertising': { - 'kCBAdvDataChannel': 37, - 'kCBAdvDataServiceData': { - 'FED8': { - 'byteLength': 7 // data not shown - } - }, - 'kCBAdvDataLocalName': 'demo', - 'kCBAdvDataServiceUUIDs': ['FED8'], - 'kCBAdvDataManufacturerData': { - 'byteLength': 7 // data not shown - }, - 'kCBAdvDataTxPowerLevel': 32, - 'kCBAdvDataIsConnectable': true - }, - 'rssi': -53 - } -``` - -## Typed Arrays - -This plugin uses typed Arrays or ArrayBuffers for sending and receiving data. - -This means that you need convert your data to ArrayBuffers before sending and from ArrayBuffers when receiving. - -```tsx - // ASCII only - function stringToBytes(string) { - var array = new Uint8Array(string.length); - for (var i = 0, l = string.length; i < l; i++) { - array[i] = string.charCodeAt(i); - } - return array.buffer; - } - - // ASCII only - function bytesToString(buffer) { - return String.fromCharCode.apply(null, new Uint8Array(buffer)); - } -``` - -You can read more about typed arrays in these articles on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) and [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/). - -## UUIDs - -UUIDs are always strings and not numbers. Some 16-bit UUIDs, such as '2220' look like integers, but they're not. (The integer 2220 is 0x8AC in hex.) This isn't a problem with 128 bit UUIDs since they look like strings 82b9e6e1-593a-456f-be9b-9215160ebcac. All 16-bit UUIDs should also be passed to methods as strings. diff --git a/versioned_docs/version-v5/native/blinkid.md b/versioned_docs/version-v5/native/blinkid.md deleted file mode 100644 index 7262a31efd8..00000000000 --- a/versioned_docs/version-v5/native/blinkid.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -sidebar_label: 'BlinkId' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BlinkId - -Microblink SDK wrapper for barcode and document scanning. See the -blinkid-phonegap repository for available recognizers and other settings - -

- - - - {' '} - https://github.com/BlinkID/blinkid-phonegap - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install blinkid-cordova {'\n'}$ npm install @awesome-cordova-plugins/blinkid {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add blinkid-cordova {'\n'}$ npm install @awesome-cordova-plugins/blinkid {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BlinkId, RecognizerResultState } from '@awesome-cordova-plugins/blinkid/ngx'; - -constructor(private blinkId: BlinkId) { } - -... - -const overlaySettings = new this.blinkId.DocumentOverlaySettings(); - -const usdlRecognizer = new this.blinkId.UsdlRecognizer(); -const usdlSuccessFrameGrabber = new this.blinkId.SuccessFrameGrabberRecognizer(usdlRecognizer); - -const barcodeRecognizer = new this.blinkId.BarcodeRecognizer(); -barcodeRecognizer.scanPdf417 = true; - -const recognizerCollection = new this.blinkId.RecognizerCollection([ - usdlSuccessFrameGrabber, - barcodeRecognizer, -]); - -const canceled = await this.blinkId.scanWithCamera( - overlaySettings, - recognizerCollection, - { ios: IOS_LICENSE_KEY, android: ANDROID_LICENSE_KEY }, -); - -if (!canceled) { - if (usdlRecognizer.result.resultState === RecognizerResultState.valid) { - const successFrame = usdlSuccessFrameGrabber.result.successFrame; - if (successFrame) { - this.base64Img = `data:image/jpg;base64, ${successFrame}`; - this.fields = usdlRecognizer.result.fields; - } - } else { - this.barcodeStringData = barcodeRecognizer.result.stringData; - } -} - -... - -const overlaySettings = new this.blinkId.BlinkCardOverlaySettings(); -const recognizer = new this.blinkId.BlinkCardRecognizer(); -recognizer.returnFullDocumentImage = false; -recognizer.detectGlare = true; -recognizer.extractCvv = true; -recognizer.extractValidThru = true; -recognizer.extractOwner = true; - -const recognizerCollection = new this.blinkId.RecognizerCollection([recognizer]); -const canceled = await this.blinkId.scanWithCamera( - overlaySettings, - recognizerCollection, - { - ios: '', //iOS License Key - android: '' //Android License Key - }, -); - -if (!canceled) { - if (recognizer.result.resultState === RecognizerResultState.valid) { - const results = recognizer.result; - - if (results.resultState === RecognizerResultState.valid) { - const ccInfo = { - cardNumber: Number(results.cardNumber), - expirationMonth: Number(results.validThru.month), - expirationYear: Number(results.validThru.year), - cvv: Number(results.cvv) - }; - } - } -``` diff --git a/versioned_docs/version-v5/native/bluetooth-le.md b/versioned_docs/version-v5/native/bluetooth-le.md deleted file mode 100644 index bac7c13eeba..00000000000 --- a/versioned_docs/version-v5/native/bluetooth-le.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'BluetoothLE' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BluetoothLE - -This plugin has the most complete implementation for interacting with Bluetooth LE devices on Android, iOS and partially Windows. -It's a wrap around [randdusing/cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle/blob/master/readme.md) cordova plugin for Ionic. -It supports peripheral **and** central modes and covers most of the API methods available on Android and iOS. - -

- - - - {' '} - https://github.com/randdusing/cordova-plugin-bluetoothle - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-bluetoothle {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-le {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-bluetoothle {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-le {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BluetoothLE } from '@awesome-cordova-plugins/bluetooth-le/ngx'; - - -constructor(public bluetoothle: BluetoothLE, public plt: Platform) { - - this.plt.ready().then((readySource) => { - - console.log('Platform ready from', readySource); - - this.bluetoothle.initialize().then(ble => { - console.log('ble', ble.status) // logs 'enabled' - }); - - }); -} - -``` diff --git a/versioned_docs/version-v5/native/bluetooth-serial.md b/versioned_docs/version-v5/native/bluetooth-serial.md deleted file mode 100644 index e8bb5eff695..00000000000 --- a/versioned_docs/version-v5/native/bluetooth-serial.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'Bluetooth Serial' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Bluetooth Serial - -This plugin enables serial communication over Bluetooth. It was written for communicating between Android or iOS and an Arduino (not Android to Android or iOS to iOS). - -

- - - - {' '} - https://github.com/don/BluetoothSerial - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-bluetooth-serial {'\n'}$ npm install @awesome-cordova-plugins/bluetooth-serial {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { BluetoothSerial } from '@awesome-cordova-plugins/bluetooth-serial/ngx'; - -constructor(private bluetoothSerial: BluetoothSerial) { } - - -// Write a string -this.bluetoothSerial.write('hello world').then(success, failure); - -// Array of int or bytes -this.bluetoothSerial.write([186, 220, 222]).then(success, failure); - -// Typed Array -var data = new Uint8Array(4); -data[0] = 0x41; -data[1] = 0x42; -data[2] = 0x43; -data[3] = 0x44; -this.bluetoothSerial.write(data).then(success, failure); - -// Array Buffer -this.bluetoothSerial.write(data.buffer).then(success, failure); -``` diff --git a/versioned_docs/version-v5/native/branch-io.md b/versioned_docs/version-v5/native/branch-io.md deleted file mode 100644 index 01dbef02e61..00000000000 --- a/versioned_docs/version-v5/native/branch-io.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -sidebar_label: 'BranchIo' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# BranchIo - -Branch.io is an attribution service for deeplinking and invitation links - -

- - - - {' '} - https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install branch-cordova-sdk {'\n'}$ npm install @awesome-cordova-plugins/branch-io {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add branch-cordova-sdk {'\n'}$ npm install @awesome-cordova-plugins/branch-io {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { BranchIo } from '@awesome-cordova-plugins/branch-io/ngx'; - - -constructor(private branch: BranchIo) { } - -``` diff --git a/versioned_docs/version-v5/native/broadcaster.md b/versioned_docs/version-v5/native/broadcaster.md deleted file mode 100644 index 74bcf9034d7..00000000000 --- a/versioned_docs/version-v5/native/broadcaster.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'Broadcaster' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Broadcaster - -This plugin adds exchanging events between native code and your app. - -

- - - - {' '} - https://github.com/bsorrentino/cordova-broadcaster - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-broadcaster {'\n'}$ npm install @awesome-cordova-plugins/broadcaster {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-broadcaster {'\n'}$ npm install @awesome-cordova-plugins/broadcaster {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Browser - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Broadcaster } from '@awesome-cordova-plugins/broadcaster/ngx'; - -constructor(private broadcaster: Broadcaster) { } - -... - -// Listen to events from Native -this.broadcaster.addEventListener('eventName').subscribe((event) => console.log(event)); - -// Send event to Native -this.broadcaster.fireNativeEvent('eventName', {}).then(() => console.log('success')); - -``` diff --git a/versioned_docs/version-v5/native/build-info.md b/versioned_docs/version-v5/native/build-info.md deleted file mode 100644 index 88a0446ae01..00000000000 --- a/versioned_docs/version-v5/native/build-info.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Build Info' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Build Info - -This plugin provides build information. - -

- - - - {' '} - https://github.com/lynrin/cordova-plugin-buildinfo - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-buildinfo {'\n'}$ npm install @awesome-cordova-plugins/build-info {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-buildinfo {'\n'}$ npm install @awesome-cordova-plugins/build-info {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows -- macOS -- browser -- Electron - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { BuildInfo } from '@awesome-cordova-plugins/build-info/ngx'; - -this.platform.ready().then(() => { - console.log('BuildInfo.baseUrl =' + BuildInfo.baseUrl) - console.log('BuildInfo.packageName =' + BuildInfo.packageName) - console.log('BuildInfo.basePackageName=' + BuildInfo.basePackageName) - console.log('BuildInfo.displayName =' + BuildInfo.displayName) - console.log('BuildInfo.name =' + BuildInfo.name) - console.log('BuildInfo.version =' + BuildInfo.version) - console.log('BuildInfo.versionCode =' + BuildInfo.versionCode) - console.log('BuildInfo.debug =' + BuildInfo.debug) - console.log('BuildInfo.buildType =' + BuildInfo.buildType) - console.log('BuildInfo.flavor =' + BuildInfo.flavor) - console.log('BuildInfo.buildDate =' + BuildInfo.buildDate) - console.log('BuildInfo.installDate =' + BuildInfo.installDate) -}) -``` diff --git a/versioned_docs/version-v5/native/calendar.md b/versioned_docs/version-v5/native/calendar.md deleted file mode 100644 index 99e5655b321..00000000000 --- a/versioned_docs/version-v5/native/calendar.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 'Calendar Plugin | Ionic Applications & Cordova Plugin Calendar' -description: 'Use the Cordova Plugin Calendar to add events to the calendar of the mobile device you are on from your Ionic Framework Application. Read to learn about usage.' -sidebar_label: 'Calendar' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Calendar - -This plugin allows you to add events to the Calendar of the mobile device. - -Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see the [Calendar plugin docs](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin). - -

- - - - {' '} - https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-calendar {'\n'}$ npm install @awesome-cordova-plugins/calendar {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-calendar {'\n'}$ npm install @awesome-cordova-plugins/calendar {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Calendar } from '@awesome-cordova-plugins/calendar/ngx'; - -constructor(private calendar: Calendar) { } - - -this.calendar.createCalendar('MyCalendar').then( - (msg) => { console.log(msg); }, - (err) => { console.log(err); } -); -``` diff --git a/versioned_docs/version-v5/native/call-directory.md b/versioned_docs/version-v5/native/call-directory.md deleted file mode 100644 index d6f965d4b5a..00000000000 --- a/versioned_docs/version-v5/native/call-directory.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Call Directory' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Call Directory - -This plugin can add phone numbers to an Callkit call directory extension. Call `reloadExtension` after using `addIdentification` and `removeIdentification` -to process the changes in the call directory extension. - -

- - - - {' '} - https://github.com/GEDYSIntraWare/cordova-plugin-call-directory - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-call-directory {'\n'}$ npm install @awesome-cordova-plugins/call-directory {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-call-directory {'\n'}$ npm install @awesome-cordova-plugins/call-directory {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CallDirectory } from '@awesome-cordova-plugins/call-directory/ngx'; - - -constructor(private callDirectory: CallDirectory) { } - - -let items = [{label: "Hello", number: "123"}]; -this.callDirectory.addIdentification(items) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -this.callDirectory.reloadExtension() - .then(res: string) => console.log(res)) - .catch((error: any) => console.error(error)); -``` diff --git a/versioned_docs/version-v5/native/call-number.md b/versioned_docs/version-v5/native/call-number.md deleted file mode 100644 index ead29647504..00000000000 --- a/versioned_docs/version-v5/native/call-number.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'Call Number' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Call Number - -Call a number directly from your Cordova/Ionic application. -**NOTE**: The iOS Simulator (and maybe Android Simulators) do not provide access to the phone subsystem. - -

- - - - {' '} - https://github.com/Rohfosho/CordovaCallNumberPlugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install call-number {'\n'}$ npm install @awesome-cordova-plugins/call-number {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add call-number {'\n'}$ npm install @awesome-cordova-plugins/call-number {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CallNumber } from '@awesome-cordova-plugins/call-number/ngx'; - -constructor(private callNumber: CallNumber) { } - -... - - -this.callNumber.callNumber("18001010101", true) - .then(res => console.log('Launched dialer!', res)) - .catch(err => console.log('Error launching dialer', err)); - -``` diff --git a/versioned_docs/version-v5/native/camera-preview.md b/versioned_docs/version-v5/native/camera-preview.md deleted file mode 100644 index 298a4f578f5..00000000000 --- a/versioned_docs/version-v5/native/camera-preview.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -sidebar_label: 'Camera Preview' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Camera Preview - -Showing camera preview in HTML - -Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git`. For more info, please see the [Cordova Camera Preview docs](https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview). - -

- - - - {' '} - https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-camera-preview {'\n'}$ npm install @awesome-cordova-plugins/camera-preview {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-camera-preview {'\n'}$ npm install @awesome-cordova-plugins/camera-preview {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@awesome-cordova-plugins/camera-preview/ngx'; - -constructor(private cameraPreview: CameraPreview) { } - -... - -// camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview -const cameraPreviewOpts: CameraPreviewOptions = { - x: 0, - y: 0, - width: window.screen.width, - height: window.screen.height, - camera: 'rear', - tapPhoto: true, - previewDrag: true, - toBack: true, - alpha: 1 -} - -// start camera -this.cameraPreview.startCamera(cameraPreviewOpts).then( - (res) => { - console.log(res) - }, - (err) => { - console.log(err) - }); - -// Set the handler to run every time we take a picture -this.cameraPreview.setOnPictureTakenHandler().subscribe((result) => { - console.log(result); - // do something with the result -}); - - -// picture options -const pictureOpts: CameraPreviewPictureOptions = { - width: 1280, - height: 1280, - quality: 85 -} - -// take a picture -this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => { - this.picture = 'data:image/jpeg;base64,' + imageData; -}, (err) => { - console.log(err); - this.picture = 'assets/img/test.jpg'; -}); - -// take a snap shot -this.cameraPreview.takeSnapshot(this.pictureOpts).then((imageData) => { - this.picture = 'data:image/jpeg;base64,' + imageData; -}, (err) => { - console.log(err); - this.picture = 'assets/img/test.jpg'; -}); - - -// Switch camera -this.cameraPreview.switchCamera(); - -// set color effect to negative -this.cameraPreview.setColorEffect('negative'); - -// Stop the camera preview -this.cameraPreview.stopCamera(); - -``` diff --git a/versioned_docs/version-v5/native/camera.md b/versioned_docs/version-v5/native/camera.md deleted file mode 100644 index 050cfd7d57b..00000000000 --- a/versioned_docs/version-v5/native/camera.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 'Install Camera | Cordova Plugin Cameras for Ionic Applications' -description: 'Use the Cordova plugin to install a camera and take photos or capture videos in-app with Ionic Framework camera component for supported platforms.' -sidebar_label: 'Camera' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Camera - -Take a photo or capture video. - -Requires the Cordova plugin: `cordova-plugin-camera`. For more info, please see the [Cordova Camera Plugin Docs](https://github.com/apache/cordova-plugin-camera). - -[Warning] Since IOS 10 the camera requires permissions to be placed in your config.xml add - -```xml - - You can take photos - -``` - -inside of the -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-camera {'\n'}$ npm install @awesome-cordova-plugins/camera {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-camera {'\n'}$ npm install @awesome-cordova-plugins/camera {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; - -constructor(private camera: Camera) { } - -... - - -const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.FILE_URI, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE -} - -this.camera.getPicture(options).then((imageData) => { - // imageData is either a base64 encoded string or a file URI - // If it's base64 (DATA_URL): - let base64Image = 'data:image/jpeg;base64,' + imageData; -}, (err) => { - // Handle error -}); -``` diff --git a/versioned_docs/version-v5/native/chooser.md b/versioned_docs/version-v5/native/chooser.md deleted file mode 100644 index 5507a9ddebc..00000000000 --- a/versioned_docs/version-v5/native/chooser.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -sidebar_label: 'Chooser' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Chooser - -File chooser plugin for Cordova. - -The following must be added to config.xml to prevent crashing when selecting large files on Android: - -```xml - - - - - -``` - -

- - - - {' '} - https://github.com/cyph/cordova-plugin-chooser - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-chooser {'\n'}$ npm install @awesome-cordova-plugins/chooser {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-chooser {'\n'}$ npm install @awesome-cordova-plugins/chooser {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Chooser } from '@awesome-cordova-plugins/chooser/ngx'; - - -constructor(private chooser: Chooser) { } - -... - - -this.chooser.getFile() - .then(file => console.log(file ? file.name : 'canceled')) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/clevertap.md b/versioned_docs/version-v5/native/clevertap.md deleted file mode 100644 index b2bbfbe3166..00000000000 --- a/versioned_docs/version-v5/native/clevertap.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -sidebar_label: 'CleverTap' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# CleverTap - -Cordova Plugin that wraps CleverTap SDK for Android and iOS - -

- - - - {' '} - https://github.com/CleverTap/clevertap-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install clevertap-cordova {'\n'}$ npm install @awesome-cordova-plugins/clevertap {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add clevertap-cordova {'\n'}$ npm install @awesome-cordova-plugins/clevertap {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CleverTap } from '@awesome-cordova-plugins/clevertap/ngx'; - -constructor(private clevertap: CleverTap) { } - -``` diff --git a/versioned_docs/version-v5/native/clipboard.md b/versioned_docs/version-v5/native/clipboard.md deleted file mode 100644 index 5edb63e61c2..00000000000 --- a/versioned_docs/version-v5/native/clipboard.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Clipboard' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Clipboard - -Clipboard management plugin for Cordova that supports iOS, Android, and Windows Phone 8. - -

- - - - {' '} - https://github.com/ihadeed/cordova-clipboard - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-clipboard {'\n'}$ npm install @awesome-cordova-plugins/clipboard {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-clipboard {'\n'}$ npm install @awesome-cordova-plugins/clipboard {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Clipboard } from '@awesome-cordova-plugins/clipboard/ngx'; - -constructor(private clipboard: Clipboard) { } - -... - - -this.clipboard.copy('Hello world'); - -this.clipboard.paste().then( - (resolve: string) => { - alert(resolve); - }, - (reject: string) => { - alert('Error: ' + reject); - } - ); - -this.clipboard.clear(); -``` diff --git a/versioned_docs/version-v5/native/cloud-settings.md b/versioned_docs/version-v5/native/cloud-settings.md deleted file mode 100644 index 86b4a0541ea..00000000000 --- a/versioned_docs/version-v5/native/cloud-settings.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'Cloud Settings' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Cloud Settings - -Stores app settings in cloud storage so if the user re-installs the app or installs it on a different device, the settings will be restored and available in the new installation. - -

- - - - {' '} - https://github.com/dpa99c/cordova-plugin-cloud-settings - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-cloud-settings {'\n'}$ npm install @awesome-cordova-plugins/cloud-settings {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-cloud-settings {'\n'}$ npm install @awesome-cordova-plugins/cloud-settings {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CloudSettings } from '@awesome-cordova-plugins/cloud-settings/ngx'; - - -constructor(private cloudSettings: CloudSettings) { } - -... - -this.cloudSettings.exists() - .then((exists: boolean) => console.log("Saved settings exist: " + exists) ) - -this.cloudSettings.load() - .then((settings: any) => this.settings = settings) - .catch((error: any) => console.error(error)); - -this.cloudSettings.save(this.settings) - .then((savedSettings: any) => console.log("Saved settings: " + JSON.stringify(savedSettings))) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/code-push.md b/versioned_docs/version-v5/native/code-push.md deleted file mode 100644 index f5670f40089..00000000000 --- a/versioned_docs/version-v5/native/code-push.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -sidebar_label: 'Code Push' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Code Push - -CodePush plugin for Cordova by Microsoft that supports iOS and Android. - -For more info, please see https://github.com/Dellos7/example-cordova-code-push-plugin - -

- - - - {' '} - https://github.com/Microsoft/cordova-plugin-code-push - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-code-push {'\n'}$ npm install @awesome-cordova-plugins/code-push {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-code-push {'\n'}$ npm install @awesome-cordova-plugins/code-push {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CodePush } from '@awesome-cordova-plugins/code-push/ngx'; - -constructor(private codePush: CodePush) { } - -... - -// note - mostly error & completed methods of observable will not fire -// as syncStatus will contain the current state of the update -this.codePush.sync().subscribe((syncStatus) => console.log(syncStatus)); - -const downloadProgress = (progress) => { console.log(`Downloaded ${progress.receivedBytes} of ${progress.totalBytes}`); } -this.codePush.sync({}, downloadProgress).subscribe((syncStatus) => console.log(syncStatus)); - -``` diff --git a/versioned_docs/version-v5/native/custom-uisdk.md b/versioned_docs/version-v5/native/custom-uisdk.md deleted file mode 100644 index 3a2a278d23c..00000000000 --- a/versioned_docs/version-v5/native/custom-uisdk.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -sidebar_label: 'CustomUISDK' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# CustomUISDK - -This plugin is used to access Paytm's native CustomUISDK framework's apis. - -

- - - - {' '} - https://github.com/paytm/paytm-customuisdk-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-paytm-customuisdk {'\n'}$ npm install @awesome-cordova-plugins/custom-uisdk {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-paytm-customuisdk {'\n'}$ npm install @awesome-cordova-plugins/custom-uisdk {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android, iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { CustomUISDK } from '@awesome-cordova-plugins/custom-uisdk/ngx'; - -constructor(private customuisdk: CustomUISDK) { } - -... -this.customuisdk.functionName('Hello', 123) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); -``` diff --git a/versioned_docs/version-v5/native/deeplinks.md b/versioned_docs/version-v5/native/deeplinks.md deleted file mode 100644 index 2ec5263247a..00000000000 --- a/versioned_docs/version-v5/native/deeplinks.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -sidebar_label: 'Deeplinks' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Deeplinks - -This plugin handles deeplinks on iOS and Android for both custom URL scheme links -and Universal App Links. - -Please read the [ionic plugin deeplinks docs](https://github.com/ionic-team/ionic-plugin-deeplinks) for iOS and Android integration. -You must add `universal-links` to your `config.xml` and set up Apple App Site Association (AASA) for iOS and Asset Links for Android. - -

- - - - {' '} - https://github.com/ionic-team/ionic-plugin-deeplinks - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install ionic-plugin-deeplinks {'\n'}$ npm install @awesome-cordova-plugins/deeplinks {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add ionic-plugin-deeplinks {'\n'}$ npm install @awesome-cordova-plugins/deeplinks {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Deeplinks } from '@awesome-cordova-plugins/deeplinks/ngx'; - -constructor(private deeplinks: Deeplinks) { } - -this.deeplinks.route({ - '/about-us': AboutPage, - '/universal-links-test': AboutPage, - '/products/:productId': ProductPage - }).subscribe(match => { - // match.$route - the route we matched, which is the matched entry from the arguments to route() - // match.$args - the args passed in the link - // match.$link - the full link data - console.log('Successfully matched route', match); - }, nomatch => { - // nomatch.$link - the full link data - console.error('Got a deeplink that didn\'t match', nomatch); - }); -``` - -Alternatively, if you're using Ionic, there's a convenience method that takes a reference to a `NavController` and handles -the actual navigation for you: - -```tsx -this.deeplinks - .routeWithNavController(this.navController, { - '/about-us': AboutPage, - '/products/:productId': ProductPage, - }) - .subscribe( - (match) => { - // match.$route - the route we matched, which is the matched entry from the arguments to route() - // match.$args - the args passed in the link - // match.$link - the full link data - console.log('Successfully matched route', match); - }, - (nomatch) => { - // nomatch.$link - the full link data - console.error("Got a deeplink that didn't match", nomatch); - } - ); -``` - -See the [Ionic Deeplinks Demo](https://github.com/ionic-team/ionic2-deeplinks-demo/blob/master/app/app.ts) for an example of how to -retrieve the `NavController` reference at runtime. diff --git a/versioned_docs/version-v5/native/device-accounts.md b/versioned_docs/version-v5/native/device-accounts.md deleted file mode 100644 index 979065ce55d..00000000000 --- a/versioned_docs/version-v5/native/device-accounts.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -sidebar_label: 'Device Accounts' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Device Accounts - -Gets the Google accounts associated with the Android device - -

- - - - {' '} - https://github.com/xUnholy/cordova-device-accounts-v2 - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-device-accounts-v2 {'\n'}$ npm install @awesome-cordova-plugins/device-accounts {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-device-accounts-v2 {'\n'}$ npm install @awesome-cordova-plugins/device-accounts {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DeviceAccounts } from '@awesome-cordova-plugins/device-accounts/ngx'; - -constructor(private deviceAccounts: DeviceAccounts) { } - -... - -this.deviceAccounts.get() - .then(accounts => console.log(accounts)) - .catch(error => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/device-motion.md b/versioned_docs/version-v5/native/device-motion.md deleted file mode 100644 index 4c930da66d9..00000000000 --- a/versioned_docs/version-v5/native/device-motion.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -sidebar_label: 'Device Motion' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Device Motion - -Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please see the [Device Motion docs](https://github.com/apache/cordova-plugin-device-motion). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-device-motion - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-device-motion {'\n'}$ npm install @awesome-cordova-plugins/device-motion {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-device-motion {'\n'}$ npm install @awesome-cordova-plugins/device-motion {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- BlackBerry 10 -- Browser -- Firefox OS -- iOS -- Tizen -- Ubuntu -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DeviceMotion, DeviceMotionAccelerationData } from '@awesome-cordova-plugins/device-motion/ngx'; - -constructor(private deviceMotion: DeviceMotion) { } - -... - -// Get the device current acceleration -this.deviceMotion.getCurrentAcceleration().then( - (acceleration: DeviceMotionAccelerationData) => console.log(acceleration), - (error: any) => console.log(error) -); - -// Watch device acceleration -var subscription = this.deviceMotion.watchAcceleration().subscribe((acceleration: DeviceMotionAccelerationData) => { - console.log(acceleration); -}); - -// Stop watch -subscription.unsubscribe(); - -``` diff --git a/versioned_docs/version-v5/native/device-orientation.md b/versioned_docs/version-v5/native/device-orientation.md deleted file mode 100644 index 5372aacbc7f..00000000000 --- a/versioned_docs/version-v5/native/device-orientation.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -sidebar_label: 'Device Orientation' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Device Orientation - -Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, please see the [Device Orientation docs](https://github.com/apache/cordova-plugin-device-orientation). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-device-orientation - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-device-orientation {'\n'}$ npm install @awesome-cordova-plugins/device-orientation {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-device-orientation {'\n'}$ npm install @awesome-cordova-plugins/device-orientation {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- BlackBerry 10 -- Browser -- Firefox OS -- iOS -- Tizen -- Ubuntu -- Windows -- Windows Phone - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -// DeviceOrientationCompassHeading is an interface for compass -import { DeviceOrientation, DeviceOrientationCompassHeading } from '@awesome-cordova-plugins/device-orientation/ngx'; - -constructor(private deviceOrientation: DeviceOrientation) { } - -... - -// Get the device current compass heading -this.deviceOrientation.getCurrentHeading().then( - (data: DeviceOrientationCompassHeading) => console.log(data), - (error: any) => console.log(error) -); - -// Watch the device compass heading change -var subscription = this.deviceOrientation.watchHeading().subscribe( - (data: DeviceOrientationCompassHeading) => console.log(data) -); - -// Stop watching heading change -subscription.unsubscribe(); -``` diff --git a/versioned_docs/version-v5/native/device.md b/versioned_docs/version-v5/native/device.md deleted file mode 100644 index 9ae2a624690..00000000000 --- a/versioned_docs/version-v5/native/device.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -sidebar_label: 'Device' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Device - -Access information about the underlying device and platform. - -

- - - - {' '} - https://github.com/apache/cordova-plugin-device - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-device {'\n'}$ npm install @awesome-cordova-plugins/device {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-device {'\n'}$ npm install @awesome-cordova-plugins/device {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- macOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Device } from '@awesome-cordova-plugins/device/ngx'; - -constructor(private device: Device) { } - -... - -console.log('Device UUID is: ' + this.device.uuid); -``` diff --git a/versioned_docs/version-v5/native/dfu-update.md b/versioned_docs/version-v5/native/dfu-update.md deleted file mode 100644 index ef695e885e7..00000000000 --- a/versioned_docs/version-v5/native/dfu-update.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_label: 'Dfu Update' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Dfu Update - -This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (DFU) service to update a Bluetooth LE device. - -

- - - - {' '} - https://github.com/EinfachHans/cordova-plugin-dfu-update - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-dfu-update {'\n'}$ npm install @awesome-cordova-plugins/dfu-update {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-dfu-update {'\n'}$ npm install @awesome-cordova-plugins/dfu-update {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DfuUpdate } from '@awesome-cordova-plugins/dfu-update/ngx'; - - -constructor(private dfuUpdate: DfuUpdate) { } - -... - - -this.dfuUpdate.updateFirmware('fileURL', 'deviceIdentifier') - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/diagnostic.md b/versioned_docs/version-v5/native/diagnostic.md deleted file mode 100644 index 9c1b543e4ce..00000000000 --- a/versioned_docs/version-v5/native/diagnostic.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'Diagnostic' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Diagnostic - -Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi - -

- - - - {' '} - https://github.com/dpa99c/cordova-diagnostic-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova.plugins.diagnostic {'\n'}$ npm install @awesome-cordova-plugins/diagnostic {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova.plugins.diagnostic {'\n'}$ npm install @awesome-cordova-plugins/diagnostic {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx'; - -constructor(private diagnostic: Diagnostic) { } - -... - -let successCallback = (isAvailable) => { console.log('Is available? ' + isAvailable); } -let errorCallback = (e) => console.error(e); - -this.diagnostic.isCameraAvailable().then(successCallback).catch(errorCallback); - -this.diagnostic.isBluetoothAvailable().then(successCallback, errorCallback); - - -this.diagnostic.getBluetoothState() - .then((state) => { - if (state == this.diagnostic.bluetoothState.POWERED_ON){ - // do something - } else { - // do something else - } - }).catch(e => console.error(e)); - -``` diff --git a/versioned_docs/version-v5/native/dialogs.md b/versioned_docs/version-v5/native/dialogs.md deleted file mode 100644 index cb77e6c4b9a..00000000000 --- a/versioned_docs/version-v5/native/dialogs.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Dialogs' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Dialogs - -This plugin gives you ability to access and customize the device native dialogs. - -Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the [Dialogs plugin docs](https://github.com/apache/cordova-plugin-dialogs). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-dialogs - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-dialogs {'\n'}$ npm install @awesome-cordova-plugins/dialogs {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-dialogs {'\n'}$ npm install @awesome-cordova-plugins/dialogs {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Dialogs } from '@awesome-cordova-plugins/dialogs/ngx'; - -constructor(private dialogs: Dialogs) { } - -... - -this.dialogs.alert('Hello world') - .then(() => console.log('Dialog dismissed')) - .catch(e => console.log('Error displaying dialog', e)); - - -``` diff --git a/versioned_docs/version-v5/native/dns.md b/versioned_docs/version-v5/native/dns.md deleted file mode 100644 index fad27bc436a..00000000000 --- a/versioned_docs/version-v5/native/dns.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -sidebar_label: 'DNS' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# DNS - -A plugin for Apache Cordova that enables applications to manually resolve hostnames into an underlying network address. This is mostly useful for determining whether there is a problem with the device's DNS server configuration. - -

- - - - {' '} - https://bitbucket.org/zegeba/cordova-plugin-dns - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-dns {'\n'}$ npm install @awesome-cordova-plugins/dns {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-dns {'\n'}$ npm install @awesome-cordova-plugins/dns {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DNS } from '@awesome-cordova-plugins/dns/ngx'; - - -constructor(private dns: DNS) { } - -... -this.dns.resolve(hostname) - .then( - address => console.log('Resolved ' + hostname + ' to ' + address), - error => console.log('Failed to resolve ' + hostname + ': ' + error) - ); - -``` diff --git a/versioned_docs/version-v5/native/document-picker.md b/versioned_docs/version-v5/native/document-picker.md deleted file mode 100644 index 0879421357d..00000000000 --- a/versioned_docs/version-v5/native/document-picker.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'iOS DocumentPicker' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# iOS DocumentPicker - -Opens the file picker on iOS for the user to select a file, returns a file URI. -Allows the user to upload files from iCloud - -

- - - - {' '} - https://github.com/iampossible/Cordova-DocPicker - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-documentpicker.DocumentPicker {'\n'}$ npm install @awesome-cordova-plugins/document-picker { - '\n' - }$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-documentpicker.DocumentPicker {'\n'}$ npm install @awesome-cordova-plugins/document-picker{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DocumentPicker } from '@awesome-cordova-plugins/document-picker/ngx'; - -constructor(private docPicker: DocumentPicker) { } - -... - -this.docPicker.getFile('all') - .then(uri => console.log(uri)) - .catch(e => console.log(e)); - -``` diff --git a/versioned_docs/version-v5/native/document-scanner.md b/versioned_docs/version-v5/native/document-scanner.md deleted file mode 100644 index efed6e8540f..00000000000 --- a/versioned_docs/version-v5/native/document-scanner.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Document Scanner' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Document Scanner - -This plugin processes images of documents, compensating for perspective. - -

- - - - {' '} - https://github.com/NeutrinosPlatform/cordova-plugin-document-scanner - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-document-scanner {'\n'}$ npm install @awesome-cordova-plugins/document-scanner {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DocumentScanner, DocumentScannerOptions } from '@awesome-cordova-plugins/document-scanner'; - - -constructor(private documentScanner: DocumentScanner) { } - -... - -let opts: DocumentScannerOptions = {}; -this.documentScanner.scanDocument(opts) - .then((res: string) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/document-viewer.md b/versioned_docs/version-v5/native/document-viewer.md deleted file mode 100644 index 833c3d5b7f1..00000000000 --- a/versioned_docs/version-v5/native/document-viewer.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: 'Document Viewer | Cordova Plugin Document Viewer for PDF Files' -description: 'Cordova plugin document viewer offers a slim API to view PDF files either stored in the apps assets folder or in any other file system directory available.' -sidebar_label: 'Document Viewer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Document Viewer - -This plugin offers a slim API to view PDF files which are either stored in the apps assets folder (/www/\*) or in any other file system directory available via the cordova file plugin. - -

- - - - {' '} - https://github.com/sitewaerts/cordova-plugin-document-viewer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-document-viewer {'\n'}$ npm install @awesome-cordova-plugins/document-viewer {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-document-viewer {'\n'}$ npm install @awesome-cordova-plugins/document-viewer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx'; - - -constructor(private document: DocumentViewer) { } - -... -const options: DocumentViewerOptions = { - title: 'My PDF' -} - -this.document.viewDocument('assets/myFile.pdf', 'application/pdf', options) - -``` diff --git a/versioned_docs/version-v5/native/email-composer.md b/versioned_docs/version-v5/native/email-composer.md deleted file mode 100644 index 7524900b7dc..00000000000 --- a/versioned_docs/version-v5/native/email-composer.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -sidebar_label: 'Email Composer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Email Composer - -Requires Cordova plugin: cordova-plugin-email-composer. For more info, please see the [Email Composer plugin docs](https://github.com/hypery2k/cordova-email-plugin). - -

- - - - {' '} - https://github.com/katzer/cordova-plugin-email-composer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-email-composer {'\n'}$ npm install @awesome-cordova-plugins/email-composer {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-email-composer {'\n'}$ npm install @awesome-cordova-plugins/email-composer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- Browser -- iOS -- Windows -- macOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { EmailComposer } from '@awesome-cordova-plugins/email-composer/ngx'; - -constructor(private emailComposer: EmailComposer) { } - -... - - -this.emailComposer.getClients().then((apps: []) => { - // Returns an array of configured email clients for the device -}); - -this.emailComposer.hasClient().then(app, (isValid: boolean) => { - if (isValid) { - // Now we know we have a valid email client configured - // Not specifying an app will return true if at least one email client is configured - } -}); - -this.emailComposer.hasAccount().then((isValid: boolean) => { - if (isValid) { - // Now we know we have a valid email account configured - } -}); - -this.emailComposer.isAvailable().then(app, (available: boolean) => { - if(available) { - // Now we know we can send an email, calls hasClient and hasAccount - // Not specifying an app will return true if at least one email client is configured - } -}); - -let email = { - to: 'max@mustermann.de', - cc: 'erika@mustermann.de', - bcc: ['john@doe.com', 'jane@doe.com'], - attachments: [ - 'file://img/logo.png', - 'res://icon.png', - 'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...', - 'file://README.pdf' - ], - subject: 'Cordova Icons', - body: 'How are you? Nice greetings from Leipzig', - isHtml: true -} - -// Send a text message using default options -this.emailComposer.open(email); -``` - -You can also assign aliases to email apps - -```ts -// add alias -this.email.addAlias('gmail', 'com.google.android.gm'); - -// then use alias when sending email -this.email.open({ - app: 'gmail', - ... -}); -``` diff --git a/versioned_docs/version-v5/native/fabric.md b/versioned_docs/version-v5/native/fabric.md deleted file mode 100644 index dc470da2e44..00000000000 --- a/versioned_docs/version-v5/native/fabric.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -sidebar_label: 'Answers' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Answers - -API for interacting with the Answers kit. - -https://docs.fabric.io/crashlytics/index.html - -

- - - - {' '} - https://www.npmjs.com/package/cordova-fabric-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-fabric-plugin {'\n'}$ npm install @awesome-cordova-plugins/fabric {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-fabric-plugin {'\n'}$ npm install @awesome-cordova-plugins/fabric {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Answers } from '@awesome-cordova-plugins/fabric/ngx'; - - -constructor(private answers: Answers) { } - -... - -this.answers.sendCustomEvent('SomeCustomEvent', { some: "attributes" }) - -``` diff --git a/versioned_docs/version-v5/native/facebook.md b/versioned_docs/version-v5/native/facebook.md deleted file mode 100644 index c69b2f6c081..00000000000 --- a/versioned_docs/version-v5/native/facebook.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: 'Facebook Connect Plugin | Facebook Docs in Ionic Documentation' -description: "Ionic Documentation's Facebook Docs explain how to use the Facebook Connect Cordova Plugin to obtain access to the native FB application on iOS and Android." -sidebar_label: 'Facebook' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Facebook - -Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android. - -Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, please see the [Facebook Connect](https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect). - -#### Installation - -To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps). - -[![fb-getstarted-1](/img/docs/native/Facebook/1.png)](https://developers.facebook.com/apps/) - -Retrieve the `App ID` and `App Name`. - -[![fb-getstarted-2](/img/docs/native/Facebook/2.png)](https://developers.facebook.com/apps/) - -Then type in the following command in your Terminal, where APP_ID and APP_NAME are the values from the Facebook Developer portal. - -```bash - ionic cordova plugin add cordova-plugin-facebook-connect --variable APP_ID="123456789" --variable APP_NAME="myApplication" -``` - -After, you'll need to add the native platforms you'll be using to your app in the Facebook Developer portal under your app's Settings: - -[![fb-getstarted-3](/img/docs/native/Facebook/3.png)](https://developers.facebook.com/apps/) - -Click `'Add Platform'`. - -[![fb-getstarted-4](/img/docs/native/Facebook/4.png)](https://developers.facebook.com/apps/) - -At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project. - -Take note of the `id` for the next step: - -``` - -``` - -You can also edit the `id` to whatever you'd like it to be. - -#### iOS Install - -Under 'Bundle ID', add the `id` from your `config.xml` file: - -[![fb-getstarted-5](/img/docs/native/Facebook/5.png)](https://developers.facebook.com/apps/) - -#### Android Install - -Under 'Google Play Package Name', add the `id` from your `config.xml` file: - -[![fb-getstarted-6](/img/docs/native/Facebook/6.png)](https://developers.facebook.com/apps/) - -And that's it! You can now make calls to Facebook using the plugin. - -## Events - -App events allow you to understand the makeup of users engaging with your app, measure the performance of your Facebook mobile app ads, and reach specific sets of your users with Facebook mobile app ads. - -- [iOS] [https://developers.facebook.com/docs/ios/app-events](https://developers.facebook.com/docs/ios/app-events) -- [Android] [https://developers.facebook.com/docs/android/app-events](https://developers.facebook.com/docs/android/app-events) -- [JS] Does not have an Events API, so the plugin functions are empty and will return an automatic success - -Activation events are automatically tracked for you in the plugin. - -Events are listed on the [insights page](https://www.facebook.com/insights/). - -For tracking events, see `logEvent` and `logPurchase`. - -

- - - - {' '} - https://github.com/cordova-plugin-facebook-connect/cordova-plugin-facebook-connect - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-facebook-connect {'\n'}$ npm install @awesome-cordova-plugins/facebook {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-facebook-connect {'\n'}$ npm install @awesome-cordova-plugins/facebook {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Browser - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Facebook, FacebookLoginResponse } from '@awesome-cordova-plugins/facebook/ngx'; - -constructor(private fb: Facebook) { } - -... - -this.fb.login(['public_profile', 'user_friends', 'email']) - .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res)) - .catch(e => console.log('Error logging into Facebook', e)); - - -this.fb.logEvent(this.fb.EVENTS.EVENT_NAME_ADDED_TO_CART); - -``` diff --git a/versioned_docs/version-v5/native/fcm.md b/versioned_docs/version-v5/native/fcm.md deleted file mode 100644 index cae65356b68..00000000000 --- a/versioned_docs/version-v5/native/fcm.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 'FCM | FCM Push Notification Plugin for Firebase Cloud Messaging' -description: 'The FCM push notification plugin provides basic functionality for Firebase Cloud Messaging. Read and learn more about the Cordova FCM Plugin for Ionic Apps.' -sidebar_label: 'FCM' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# FCM - -Provides basic functionality for Firebase Cloud Messaging - -

- - - - {' '} - https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-fcm-with-dependecy-updated {'\n'}$ npm install @awesome-cordova-plugins/fcm {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated {'\n'}$ npm install @awesome-cordova-plugins/fcm {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FCM } from '@awesome-cordova-plugins/fcm/ngx'; - -constructor(private fcm: FCM) {} - -... - -this.fcm.subscribeToTopic('marketing'); - -this.fcm.getToken().then(token => { - backend.registerToken(token); -}); - -this.fcm.onNotification().subscribe(data => { - if(data.wasTapped){ - console.log("Received in background"); - } else { - console.log("Received in foreground"); - }; -}); - -this.fcm.onTokenRefresh().subscribe(token => { - backend.registerToken(token); -}); - -this.fcm.hasPermission().then(hasPermission => { - if (hasPermission) { - console.log("Has permission!"); - } -}) - -this.fcm.clearAllNotifications(); - -this.fcm.unsubscribeFromTopic('marketing'); - -``` diff --git a/versioned_docs/version-v5/native/file-opener.md b/versioned_docs/version-v5/native/file-opener.md deleted file mode 100644 index 37feef87b69..00000000000 --- a/versioned_docs/version-v5/native/file-opener.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'File Opener' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# File Opener - -This plugin will open a file on your device file system with its default application. - -

- - - - {' '} - https://github.com/pwlin/cordova-plugin-file-opener2 - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-file-opener2 {'\n'}$ npm install @awesome-cordova-plugins/file-opener {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-file-opener2 {'\n'}$ npm install @awesome-cordova-plugins/file-opener {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx'; - -constructor(private fileOpener: FileOpener) { } - -... - -this.fileOpener.open('path/to/file.pdf', 'application/pdf') - .then(() => console.log('File is opened')) - .catch(e => console.log('Error opening file', e)); - -this.fileOpener.showOpenWithDialog('path/to/file.pdf', 'application/pdf') - .then(() => console.log('File is opened')) - .catch(e => console.log('Error opening file', e)); - -``` diff --git a/versioned_docs/version-v5/native/file-path.md b/versioned_docs/version-v5/native/file-path.md deleted file mode 100644 index 8ebf84748a4..00000000000 --- a/versioned_docs/version-v5/native/file-path.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -sidebar_label: 'File Path' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# File Path - -This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library. - -

- - - - {' '} - https://github.com/hiddentao/cordova-plugin-filepath - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-filepath {'\n'}$ npm install @awesome-cordova-plugins/file-path {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-filepath {'\n'}$ npm install @awesome-cordova-plugins/file-path {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FilePath } from '@awesome-cordova-plugins/file-path/ngx'; - -constructor(private filePath: FilePath) { } - -... - -this.filePath.resolveNativePath(path) - .then(filePath => console.log(filePath)) - .catch(err => console.log(err)); - -``` diff --git a/versioned_docs/version-v5/native/file-transfer.md b/versioned_docs/version-v5/native/file-transfer.md deleted file mode 100644 index 67075ace785..00000000000 --- a/versioned_docs/version-v5/native/file-transfer.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: "File Transfer | Cordova Docs File Transfer Download Plugin" -description: "The Cordova File Transfer plug in allows you to upload and download docs files. This plugin is supported on iOS, Android, Windows, and more platforms." -sidebar_label: "File Transfer -" ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# File Transfer - -This plugin allows you to upload and download files. - -

- - - - {' '} - https://github.com/apache/cordova-plugin-file-transfer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-file-transfer {'\n'}$ npm install @awesome-cordova-plugins/file-transfer {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-file-transfer {'\n'}$ npm install @awesome-cordova-plugins/file-transfer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- Browser -- iOS -- Ubuntu -- Windows -- Windows Phone - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FileTransfer, FileUploadOptions, FileTransferObject } from '@awesome-cordova-plugins/file-transfer/ngx'; -import { File } from '@awesome-cordova-plugins/file'; - -constructor(private transfer: FileTransfer, private file: File) { } - -... - -const fileTransfer: FileTransferObject = this.transfer.create(); - -// Upload a file: -fileTransfer.upload(..).then(..).catch(..); - -// Download a file: -fileTransfer.download(..).then(..).catch(..); - -// Abort active transfer: -fileTransfer.abort(); - -// full example -upload() { - let options: FileUploadOptions = { - fileKey: 'file', - fileName: 'name.jpg', - headers: {} - ..... - } - - fileTransfer.upload('<file path>', '<api endpoint>', options) - .then((data) => { - // success - }, (err) => { - // error - }) -} - -download() { - const url = 'http://www.example.com/file.pdf'; - fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => { - console.log('download complete: ' + entry.toURL()); - }, (error) => { - // handle error - }); -} - -``` - -To store files in a different/publicly accessible directory, please refer to the following link -https://github.com/apache/cordova-plugin-file#where-to-store-files diff --git a/versioned_docs/version-v5/native/file.md b/versioned_docs/version-v5/native/file.md deleted file mode 100644 index 9086f867ba2..00000000000 --- a/versioned_docs/version-v5/native/file.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 'File API Plugin for Read and Write File Access on Devices' -description: 'The File API plugin allows read/write access to files residing on the device and implements static convenience functions to access files and directories.' -sidebar_label: 'File' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# File - -This plugin implements a File API allowing read/write access to files residing on the device. - -The File class implements static convenience functions to access files and directories. - -Example: - -``` -import { File } from '@awesome-cordova-plugins/file/ngx'; - -constructor(private file: File) { } - -... - -this.file.checkDir(this.file.dataDirectory, 'mydir').then(_ => console.log('Directory exists')).catch(err => - console.log('Directory doesn't exist')); - -``` - -This plugin is based on several specs, including : The HTML5 File API http: //www.w3.org/TR/FileAPI/ -The (now-defunct) Directories and System extensions Latest: http: //www.w3.org/TR/2012/WD-file-system-api-20120417/ -Although most of the plugin code was written when an earlier spec was current: http: -//www.w3.org/TR/2011/WD-file-system-api-20110419/ It also implements the FileWriter spec : http: -//dev.w3.org/2009/dap/file-system/file-writer.html - -

- - - - {' '} - https://github.com/apache/cordova-plugin-file - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-file {'\n'}$ npm install @awesome-cordova-plugins/file {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-file {'\n'}$ npm install @awesome-cordova-plugins/file {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- macOS -- Windows diff --git a/versioned_docs/version-v5/native/firebase-analytics.md b/versioned_docs/version-v5/native/firebase-analytics.md deleted file mode 100644 index d1ab0eda1ce..00000000000 --- a/versioned_docs/version-v5/native/firebase-analytics.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -sidebar_label: 'Firebase Analytics' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Analytics - -Cordova plugin for Firebase Analytics - -Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder. - -NOTE: on iOS in order to collect demographic, age, gender data etc. you should additionally include AdSupport.framework into your project. - -## Using capacitor? - -For Android you'll have to add in **android/app/src/main/AndroidManfiest.xml** under `` - -``` - - - -``` - -And in the same file, you'll have to add `xmlns:tools="http://schemas.android.com/tools"` to your _manifest_ tag. - -

- - - - {' '} - https://github.com/chemerisuk/cordova-plugin-firebase-analytics - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-analytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-analytics {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-analytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-analytics {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseAnalytics } from '@awesome-cordova-plugins/firebase-analytics/ngx'; - - -constructor(private firebaseAnalytics: FirebaseAnalytics) { } - -... - -this.firebaseAnalytics.logEvent('page_view', {page: "dashboard"}) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/firebase-authentication.md b/versioned_docs/version-v5/native/firebase-authentication.md deleted file mode 100644 index 7e1af9f1a55..00000000000 --- a/versioned_docs/version-v5/native/firebase-authentication.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Firebase Authentication' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Authentication - -Cordova plugin for Firebase Authentication - -

- - - - {' '} - https://github.com/chemerisuk/cordova-plugin-firebase-authentication - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-authentication {'\n'}$ npm install @awesome-cordova-plugins/firebase-authentication { - '\n' - }$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-authentication {'\n'}$ npm install @awesome-cordova-plugins/firebase-authentication{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseAuthentication } from '@awesome-cordova-plugins/firebase-authentication/ngx'; - - -constructor(private firebaseAuthentication: FirebaseAuthentication) { } - -... - - -this.firebaseAuthentication.createUserWithEmailAndPassword('test@gmail.com', '123') - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/firebase-config.md b/versioned_docs/version-v5/native/firebase-config.md deleted file mode 100644 index 6de55540857..00000000000 --- a/versioned_docs/version-v5/native/firebase-config.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Firebase Config' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Config - -Cordova plugin for Firebase Config - -

- - - - {' '} - https://github.com/chemerisuk/cordova-plugin-firebase-config - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-config {'\n'}$ npm install @awesome-cordova-plugins/firebase-config {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-config {'\n'}$ npm install @awesome-cordova-plugins/firebase-config {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseConfig } from '@awesome-cordova-plugins/firebase-config/ngx'; - - -constructor(private firebaseConfig: FirebaseConfig) { } - -... - - -this.firebaseConfig.getBoolean('my_key') - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/firebase-crash.md b/versioned_docs/version-v5/native/firebase-crash.md deleted file mode 100644 index c21c8a98627..00000000000 --- a/versioned_docs/version-v5/native/firebase-crash.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'FirebaseCrash' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# FirebaseCrash - -This plugin brings crash reporting from Google Firebase to your Cordova project! Android and iOS supported. - -

- - - - {' '} - https://github.com/chemerisuk/cordova-plugin-firebase-crash - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-crash {'\n'}$ npm install @awesome-cordova-plugins/firebase-crash {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-crash {'\n'}$ npm install @awesome-cordova-plugins/firebase-crash {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseCrash } from '@awesome-cordova-plugins/firebase-crash'; - -constructor(private firebaseCrash: FirebaseCrash) { } - -... - -this.firebaseCrash.setUserId('123456789'); -this.firebaseCrash.log('message'); -this.firebaseCrash.logError('non fatal exception'); - -``` diff --git a/versioned_docs/version-v5/native/firebase-crashlytics.md b/versioned_docs/version-v5/native/firebase-crashlytics.md deleted file mode 100644 index 58a86b10841..00000000000 --- a/versioned_docs/version-v5/native/firebase-crashlytics.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Firebase Crashlytics' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Crashlytics - -A Google Firebase Crashlytics plugin to enable capture of crash reports. - -

- - - - {' '} - https://github.com/ReallySmallSoftware/cordova-plugin-firebase-crashlytics - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-crashlytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-crashlytics {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-crashlytics {'\n'}$ npm install @awesome-cordova-plugins/firebase-crashlytics{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseCrashlytics } from '@awesome-cordova-plugins/firebase-crashlytics/ngx'; - - -constructor(private firebaseCrashlytics: FirebaseCrashlytics) { } - -... - - -const crashlytics = this.firebaseCrashlytics.initialise(); -crashlytics.logException('my caught exception'); - -``` diff --git a/versioned_docs/version-v5/native/firebase-dynamic-links.md b/versioned_docs/version-v5/native/firebase-dynamic-links.md deleted file mode 100644 index 6e670973330..00000000000 --- a/versioned_docs/version-v5/native/firebase-dynamic-links.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -sidebar_label: 'Firebase Dynamic Links' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Dynamic Links - -Cordova plugin for Firebase Dynamic Links - -Variables APP_DOMAIN and APP_PATH specify web URL where your app will start an activity to handle the link. They also used to setup support for App Indexing. -Go to firebase console and export google-services.json and GoogleService-Info.plist. Put those files into the root of your cordova app folder. - -Preferences: - -Preferences GoogleIOSClientId and GoogleAndroidClientId are used to setup dynamic links when you have an app for several platforms. -You can find values at your GoogleService-Info.plist (key ANDROID_CLIENT_ID) and google-services.json (key client[0].oauth_client[0].client_id). - -config.xml: - -```xml - - - - - - -``` - -

- - - - {' '} - https://github.com/chemerisuk/cordova-plugin-firebase-dynamiclinks - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-dynamiclinks {'\n'}$ npm install @awesome-cordova-plugins/firebase-dynamic-links {'\n'} - $ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-dynamiclinks {'\n'}$ npm install @awesome-cordova-plugins/firebase-dynamic-links{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseDynamicLinks } from '@awesome-cordova-plugins/firebase-dynamic-links/ngx'; - - -constructor(private firebaseDynamicLinks: FirebaseDynamicLinks) { } - -... -// Handle the logic here after opening the app with the Dynamic link -this.firebaseDynamicLinks.onDynamicLink() - .subscribe((res: any) => console.log(res), (error:any) => console.log(error)); -``` diff --git a/versioned_docs/version-v5/native/firebase-messaging.md b/versioned_docs/version-v5/native/firebase-messaging.md deleted file mode 100644 index 4a15c2f1e8f..00000000000 --- a/versioned_docs/version-v5/native/firebase-messaging.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Firebase Messaging' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Messaging - -Cordova plugin for Firebase Messaging - -

- - - - {' '} - https://github.com/chemerisuk/cordova-plugin-firebase-messaging - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-messaging {'\n'}$ npm install @awesome-cordova-plugins/firebase-messaging {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-messaging {'\n'}$ npm install @awesome-cordova-plugins/firebase-messaging {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseMessaging } from '@awesome-cordova-plugins/firebase-messaging/ngx'; - - -constructor(private firebaseMessaging: FirebaseMessaging) { } - -... - - -this.firebaseMessaging.logEvent('page_view', {page: "dashboard"}) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/firebase-vision.md b/versioned_docs/version-v5/native/firebase-vision.md deleted file mode 100644 index e8764009a89..00000000000 --- a/versioned_docs/version-v5/native/firebase-vision.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -sidebar_label: 'Firebase Vision' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase Vision - -Cordova plugin for Firebase MLKit Vision - -

- - - - {' '} - https://github.com/alon22/cordova-plugin-firebase-mlvision - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase-mlvision {'\n'}$ npm install @awesome-cordova-plugins/firebase-vision {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseVision } from '@awesome-cordova-plugins/firebase-vision/ngx'; - - -constructor(private firebaseVision: FirebaseVision) { } - -... - - -this.firebaseVision.onDeviceTextRecognizer(FILE_URI) - .then((res: string) => console.log(res)) - .catch((error: string) => console.error(error)); - -this.firebaseVision.barcodeDetector(FILE_URI) - .then((res: Barcode[]) => console.log(res)) - .catch((error: string) => console.error(error)); - -this.firebaseVision.imageLabeler(FILE_URI) - .then((res: ImageLabel[]) => console.log(res)) - .catch((error: string) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/firebase-x.md b/versioned_docs/version-v5/native/firebase-x.md deleted file mode 100644 index 0f3621a450a..00000000000 --- a/versioned_docs/version-v5/native/firebase-x.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Firebase X' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase X - -This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported. -It is a maintained fork from unmaintained ionic-navite plugin called Firebase. - -

- - - - {' '} - https://github.com/dpa99c/cordova-plugin-firebasex - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebasex {'\n'}$ npm install @awesome-cordova-plugins/firebase-x {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebasex {'\n'}$ npm install @awesome-cordova-plugins/firebase-x {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FirebaseX } from '@awesome-cordova-plugins/firebase-x/ngx'; - - -constructor(private firebaseX: FirebaseX) { } - -... - - -this.firebaseX.getToken() - .then(token => console.log(`The token is ${token}`)) // save the token server-side and use it to push notifications to this device - .catch(error => console.error('Error getting token', error)); - -this.firebaseX.onMessageReceived() - .subscribe(data => console.log(`User opened a notification ${data}`)); - -this.firebaseX.onTokenRefresh() - .subscribe((token: string) => console.log(`Got a new token ${token}`)); -``` diff --git a/versioned_docs/version-v5/native/firebase.md b/versioned_docs/version-v5/native/firebase.md deleted file mode 100644 index 6f91a5cd3eb..00000000000 --- a/versioned_docs/version-v5/native/firebase.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Firebase' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Firebase - -This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported (including iOS 10). - -

- - - - {' '} - https://github.com/arnesson/cordova-plugin-firebase - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-firebase {'\n'}$ npm install @awesome-cordova-plugins/firebase {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-firebase {'\n'}$ npm install @awesome-cordova-plugins/firebase {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Firebase } from '@awesome-cordova-plugins/firebase/ngx'; - -constructor(private firebase: Firebase) { } - -... - -this.firebase.getToken() - .then(token => console.log(`The token is ${token}`)) // save the token server-side and use it to push notifications to this device - .catch(error => console.error('Error getting token', error)); - -this.firebase.onNotificationOpen() - .subscribe(data => console.log(`User opened a notification ${data}`)); - -this.firebase.onTokenRefresh() - .subscribe((token: string) => console.log(`Got a new token ${token}`)); - -``` diff --git a/versioned_docs/version-v5/native/flashlight.md b/versioned_docs/version-v5/native/flashlight.md deleted file mode 100644 index eb27bec159e..00000000000 --- a/versioned_docs/version-v5/native/flashlight.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Flashlight' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Flashlight - -This plugin allows you to switch the flashlight / torch of the device on and off. - -Requires Cordova plugin: `cordova-plugin-flashlight`. For more info, please see the [Flashlight plugin docs](https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin). - -

- - - - {' '} - https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-flashlight {'\n'}$ npm install @awesome-cordova-plugins/flashlight {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-flashlight {'\n'}$ npm install @awesome-cordova-plugins/flashlight {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Flashlight } from '@awesome-cordova-plugins/flashlight/ngx'; - -constructor(private flashlight: Flashlight) { } - -... - -this.flashlight.switchOn(); - -``` diff --git a/versioned_docs/version-v5/native/foreground-service.md b/versioned_docs/version-v5/native/foreground-service.md deleted file mode 100644 index 30b5ce957e7..00000000000 --- a/versioned_docs/version-v5/native/foreground-service.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -sidebar_label: 'Foreground Service' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Foreground Service - -This plugin allows for android devices to continue running services in the background, using a -foreground ongoing notification. This is targeted towards use with plugins such as -'cordova-geolocation' that will not run while the app is in the background on android API 26+. - -For android API 28+, the following xml snippet should be inserted into `config.xml`: - -``` -... - - - - - ... -``` - -

- - - - {' '} - https://github.com/DavidBriglio/cordova-plugin-foreground-service - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-foreground-service {'\n'}$ npm install @awesome-cordova-plugins/foreground-service {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-foreground-service {'\n'}$ npm install @awesome-cordova-plugins/foreground-service {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ForegroundService } from '@awesome-cordova-plugins/foreground-service/ngx'; - - -constructor(public foregroundService: ForegroundService) { } - -... - -startService() { - // Notification importance is optional, the default is 1 - Low (no sound or vibration) - this.foregroundService.start('GPS Running', 'Background Service', 'drawable/fsicon'); -} - -stopService() { - // Disable the foreground service - this.foregroundService.stop(); -} - -``` diff --git a/versioned_docs/version-v5/native/ftp.md b/versioned_docs/version-v5/native/ftp.md deleted file mode 100644 index 43bd196c271..00000000000 --- a/versioned_docs/version-v5/native/ftp.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'FTP' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# FTP - -This cordova plugin is created to use ftp (client) in web/js. - -

- - - - {' '} - https://github.com/xfally/cordova-plugin-ftp - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ftp {'\n'}$ npm install @awesome-cordova-plugins/ftp {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ftp {'\n'}$ npm install @awesome-cordova-plugins/ftp {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { FTP } from '@awesome-cordova-plugins/ftp/ngx'; - - -constructor(private fTP: FTP) { } - -... - - -this.fTP.connect('ftp_host', 'ftp_user', 'ftp_password') - .then((res: any) => console.log('Login successful', res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/gao-de-location.md b/versioned_docs/version-v5/native/gao-de-location.md deleted file mode 100644 index a101681e953..00000000000 --- a/versioned_docs/version-v5/native/gao-de-location.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -sidebar_label: 'Gao De Location' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Gao De Location - -Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned. -Gaode location can directly return address informationGaode location can directly return address information - -

- - - - {' '} - https://github.com/waliu/cordova-plugin-gaodelocation-chenyu.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-gaodelocation-chenyu {'\n'}$ npm install @awesome-cordova-plugins/gao-de-location {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-gaodelocation-chenyu {'\n'}$ npm install @awesome-cordova-plugins/gao-de-location {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { GaoDeLocation } from '@awesome-cordova-plugins/gao-de-location/ngx'; - - -constructor(private gaoDeLocation: GaoDeLocation) { } - - -const positionOptions: PositionOptions = { - androidOption: { - locationMode: LocationModeEnum.Hight_Accuracy, - gpsFirst: false, - HttpTimeOut: 30000, - interval: 2000, - needAddress: true, - onceLocation: false, - onceLocationLatest: false, - locationProtocol: LocationProtocolEnum.HTTP, - sensorEnable: false, - wifiScan: true, - locationCacheEnable: true - }, iosOption: { - desiredAccuracy: DesiredAccuracyEnum.kCLLocationAccuracyBest, - pausesLocationUpdatesAutomatically: 'YES', - allowsBackgroundLocationUpdates: 'NO', - locationTimeout: 10, - reGeocodeTimeout: 5, - } - }; -const positionRes: PositionRes = await this.gaoDeLocation.getCurrentPosition(positionOptions).catch((e: any) => { - console.log(e); - }) || null; -console.log(JSON.stringify(positionRes)); - - -this.gaoDeLocation.startSerialLocation(positionOptions).subscribe((positionRes: PositionRes) => { - console.log(JSON.stringify(positionRes)); -}); - -const positionRes: any = this.gaoDeLocation.stopSerialLocation().catch((e) => { - console.log(e); - }) || null; -console.log(JSON.stringify(positionRes)); - -``` diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md deleted file mode 100644 index e8b0d8cc0ac..00000000000 --- a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'Ge Tui Sdk Plugin' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Ge Tui Sdk Plugin - -This plugin does something - -

- - - - {' '} - git@github.com:GetuiLaboratory/cordova-plugin-getuisdk.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-getuisdk {'\n'}$ npm install @awesome-cordova-plugins/ge-tui-sdk-plugin {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-getuisdk {'\n'}$ npm install @awesome-cordova-plugins/ge-tui-sdk-plugin {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { GeTuiSdkPlugin } from '@awesome-cordova-plugins/ge-tui-sdk-plugin'; - - -constructor(private geTuiSdkPlugin: GeTuiSdkPlugin) { } - - this.geTuiSdkPlugin.callback_init((res) => { console.log(res)}); - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - this.geTuiSdkPlugin.initialize(); - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - this.geTuiSdkPlugin.getClientId(); - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - this.geTuiSdkPlugin.getVersion(); - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/geolocation.md b/versioned_docs/version-v5/native/geolocation.md deleted file mode 100644 index 8a9ec9aec50..00000000000 --- a/versioned_docs/version-v5/native/geolocation.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 'Geolocation | W3C Geolocator Application API Plugin' -description: "This application plugin is based on W3C Geolocation API Specification and only executes on devices that don't already provide an implementation for location." -sidebar_label: 'Geolocation' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Geolocation - -This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. - -This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation. - -For iOS you have to add this configuration to your configuration.xml file - -```xml - - We use your location for full functionality of certain app features. - -``` - -

- - - - {' '} - https://github.com/apache/cordova-plugin-geolocation - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-geolocation {'\n'}$ npm install @awesome-cordova-plugins/geolocation {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-geolocation {'\n'}$ npm install @awesome-cordova-plugins/geolocation {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx'; - -... - -constructor(private geolocation: Geolocation) {} - -... - -this.geolocation.getCurrentPosition().then((resp) => { - // resp.coords.latitude - // resp.coords.longitude -}).catch((error) => { - console.log('Error getting location', error); -}); - -let watch = this.geolocation.watchPosition(); -watch.subscribe((data) => { - // data can be a set of coordinates, or an error (if an error occurred). - // data.coords.latitude - // data.coords.longitude -}); -``` diff --git a/versioned_docs/version-v5/native/globalization.md b/versioned_docs/version-v5/native/globalization.md deleted file mode 100644 index b69c0491899..00000000000 --- a/versioned_docs/version-v5/native/globalization.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Globalization' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Globalization - -This plugin obtains information and performs operations specific to the user's locale, language, and timezone. - -

- - - - {' '} - https://github.com/apache/cordova-plugin-globalization - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-globalization {'\n'}$ npm install @awesome-cordova-plugins/globalization {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-globalization {'\n'}$ npm install @awesome-cordova-plugins/globalization {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Globalization } from '@awesome-cordova-plugins/globalization/ngx'; - -constructor(private globalization: Globalization) { } - - -... - - -this.globalization.getPreferredLanguage() - .then(res => console.log(res)) - .catch(e => console.log(e)); - - -``` diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.md deleted file mode 100644 index da21a5869d9..00000000000 --- a/versioned_docs/version-v5/native/google-analytics.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'Google Analytics' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Google Analytics - -This plugin connects to Google's native Universal Analytics SDK -Prerequisites: - -- A Cordova 3.0+ project for iOS and/or Android -- A Mobile App property through the Google Analytics Admin Console -- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html) - -

- - - - {' '} - https://github.com/danwilson/google-analytics-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-google-analytics {'\n'}$ npm install @awesome-cordova-plugins/google-analytics {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { GoogleAnalytics } from '@awesome-cordova-plugins/google-analytics/ngx'; - -constructor(private ga: GoogleAnalytics) { } - -... - -this.ga.startTrackerWithId('YOUR_TRACKER_ID') - .then(() => { - console.log('Google analytics is ready now'); - this.ga.trackView('test'); - // Tracker is ready - // You can now track pages or set additional information such as AppVersion or UserId - }) - .catch(e => console.log('Error starting GoogleAnalytics', e)); - - -``` diff --git a/versioned_docs/version-v5/native/google-nearby.md b/versioned_docs/version-v5/native/google-nearby.md deleted file mode 100644 index 96db8c78b1c..00000000000 --- a/versioned_docs/version-v5/native/google-nearby.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Google Nearby' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Google Nearby - -This plugin adds support for the Google Nearby Messages API. - -

- - - - {' '} - https://github.com/hahahannes/cordova-plugin-google-nearby - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-google-nearby {'\n'}$ npm install @awesome-cordova-plugins/google-nearby {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-google-nearby {'\n'}$ npm install @awesome-cordova-plugins/google-nearby {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { GoogleNearby } from '@awesome-cordova-plugins/google-nearby/ngx'; - - -constructor(private googleNearby: GoogleNearby) { } - -this.googleNearby.publish('Hello') - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -this.googleNearby.subscribe() - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); -``` diff --git a/versioned_docs/version-v5/native/google-plus.md b/versioned_docs/version-v5/native/google-plus.md deleted file mode 100644 index 7cff3aa4850..00000000000 --- a/versioned_docs/version-v5/native/google-plus.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'Google Plus' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Google Plus - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-googleplus - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-googleplus {'\n'}$ npm install @awesome-cordova-plugins/google-plus {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-googleplus {'\n'}$ npm install @awesome-cordova-plugins/google-plus {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { GooglePlus } from '@awesome-cordova-plugins/google-plus/ngx'; - -constructor(private googlePlus: GooglePlus) { } - -... - -this.googlePlus.login({}) - .then(res => console.log(res)) - .catch(err => console.error(err)); - -``` diff --git a/versioned_docs/version-v5/native/health-kit.md b/versioned_docs/version-v5/native/health-kit.md deleted file mode 100644 index 7218a555e59..00000000000 --- a/versioned_docs/version-v5/native/health-kit.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -sidebar_label: 'Health Kit' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Health Kit - -The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework. -Any data saved shows up in the iOS Health app and is available for other iOS apps. - -

- - - - {' '} - https://github.com/Telerik-Verified-Plugins/HealthKit - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com.telerik.plugins.healthkit {'\n'}$ npm install @awesome-cordova-plugins/health-kit {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add com.telerik.plugins.healthkit {'\n'}$ npm install @awesome-cordova-plugins/health-kit {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { HealthKit } from '@awesome-cordova-plugins/health-kit/ngx'; - - -constructor(private healthKit: HealthKit) { } - -... -``` diff --git a/versioned_docs/version-v5/native/health.md b/versioned_docs/version-v5/native/health.md deleted file mode 100644 index ecf0590e21e..00000000000 --- a/versioned_docs/version-v5/native/health.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'Health' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Health - -A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit. - -

- - - - {' '} - https://github.com/dariosalvi78/cordova-plugin-health - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-health {'\n'}$ npm install @awesome-cordova-plugins/health {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-health {'\n'}$ npm install @awesome-cordova-plugins/health {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Health } from '@awesome-cordova-plugins/health/ngx'; - - -constructor(private health: Health) { } - -... - -this.health.isAvailable() -.then((available:boolean) => { - console.log(available); - this.health.requestAuthorization([ - 'distance', 'nutrition', //read and write permissions - { - read: ['steps'], //read only permission - write: ['height', 'weight'] //write only permission - } - ]) - .then(res => console.log(res)) - .catch(e => console.log(e)); -}) -.catch(e => console.log(e)); - -``` - -See description at https://github.com/dariosalvi78/cordova-plugin-health for a full list of Datatypes and see examples. diff --git a/versioned_docs/version-v5/native/http.md b/versioned_docs/version-v5/native/http.md deleted file mode 100644 index 9d838443986..00000000000 --- a/versioned_docs/version-v5/native/http.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -sidebar_label: 'HTTP' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# HTTP - -Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android. - -Advantages over Javascript requests: - -- SSL / TLS Pinning -- CORS restrictions do not apply -- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415) - -

- - - - {' '} - https://github.com/silkimen/cordova-plugin-advanced-http - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-advanced-http {'\n'}$ npm install @awesome-cordova-plugins/http {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-advanced-http {'\n'}$ npm install @awesome-cordova-plugins/http {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { HTTP } from '@awesome-cordova-plugins/http/ngx'; - -constructor(private http: HTTP) {} - -... - -this.http.get('http://ionic.io', {}, {}) - .then(data => { - - console.log(data.status); - console.log(data.data); // data received by server - console.log(data.headers); - - }) - .catch(error => { - - console.log(error.status); - console.log(error.error); // error message as string - console.log(error.headers); - - }); - -``` diff --git a/versioned_docs/version-v5/native/iamport-cordova.md b/versioned_docs/version-v5/native/iamport-cordova.md deleted file mode 100644 index 949b5d471de..00000000000 --- a/versioned_docs/version-v5/native/iamport-cordova.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'Iamport Cordova' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Iamport Cordova - -This plugin does something - -

- - - - {' '} - https://github.com/iamport/iamport-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install iamport-cordova {'\n'}$ npm install @awesome-cordova-plugins/iamport-cordova {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add iamport-cordova {'\n'}$ npm install @awesome-cordova-plugins/iamport-cordova {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- ios -- android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx'; - - -constructor(private iamportCordova: IamportCordova) { } - -... - - -this.iamportCordova.functionName('Hello', 123) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/ibeacon.md b/versioned_docs/version-v5/native/ibeacon.md deleted file mode 100644 index fd3be7ed665..00000000000 --- a/versioned_docs/version-v5/native/ibeacon.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -sidebar_label: 'IBeacon' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# IBeacon - -This plugin provides functions for working with iBeacons. - -The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7. - -

- - - - {' '} - https://github.com/petermetz/cordova-plugin-ibeacon - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ibeacon {'\n'}$ npm install @awesome-cordova-plugins/ibeacon {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ibeacon {'\n'}$ npm install @awesome-cordova-plugins/ibeacon {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { IBeacon } from '@awesome-cordova-plugins/ibeacon/ngx'; - -constructor(private ibeacon: IBeacon) { } - -... - - -// Request permission to use location on iOS -this.ibeacon.requestAlwaysAuthorization(); -// create a new delegate and register it with the native layer -let delegate = this.ibeacon.Delegate(); - -// Subscribe to some of the delegate's event handlers -delegate.didRangeBeaconsInRegion() - .subscribe( - data => console.log('didRangeBeaconsInRegion: ', data), - error => console.error() - ); -delegate.didStartMonitoringForRegion() - .subscribe( - data => console.log('didStartMonitoringForRegion: ', data), - error => console.error() - ); -delegate.didEnterRegion() - .subscribe( - data => { - console.log('didEnterRegion: ', data); - } - ); - -let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E'); - -this.ibeacon.startMonitoringForRegion(beaconRegion) - .then( - () => console.log('Native layer received the request to monitoring'), - error => console.error('Native layer failed to begin monitoring: ', error) - ); -``` diff --git a/versioned_docs/version-v5/native/image-picker.md b/versioned_docs/version-v5/native/image-picker.md deleted file mode 100644 index 316822a0c8e..00000000000 --- a/versioned_docs/version-v5/native/image-picker.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_label: 'Image Picker' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Image Picker - -Cordova Plugin For Multiple Image Selection - -Requires Cordova plugin: `cordova-plugin-image-picker`. -For more info, please see the https://github.com/Telerik-Verified-Plugins/ImagePicker - -

- - - - {' '} - https://github.com/Telerik-Verified-Plugins/ImagePicker - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-telerik-imagepicker {'\n'}$ npm install @awesome-cordova-plugins/image-picker {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-telerik-imagepicker {'\n'}$ npm install @awesome-cordova-plugins/image-picker {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ImagePicker } from '@awesome-cordova-plugins/image-picker/ngx'; - - -constructor(private imagePicker: ImagePicker) { } - -... - -this.imagePicker.getPictures(options).then((results) => { - for (var i = 0; i < results.length; i++) { - console.log('Image URI: ' + results[i]); - } -}, (err) => { }); - -``` diff --git a/versioned_docs/version-v5/native/imap.md b/versioned_docs/version-v5/native/imap.md deleted file mode 100644 index 77c69bb44ae..00000000000 --- a/versioned_docs/version-v5/native/imap.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -sidebar_label: 'Imap' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Imap - -This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features. -This plugin is in Beta version and it offers support only for Android. -The plugin uses Java Mail API. -Planned improvements and support for iOS. - -

- - - - {' '} - https://github.com/aleksandar888/cordova-plugin-imap.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-imap {'\n'}$ npm install @awesome-cordova-plugins/imap {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-imap {'\n'}$ npm install @awesome-cordova-plugins/imap {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Imap } from '@awesome-cordova-plugins/imap/ngx'; - - -constructor(private imap: Imap) { } - -... - - -this.imap.connect({ - host: 'imap.gmail.com', - user: 'my_email@gmail.com', - password: 'my-pass' -}) - .then((res: Connection) => console.log(res)) - .catch((error) => console.error(error)); - - - - this.imap.disconnect() - .then((res: boolean) => console.log(res)) - .catch((error: any) => console.error(error)); - - - -this.imap.isConnected() - .then((res: boolean) => console.log(res)) - .catch((error: any) => console.error(error)); - - Note: Connected to an IMAP service is REQUIRED to be able to get data from the below functions. - - - this.imap.listMailFolders() - .then((res: boolean) => console.log(res)) - .catch((error: any) => console.error(error)); - - - this.imap.getMessageCountByFolderName('INBOX') - .then((res: number) => { - // Returns the count of the messages in the folder as a result - console.log(res) - }) - .catch((error: any) => { - console.error(error) - }); - - - - this.imap.searchMessagesByDatePeriod('INBOX', 1601503200000, Comparison.GE) - .then((res: number[]) => { - // Returns array with messages' consecutive numbers - // ex. [1207, 1208, 1209] - console.log(res) - }) - .catch((error: any) => { - console.error(error) - }); - - - this.imap.listMessagesHeadersByConsecutiveNumber('INBOX', 1200, 1280) - .then((res: Message[]) => { - // Returns array with messages' headers data - console.log(res) - }) - .catch((error: any) => { - console.error(error) - }); - - - this.imap.listMessagesHeadersByDate('INBOX', 1601503200000, Comparison.GE) - .then((res: Message[]) => { - // Returns array with messages' headers data - console.log(res) - }) - .catch((error: any) => { - console.error(error) - }); - - - this.imap.getFullMessageData('INBOX', 1205) - .then((res: Message) => { - // Returns "Message" object with the full message data including attachments. - console.log(res) - }) - .catch((error: any) => { - console.error(error) - }); - - - this.imap.copyToFolder('INBOX', 'Spam', [1204, 1205, 1206, 1207]) - .then((res: boolean) => { - // Returns "true" if the process is successful, else returns "false". - console.log(res) - }) - .catch((error: any) => { - console.error(error) - }); - - - * Sets a flag on a message - * "setFlag()" can be used for deleting messages setting the Delete flag to "FlagEnum.DELETED" - this.imap.setFlag('INBOX', [1206, 1205, 1204], FlagEnum.SEEN, true) - .then((res: ModificationResult) => { - - // res.status - return true or false based on the deletion success - - //res.modifiedMessages - for ex.[1206, 1205, 1204]; - - }) - .catch((error: any) => { - console.error(error) - }); - -``` diff --git a/versioned_docs/version-v5/native/in-app-browser.md b/versioned_docs/version-v5/native/in-app-browser.md deleted file mode 100644 index e90afa683f0..00000000000 --- a/versioned_docs/version-v5/native/in-app-browser.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'In App Browser' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# In App Browser - -Launches in app Browser - -

- - - - {' '} - https://github.com/apache/cordova-plugin-inappbrowser - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-inappbrowser {'\n'}$ npm install @awesome-cordova-plugins/in-app-browser {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-inappbrowser {'\n'}$ npm install @awesome-cordova-plugins/in-app-browser {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- AmazonFire OS -- Android -- Browser -- iOS -- macOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx'; - -constructor(private iab: InAppBrowser) { } - - -... - - -const browser = this.iab.create('https://ionicframework.com/'); - -browser.executeScript(...); - -browser.insertCSS(...); -browser.on('loadstop').subscribe(event => { - browser.insertCSS({ code: "body{color: red;" }); -}); - -browser.close(); - -``` diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.md b/versioned_docs/version-v5/native/in-app-purchase-2.md deleted file mode 100644 index a3ec3f7c0b6..00000000000 --- a/versioned_docs/version-v5/native/in-app-purchase-2.md +++ /dev/null @@ -1,427 +0,0 @@ ---- -sidebar_label: 'In App Purchase 2' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# In App Purchase 2 - -In-App Purchase on iOS, Android, Windows, macOS and XBox. - -## Features - -| | ios | android | win-8 | win-10/uwp | mac | -| -------------------- | --- | ------- | ----- | ---------- | --- | -| consumables | ✅ | ✅ | ✅ | ✅ | ✅ | -| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ | -| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ | -| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ | -| receipt validations | ✅ | ✅ | | ✅ | ✅ | -| downloadable content | ✅ | | | | ✅ | -| introductory prices | ✅ | ✅ | | ✅ | ✅ | - -Supports: - -- **iOS** version 7.0 or higher. -- **Android** version 2.2 (API level 8) or higher - - with Google Play client version 3.9.16 or higher -- **Windows** Store/Phone 8.1 or higher -- **Windows 10 Mobile** -- **macOS** version 10 -- **Xbox One** - - (and any platform supporting Microsoft's UWP) - -

- - - - {' '} - https://github.com/j3k0/cordova-plugin-purchase - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-purchase {'\n'}$ npm install @awesome-cordova-plugins/in-app-purchase-2 {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-purchase {'\n'}$ npm install @awesome-cordova-plugins/in-app-purchase-2 {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2/ngx'; - -constructor(public platform: Platform, private store: InAppPurchase2) { - platform.ready().then(() => { - this.store.register({ - id: "my_product_id", - type: this.store.NON_RENEWING_SUBSCRIPTION, - }); - this.store.when("my_product_id") - .approved(p => p.verify()) - .verified(p => p.finish()); - this.store.refresh(); - }); -} - -... - -this.store.order("my_product_id"); - -``` - -## Full example - -```tsx - // After platform ready - this.store.verbosity = this.store.DEBUG; - this.store.register({ - id: "my_product_id", - type: this.store.PAID_SUBSCRIPTION, - }); - - // Register event handlers for the specific product - this.store.when("my_product_id").registered( (product: IAPProduct) => { - console.log('Registered: ' + JSON.stringify(product)); - }); - - // Updated - this.store.when("my_product_id").updated( (product: IAPProduct) => { - console.log('Updated' + JSON.stringify(product)); - }); - - // User closed the native purchase dialog - this.store.when("my_product_id").cancelled( (product) => { - console.error('Purchase was Cancelled'); - }); - - // Track all store errors - this.store.error( (err) => { - console.error('Store Error ' + JSON.stringify(err)); - }); - - // Run some code only when the store is ready to be used - this.store.ready(() => { - console.log('Store is ready'); - console.log('Products: ' + JSON.stringify(this.store.products)); - console.log(JSON.stringify(this.store.get("my_product_id"))); - }); - - // Refresh the status of in-app products - this.store.refresh(); - - ... - - // To make a purchase - this.store.order("my_product_id"); - -``` - -## Philosophy - -The API is mostly events based. As a user of this plugin, -you will have to register listeners to changes happening to the products -you register. - -The core of the listening mechanism is the `when()` method. It allows you to -be notified of changes to one or a set of products using a query mechanism: - -```tsx -this.store.when('product').updated(refreshScreen); // match any product -this.store.when('full_version').owned(unlockApp); // match a specific product -this.store.when('subscription').approved(serverCheck); // match all subscriptions -this.store.when('downloadable content').downloaded(showContent); -``` - -The `updated` event is fired whenever one of the fields of a product is -changed (its `owned` status for instance). - -This event provides a generic way to track the statuses of your purchases, -to unlock features when needed and to refresh your views accordingly. - -## Registering products - -The store needs to know the type and identifiers of your products before you -can use them in your code. - -Use `store.register()` to define them before your first call to `store.refresh()`. - -Once registered, you can use `store.get()` to retrieve an `IAPProduct` object. - -```tsx - this.store.register({ - id: "my_consumable1", - type: this.store.CONSUMABLE - }); - ... - const p = this.store.get("my_consumable1"); -``` - -The product `id` and `type` have to match products defined in your -Apple, Google or Microsoft developer consoles. - -Learn more about it [from the wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki). - -## Displaying products - -Right after you registered your products, nothing much is known about them -except their `id`, `type` and an optional `alias`. - -When you perform the initial call to `store.refresh()`, the platforms' server will -be contacted to load informations about the registered products: human -readable `title` and `description`, `price`, etc. - -This isn't an optional step, store owners require you -to display information about a product exactly as retrieved from their server: no -hard-coding of price and title allowed! This is also convenient for you -as you can change the price of your items knowing that it'll be reflected instantly -on your clients' devices. - -Note that the information may not be available when the first view that needs -them appears on screen. For you, the best option is to have your view monitor -changes made to the product. - -## Purchasing - -#### initiate a purchase - -Purchases are initiated using the `store.order("some_product_id")` method. - -The store will manage the internal purchase flow. It'll end: - -- with an `approved` event. The product enters the `APPROVED` state. -- with a `cancelled` event. The product gets back to the `VALID` state. -- with an `error` event. The product gets back to the `VALID` state. - -See the product life-cycle section for details about product states. - -#### finish a purchase - -Once the transaction is approved, the product still isn't owned: the store needs -confirmation that the purchase was delivered before closing the transaction. - -To confirm delivery, you'll use the `product.finish()` method. - -#### example usage - -During initialization: - -```tsx -this.store.when('extra_chapter').approved((product: IAPProduct) => { - // download the feature - app.downloadExtraChapter().then(() => product.finish()); -}); -``` - -When the purchase button is clicked: - -```tsx -this.store.order('extra_chapter'); -``` - -#### un-finished purchases - -If your app wasn't able to deliver the content, `product.finish()` won't be called. - -Don't worry: the `approved` event will be re-triggered the next time you -call `store.refresh()`, which can very well be the next time -the application starts. Pending transactions are persistant. - -#### simple case - -In the most simple case, where: - -- delivery of purchases is only local ; -- you don't want (or need) to implement receipt validation ; - -You may just want to finish all purchases automatically. You can do it this way: - -```js -this.store.when('product').approved((p: IAPProduct) => p.finish()); -``` - -NOTE: the "product" query will match any purchases (see "queries" to learn more details about queries). - -## Receipt validation - -To get the most up-to-date information about purchases (in case a purchase have been canceled, or a subscription renewed), -you should implement server side receipt validation. - -This also protects you against fake "purchases", made by some users using -"free in-app purchase" apps on their devices. - -When a purchase has been approved by the store, it's enriched with -transaction information (see `product.transaction` attribute). - -To verify a purchase you'll have to do three things: - -- configure the validator. -- call `product.verify()` from the `approved` event, before finishing the transaction. -- finish the transaction when transaction is `verified`. - -**Shameless Plug**: this is a feature many users struggle with, so as the author of this plugin, we can provide it to you as-a-service: https://billing.fovea.cc/ -(which is free until you start making serious money) - -#### example using a validation URL - -```js -this.store.validator = 'https://billing.fovea.cc/'; - -this.store - .when('my stuff') - .approved((p: IAPProduct) => p.verify()) - .verified((p: IAPProduct) => p.finish()); -``` - -## Subscriptions - -For subscription, you MUST implement remote receipt validation. - -When the receipt validator returns a `store.PURCHASE_EXPIRED` error code, the subscription will -automatically loose its `owned` status. - -Typically, you'll enable and disable access to your content this way. - -```tsx -this.store.when('my_subcription').updated((product: IAPProduct) => { - if (product.owned) app.subscriberMode(); - else app.guestMode(); -}); -``` - -## Product life-cycle - -A product will change state during the application execution. - -Find below a diagram of the different states a product can pass by. - -``` -REGISTERED +--> INVALID - | - +--> VALID +--> REQUESTED +--> INITIATED +-+ - | - ^ +------------------------------+ - | | - | | +--> DOWNLOADING +--> DOWNLOADED + - | | | | - | +--> APPROVED +--------------------------------+--> FINISHED +--> OWNED - | | - +-------------------------------------------------------------+ - -#### Notes - - - When finished, a consumable product will get back to the `VALID` state, while other will enter the `OWNED` state. - - Any error in the purchase process will bring a product back to the `VALID` state. - - During application startup, products may go instantly from `REGISTERED` to `APPROVED` or `OWNED`, for example if they are purchased non-consumables or non-expired subscriptions. - - Non-Renewing Subscriptions are iOS products only. Please see the [iOS Non Renewing Subscriptions documentation](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/ios.md#non-renewing) for a detailed explanation. - -## events - - - `loaded(IAPProduct)` - - Called when product data is loaded from the store. - - `updated(IAPProduct)` - - Called when any change occured to a product. - - `error(err)` - - Called when an order failed. - - The `err` parameter is an error object - - `approved(IAPProduct)` - - Called when a product order is approved. - - `owned(IAPProduct)` - - Called when a non-consumable product or subscription is owned. - - `cancelled(IAPProduct)` - - Called when a product order is cancelled by the user. - - `refunded(IAPProduct)` - - Called when an order is refunded by the user. - - Actually, all other product states have their promise - - `registered`, `valid`, `invalid`, `requested`, - `initiated` and `finished` - - `verified(IAPProduct)` - - Called when receipt validation successful - - `unverified(IAPProduct)` - - Called when receipt verification failed - - `expired(IAPProduct)` - - Called when validation find a subscription to be expired - - `downloading(IAPProduct, progress, time_remaining)` - - Called when content download is started - - `downloaded(IAPProduct)` - - Called when content download has successfully completed - -## Learn More - - - [GitHub](https://github.com/j3k0/cordova-plugin-purchase) - - [GitBook](https://purchase.cordova.fovea.cc/) - - [Wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki) - - [API reference](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/api.md) - -## Technical Support or Questions - -If you have questions or need help integrating In-App Purchase, [Open an Issue on GitHub](https://github.com/j3k0/cordova-plugin-purchase/issues) or email us at _support@fovea.cc_. - -@interfaces -IAPProduct -IAPProductOptions -IAPProductEvents -``` diff --git a/versioned_docs/version-v5/native/in-app-review.md b/versioned_docs/version-v5/native/in-app-review.md deleted file mode 100644 index e9f708ebb8b..00000000000 --- a/versioned_docs/version-v5/native/in-app-review.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'In App Review' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# In App Review - -This plugin does use the iOS class SKStore​Review​Controller to open the inApp review popup available since iOS 10.3 - -This functionality only works on iOS devices - -

- - - - {' '} - https://github.com/omaxlive/com.omarben.inappreview - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com.omarben.inappreview {'\n'}$ npm install @awesome-cordova-plugins/in-app-review {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add com.omarben.inappreview {'\n'}$ npm install @awesome-cordova-plugins/in-app-review {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { InAppReview } from '@awesome-cordova-plugins/in-app-review/ngx'; - - -constructor(private inAppReview: InAppReview) { } - -... - - -this.inAppReview.requestReview() - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/insomnia.md b/versioned_docs/version-v5/native/insomnia.md deleted file mode 100644 index 70aa99af313..00000000000 --- a/versioned_docs/version-v5/native/insomnia.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -sidebar_label: 'Insomnia' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Insomnia - -Prevent the screen of the mobile device from falling asleep. - -

- - - - {' '} - https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-insomnia {'\n'}$ npm install @awesome-cordova-plugins/insomnia {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-insomnia {'\n'}$ npm install @awesome-cordova-plugins/insomnia {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- Firefox OS -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Insomnia } from '@awesome-cordova-plugins/insomnia/ngx'; - -constructor(private insomnia: Insomnia) { } - -... - -this.insomnia.keepAwake() - .then( - () => console.log('success'), - () => console.log('error') - ); - -this.insomnia.allowSleepAgain() - .then( - () => console.log('success'), - () => console.log('error') - ); -``` diff --git a/versioned_docs/version-v5/native/instagram.md b/versioned_docs/version-v5/native/instagram.md deleted file mode 100644 index 616f0cf5a7f..00000000000 --- a/versioned_docs/version-v5/native/instagram.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -sidebar_label: 'Instagram' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Instagram - -Share a photo with the instagram app - -

- - - - {' '} - https://github.com/vstirbu/InstagramPlugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-instagram-plugin {'\n'}$ npm install @awesome-cordova-plugins/instagram {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-instagram-plugin {'\n'}$ npm install @awesome-cordova-plugins/instagram {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Instagram } from '@awesome-cordova-plugins/instagram/ngx'; - -constructor(private instagram: Instagram) { } - -... - -this.instagram.share('data:image/png;uhduhf3hfif33', 'Caption') - .then(() => console.log('Shared!')) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/intercom.md b/versioned_docs/version-v5/native/intercom.md deleted file mode 100644 index 0bbf01cbde2..00000000000 --- a/versioned_docs/version-v5/native/intercom.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'Intercom' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Intercom - -This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android. -Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration - -

- - - - {' '} - https://github.com/intercom/intercom-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-intercom {'\n'}$ npm install @awesome-cordova-plugins/intercom {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-intercom {'\n'}$ npm install @awesome-cordova-plugins/intercom {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Intercom } from '@awesome-cordova-plugins/intercom/ngx'; - - -constructor(private intercom: Intercom) { } - -... - -this.intercom.registerUnidentifiedUser(); -... -this.intercom.registerForPush(); - -``` diff --git a/versioned_docs/version-v5/native/ionic-webview.md b/versioned_docs/version-v5/native/ionic-webview.md deleted file mode 100644 index 6eaee39149a..00000000000 --- a/versioned_docs/version-v5/native/ionic-webview.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'WebView | Ionic Framework Cordova WebView App Plugin' -description: 'Cordova WebView plugin allows access to web view utilities on Ionic Framework apps. View the Ionic Web View repository for info on iOS and Android system use.' -sidebar_label: 'Ionic Webview' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Ionic Webview - -Access Web View utilities. - -Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository. - -

- - - - {' '} - https://github.com/ionic-team/cordova-plugin-ionic-webview - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { WebView } from '@awesome-cordova-plugins/ionic-webview/ngx'; - - -constructor(private webview: WebView) { } - -... - -img = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png') - -``` diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md deleted file mode 100644 index 8be8c9a755d..00000000000 --- a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'ios-aswebauthenticationsession-api' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# ios-aswebauthenticationsession-api - -Plugin for iOS 12 ASWebAuthenticationSession API - -

- - - - {' '} - https://github.com/jwelker110/cordova-plugin-ios-aswebauthenticationsession-api - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ios-aswebauthenticationsession-api {'\n'}$ npm install @awesome-cordova-plugins/ios-aswebauthenticationsession-api{' '} - {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ios-aswebauthenticationsession-api {'\n'}$ npm install @awesome-cordova-plugins/ios-aswebauthenticationsession-api{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { IosASWebauthenticationSession } from '@awesome-cordova-plugins/ios-aswebauthenticationsession-api/ngx'; - - -constructor(private IosASWebauthenticationSession: ios-aswebauthenticationsession-api) { } - -... - - -this.IosASWebauthenticationSession.start(callbackUrl, authorizeURL) - .then((redirectUrl: string) => console.log(redirectUrl)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/is-debug.md b/versioned_docs/version-v5/native/is-debug.md deleted file mode 100644 index bfeaefba0e1..00000000000 --- a/versioned_docs/version-v5/native/is-debug.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -sidebar_label: 'Is Debug' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Is Debug - -Detect if the app is running in debug mode or not. -Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user. - -

- - - - {' '} - https://github.com/mattlewis92/cordova-plugin-is-debug - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-is-debug {'\n'}$ npm install @awesome-cordova-plugins/is-debug {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-is-debug {'\n'}$ npm install @awesome-cordova-plugins/is-debug {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { IsDebug } from '@awesome-cordova-plugins/is-debug/ngx'; - -constructor(private isDebug: IsDebug) { } - -... - -this.isDebug.getIsDebug() - .then(isDebug => console.log('Is debug:', isDebug)) - .catch(err => console.error(err)); - -``` diff --git a/versioned_docs/version-v5/native/keyboard.md b/versioned_docs/version-v5/native/keyboard.md deleted file mode 100644 index 0d572533bd8..00000000000 --- a/versioned_docs/version-v5/native/keyboard.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -sidebar_label: 'Keyboard' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Keyboard - -Keyboard plugin for Cordova. - -Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard). - -

- - - - {' '} - https://github.com/ionic-team/cordova-plugin-ionic-keyboard - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ionic-keyboard {'\n'}$ npm install @awesome-cordova-plugins/keyboard {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ionic-keyboard {'\n'}$ npm install @awesome-cordova-plugins/keyboard {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Keyboard } from '@awesome-cordova-plugins/keyboard/ngx'; - -constructor(private keyboard: Keyboard) { } - -... - -this.keyboard.show(); - -this.keyboard.hide(); - -``` diff --git a/versioned_docs/version-v5/native/keychain.md b/versioned_docs/version-v5/native/keychain.md deleted file mode 100644 index c1a19e410ce..00000000000 --- a/versioned_docs/version-v5/native/keychain.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Keychain' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Keychain - -Get and set data in the iOS Keychain - -Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain). - -See also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/) for more supported platforms. - -

- - - - {' '} - https://github.com/ionic-team/cordova-plugin-ios-keychain - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-ios-keychain {'\n'}$ npm install @awesome-cordova-plugins/keychain {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-ios-keychain {'\n'}$ npm install @awesome-cordova-plugins/keychain {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Keychain } from '@awesome-cordova-plugins/keychain/ngx'; - -constructor(private keychain: Keychain) { } - -... - -this.keychain.set(key, value).then(() => { - this.keychain.get(key) - .then(value => console.log('Got value', value)) - .catch(err => console.error('Error getting', err)); -}) -.catch(err => console.error('Error setting', err)); -``` diff --git a/versioned_docs/version-v5/native/kommunicate.md b/versioned_docs/version-v5/native/kommunicate.md deleted file mode 100644 index 96fe01b8f9d..00000000000 --- a/versioned_docs/version-v5/native/kommunicate.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -sidebar_label: 'Kommunicate' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Kommunicate - -The plugin for the Kommunicate SDK. -With the help of this plugin, you can easily add human + bot chat support functionality to you app. -Refer to: TODO: insert site link -For documentation: TODO: insert link - -

- - - - {' '} - https://github.com/Kommunicate-io/Kommunicate-Cordova-Ionic-PhoneGap-Chat-Plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install kommunicate-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/kommunicate {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add kommunicate-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/kommunicate {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Kommunicate } from '@awesome-cordova-plugins/Kommunicate'; - -constructor(private kommunicate: Kommunicate) { } -//also add [..., Kommunicate, ... ] inside the providers array, if required - -var kmUser = { - userId : 'randomstring', - authenticationTypeId : 1 -}; - -this.kommunicate.login(kmUser) - .then((res: any) => console.log("Sucessfully logged in." + res)) - .catch((error: any) => console.error("Error logging in." + error)); - -var conversationObject = { - isUnique : false -}; - -this.kommunicate.conversationBuilder(converationObject) - .then((clientChannelKey: any) => console.log("Kommunicate create conversation successful the clientChannelKey is : " + clientChannelKey)) - .catch((error: any) => console.error("Error creating conversation." + error)); - -``` diff --git a/versioned_docs/version-v5/native/launch-navigator.md b/versioned_docs/version-v5/native/launch-navigator.md deleted file mode 100644 index a7fdff4787c..00000000000 --- a/versioned_docs/version-v5/native/launch-navigator.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -sidebar_label: 'Launch Navigator' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Launch Navigator - -Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator). - -

- - - - {' '} - https://github.com/dpa99c/phonegap-launch-navigator - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install uk.co.workingedge.phonegap.plugin.launchnavigator {'\n'}$ npm install @awesome-cordova-plugins/launch-navigator{' '} - {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator {'\n'}$ npm install @awesome-cordova-plugins/launch-navigator{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -Please refer to the plugin's repo for detailed usage. This docs page only explains the Native wrapper. - -```tsx -import { LaunchNavigator, LaunchNavigatorOptions } from '@awesome-cordova-plugins/launch-navigator/ngx'; - -constructor(private launchNavigator: LaunchNavigator) { } - -... - -let options: LaunchNavigatorOptions = { - start: 'London, ON', - app: LaunchNavigator.APPS.UBER -} - -this.launchNavigator.navigate('Toronto, ON', options) - .then( - success => console.log('Launched navigator'), - error => console.log('Error launching navigator', error) - ); -``` diff --git a/versioned_docs/version-v5/native/launch-review.md b/versioned_docs/version-v5/native/launch-review.md deleted file mode 100644 index 0e2445de321..00000000000 --- a/versioned_docs/version-v5/native/launch-review.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Launch Review' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Launch Review - -Assists in leaving user reviews/ratings in the App Stores. - -- Launches the platform's App Store page for the current app in order for the user to leave a review. -- On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store. - -

- - - - {' '} - https://github.com/dpa99c/cordova-launch-review - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-launch-review {'\n'}$ npm install @awesome-cordova-plugins/launch-review {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-launch-review {'\n'}$ npm install @awesome-cordova-plugins/launch-review {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { LaunchReview } from '@awesome-cordova-plugins/launch-review/ngx'; - -constructor(private launchReview: LaunchReview) { } - -... - -this.launchReview.launch() - .then(() => console.log('Successfully launched store app')); - -if(this.launchReview.isRatingSupported()){ - this.launchReview.rating() - .then(() => console.log('Successfully launched rating dialog')); -} -``` diff --git a/versioned_docs/version-v5/native/line-login.md b/versioned_docs/version-v5/native/line-login.md deleted file mode 100644 index 902e5cf3184..00000000000 --- a/versioned_docs/version-v5/native/line-login.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -sidebar_label: 'Line Login' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Line Login - -The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows. - -

- - - - {' '} - https://github.com/nrikiji/cordova-line-login-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-line-login-plugin {'\n'}$ npm install @awesome-cordova-plugins/line-login {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-line-login-plugin {'\n'}$ npm install @awesome-cordova-plugins/line-login {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { LineLogin } from '@awesome-cordova-plugins/line-login/ngx'; - - -constructor(private lineLogin: LineLogin) { } - -... - - -this.lineLogin.initialize({ channel_id: "xxxxxxxxxx" }) - -this.lineLogin.login() - .then(result => console.log(result)) - .catch(error => console.log(error)) - -``` diff --git a/versioned_docs/version-v5/native/local-notifications.md b/versioned_docs/version-v5/native/local-notifications.md deleted file mode 100644 index 4252fcc8de2..00000000000 --- a/versioned_docs/version-v5/native/local-notifications.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: 'Local Notifications: iOS & Android | Cordova Local Notifications' -description: 'The Cordova Local Notifications Plugin allows you to display local notifications from your Ionic Framework application on iOS, Android, or Windows devices.' -sidebar_label: 'Local Notifications' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Local Notifications - -This plugin allows you to display local notifications on the device - -

- - - - {' '} - https://github.com/katzer/cordova-plugin-local-notifications - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-local-notification {'\n'}$ npm install @awesome-cordova-plugins/local-notifications {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-local-notification {'\n'}$ npm install @awesome-cordova-plugins/local-notifications{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { LocalNotifications } from '@awesome-cordova-plugins/local-notifications/ngx'; - - -constructor(private localNotifications: LocalNotifications) { } - -... - - -// Schedule a single notification -this.localNotifications.schedule({ - id: 1, - text: 'Single ILocalNotification', - sound: isAndroid? 'file://sound.mp3': 'file://beep.caf', - data: { secret: key } -}); - - -// Schedule multiple notifications -this.localNotifications.schedule([{ - id: 1, - text: 'Multi ILocalNotification 1', - sound: isAndroid ? 'file://sound.mp3': 'file://beep.caf', - data: { secret:key } - },{ - id: 2, - title: 'Local ILocalNotification Example', - text: 'Multi ILocalNotification 2', - icon: 'http://example.com/icon.png' -}]); - - -// Schedule delayed notification -this.localNotifications.schedule({ - text: 'Delayed ILocalNotification', - trigger: {at: new Date(new Date().getTime() + 3600)}, - led: 'FF0000', - sound: null -}); -``` diff --git a/versioned_docs/version-v5/native/location-accuracy.md b/versioned_docs/version-v5/native/location-accuracy.md deleted file mode 100644 index 235ac8bf537..00000000000 --- a/versioned_docs/version-v5/native/location-accuracy.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -sidebar_label: 'Location Accuracy' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Location Accuracy - -This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually. - -

- - - - {' '} - https://github.com/dpa99c/cordova-plugin-request-location-accuracy - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-request-location-accuracy {'\n'}$ npm install @awesome-cordova-plugins/location-accuracy {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-request-location-accuracy {'\n'}$ npm install @awesome-cordova-plugins/location-accuracy{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { LocationAccuracy } from '@awesome-cordova-plugins/location-accuracy/ngx'; - -constructor(private locationAccuracy: LocationAccuracy) { } - -... - -this.locationAccuracy.canRequest().then((canRequest: boolean) => { - - if(canRequest) { - // the accuracy option will be ignored by iOS - this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then( - () => console.log('Request successful'), - error => console.log('Error requesting location permissions', error) - ); - } - -}); - -``` diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.md b/versioned_docs/version-v5/native/lottie-splash-screen.md deleted file mode 100644 index aed3e248876..00000000000 --- a/versioned_docs/version-v5/native/lottie-splash-screen.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'Lottie Splash Screen' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Lottie Splash Screen - -Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper - -

- - - - {' '} - https://github.com/timbru31/cordova-plugin-lottie-splashscreen - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-lottie-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/lottie-splash-screen {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-lottie-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/lottie-splash-screen{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { LottieSplashScreen } from '@awesome-cordova-plugins/lottie-splash-screen/ngx'; - - -constructor(private lottieSplashScreen: LottieSplashScreen) { } - -... - - -this.lottieSplashScreen.show('www/lottie/animation.json', false, 1024, 768) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/media-capture.md b/versioned_docs/version-v5/native/media-capture.md deleted file mode 100644 index 0bf7c07a06e..00000000000 --- a/versioned_docs/version-v5/native/media-capture.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'Media Capture' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Media Capture - -This plugin provides access to the device's audio, image, and video capture capabilities. - -Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-media-capture - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-media-capture {'\n'}$ npm install @awesome-cordova-plugins/media-capture {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-media-capture {'\n'}$ npm install @awesome-cordova-plugins/media-capture {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@awesome-cordova-plugins/media-capture/ngx'; - - -constructor(private mediaCapture: MediaCapture) { } - -... - - -let options: CaptureImageOptions = { limit: 3 } -this.mediaCapture.captureImage(options) - .then( - (data: MediaFile[]) => console.log(data), - (err: CaptureError) => console.error(err) - ); - -``` diff --git a/versioned_docs/version-v5/native/media.md b/versioned_docs/version-v5/native/media.md deleted file mode 100644 index 2c6b761449b..00000000000 --- a/versioned_docs/version-v5/native/media.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -sidebar_label: 'Media' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Media - -This plugin provides the ability to record and play back audio files on a device. - -

- - - - {' '} - https://github.com/apache/cordova-plugin-media - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-media {'\n'}$ npm install @awesome-cordova-plugins/media {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-media {'\n'}$ npm install @awesome-cordova-plugins/media {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx'; - - -constructor(private media: Media) { } - - -... - - -// Create a Media instance. Expects path to file or url as argument -// We can optionally pass a second argument to track the status of the media - -const file: MediaObject = this.media.create('file.mp3'); - -// to listen to plugin events: - -file.onStatusUpdate.subscribe(status => console.log(status)); // fires when file status changes - -file.onSuccess.subscribe(() => console.log('Action is successful')); - -file.onError.subscribe(error => console.log('Error!', error)); - -// play the file -file.play(); - -// pause the file -file.pause(); - -// get current playback position -file.getCurrentPosition().then((position) => { - console.log(position); -}); - -// get file duration -let duration = file.getDuration(); -console.log(duration); - -// skip to 10 seconds (expects int value in ms) -file.seekTo(10000); - -// stop playing the file -file.stop(); - -// release the native audio resource -// Platform Quirks: -// iOS simply create a new instance and the old one will be overwritten -// Android you must call release() to destroy instances of media when you are done -file.release(); - - - -// Recording to a file -const file: MediaObject = this.media.create('path/to/file.mp3'); - -file.startRecord(); - -file.stopRecord(); - - -``` - -Some hints if you are using iOS and recording doesn't work: -1.) Try to use a absolute file path but remove beginning "file://". -Then it looks like: `/var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a` -Example: `this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a')` -2.) If that's not working, too, create the file before using. -Example: - -```tsx -import { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx'; -import { File } from '@awesome-cordova-plugins/file/ngx'; - -... - -constructor(private media: Media, private file: File) { } - -... - -this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => { - let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a'); - file.startRecord(); - window.setTimeout(() => file.stopRecord(), 10000); -}); -``` - -You can find the reasons here: https://github.com/ionic-team/ionic-native/issues/1452#issuecomment-299605906 diff --git a/versioned_docs/version-v5/native/metrix.md b/versioned_docs/version-v5/native/metrix.md deleted file mode 100644 index 0714f5e90d8..00000000000 --- a/versioned_docs/version-v5/native/metrix.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -sidebar_label: 'Metrix' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Metrix - -This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir. - -Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin) - -

- - - - {' '} - https://github.com/metrixorg/MetrixSDK-CordovaPlugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install ir.metrix.sdk {'\n'}$ npm install @awesome-cordova-plugins/metrix {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add ir.metrix.sdk {'\n'}$ npm install @awesome-cordova-plugins/metrix {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx - import { Metrix, MetrixConfig } from '@awesome-cordova-plugins/metrix'; - - constructor(private metrix: Metrix) { } - - ... - - const config = new MetrixConfig('APP-ID-HERE'); - // Set other config properties. - metrix.create(config); - -``` diff --git a/versioned_docs/version-v5/native/mixpanel.md b/versioned_docs/version-v5/native/mixpanel.md deleted file mode 100644 index 69101ede523..00000000000 --- a/versioned_docs/version-v5/native/mixpanel.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Mixpanel' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Mixpanel - -Cordova Plugin that wraps Mixpanel SDK for Android and iOS - -

- - - - {' '} - https://github.com/samzilverberg/cordova-mixpanel-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-mixpanel {'\n'}$ npm install @awesome-cordova-plugins/mixpanel {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-mixpanel {'\n'}$ npm install @awesome-cordova-plugins/mixpanel {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Mixpanel } from '@awesome-cordova-plugins/mixpanel/ngx'; - -constructor(private mixpanel: Mixpanel, private mixpanelPeople: MixpanelPeople) { } - -... - -this.mixpanel.init(token) - .then(onSuccess) - .catch(onError); - -``` diff --git a/versioned_docs/version-v5/native/mlkit-translate.md b/versioned_docs/version-v5/native/mlkit-translate.md deleted file mode 100644 index 3e1c138536f..00000000000 --- a/versioned_docs/version-v5/native/mlkit-translate.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'MLKitTranslate' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# MLKitTranslate - -Plugin that implements MLKit Translation and Language Identification features. - -

- - - - {' '} - https://github.com/rigelglen/cordova-plugin-mlkit-translate - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-mlkit-translate {'\n'}$ npm install @awesome-cordova-plugins/mlkit-translate {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-mlkit-translate {'\n'}$ npm install @awesome-cordova-plugins/mlkit-translate {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { MLKitTranslate } from '@awesome-cordova-plugins/ml-kit-translate'; - - -constructor(private mlkitTranslate: MLKitTranslate) { } - -... - -this.mlkitTranslate.translate('Hello', 'en', 'es') - .then((resultText: string) => console.log(res)) - .catch((error: string) => console.error(error)); - -@interfaces -LanguageModel -``` diff --git a/versioned_docs/version-v5/native/mobile-messaging.md b/versioned_docs/version-v5/native/mobile-messaging.md deleted file mode 100644 index eb861411962..00000000000 --- a/versioned_docs/version-v5/native/mobile-messaging.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -sidebar_label: 'Mobile Messaging' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Mobile Messaging - -Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application. -In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/). -This document describes library integration steps for your Cordova project. - -For more info see [Cordova plugin docs](https://github.com/infobip/mobile-messaging-cordova-plugin) - -

- - - - {' '} - https://github.com/infobip/mobile-messaging-cordova-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com-infobip-plugins-mobilemessaging {'\n'}$ npm install @awesome-cordova-plugins/mobile-messaging {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add com-infobip-plugins-mobilemessaging {'\n'}$ npm install @awesome-cordova-plugins/mobile-messaging {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { MobileMessaging } from '@awesome-cordova-plugins/mobile-messaging/ngx'; - - -constructor(private mobileMessaging: MobileMessaging) { } - -... - - - this.mobileMessaging.init({ - applicationCode: '<your_application_code>', - geofencingEnabled: '<true/false>', - defaultMessageStorage: '<true/false>', - ios: { - notificationTypes: ['alert', 'badge', 'sound'] - }, - android: { - notificationIcon: <String; a resource name for a status bar icon (without extension), located in '/platforms/android/app/src/main/res/mipmap'>, - multipleNotifications: <Boolean; set to 'true' to enable multiple notifications>, - notificationAccentColor: <String; set to hex color value in format '#RRGGBB' or '#AARRGGBB'> - }}, (err) => { - ... - }); - - this.mobileMessaging.register('messageReceived').subscribe((message: Message) => { - ... - }); - -``` diff --git a/versioned_docs/version-v5/native/multiple-document-picker.md b/versioned_docs/version-v5/native/multiple-document-picker.md deleted file mode 100644 index 88e9ff70e64..00000000000 --- a/versioned_docs/version-v5/native/multiple-document-picker.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Multiple Documents Picker' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Multiple Documents Picker - -This plugin allows users to pick multiple documents/images at once - -

- - - - {' '} - https://github.com/akeotech/cordova-plugin-multiple-documents-picker - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-multiple-documents-picker {'\n'}$ npm install @awesome-cordova-plugins/multiple-document-picker { - '\n' - }$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-multiple-documents-picker {'\n'}$ npm install @awesome-cordova-plugins/multiple-document-picker{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx'; - - -constructor(private multipleDocumentsPicker: MultipleDocumentsPicker) { } - -... - - -this.multipleDocumentsPicker.pick(1) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/music-controls.md b/versioned_docs/version-v5/native/music-controls.md deleted file mode 100644 index 019066dbc26..00000000000 --- a/versioned_docs/version-v5/native/music-controls.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -sidebar_label: 'Music Controls' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Music Controls - -Music controls for Cordova applications. -Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play. -Handle also headset event (plug, unplug, headset button). - -

- - - - {' '} - https://github.com/ghenry22/cordova-plugin-music-controls2 - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-music-controls2 {'\n'}$ npm install @awesome-cordova-plugins/music-controls {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-music-controls2 {'\n'}$ npm install @awesome-cordova-plugins/music-controls {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { MusicControls } from '@awesome-cordova-plugins/music-controls/ngx'; - -constructor(private musicControls: MusicControls) { } - -... - -this.musicControls.create({ - track : 'Time is Running Out', // optional, default : '' - artist : 'Muse', // optional, default : '' - cover : 'albums/absolution.jpg', // optional, default : nothing - // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app) - // or a remote url ('http://...', 'https://...', 'ftp://...') - isPlaying : true, // optional, default : true - dismissable : true, // optional, default : false - - // hide previous/next/close buttons: - hasPrev : false, // show previous button, optional, default: true - hasNext : false, // show next button, optional, default: true - hasClose : true, // show close button, optional, default: false - -// iOS only, optional - album : 'Absolution', // optional, default: '' - duration : 60, // optional, default: 0 - elapsed : 10, // optional, default: 0 - hasSkipForward : true, // show skip forward button, optional, default: false - hasSkipBackward : true, // show skip backward button, optional, default: false - skipForwardInterval: 15, // display number for skip forward, optional, default: 0 - skipBackwardInterval: 15, // display number for skip backward, optional, default: 0 - hasScrubbing: false, // enable scrubbing from control center and lockscreen progress bar, optional - - // Android only, optional - // text displayed in the status bar when the notification (and the ticker) are updated, optional - ticker : 'Now playing "Time is Running Out"', - // All icons default to their built-in android equivalents - playIcon: 'media_play', - pauseIcon: 'media_pause', - prevIcon: 'media_prev', - nextIcon: 'media_next', - closeIcon: 'media_close', - notificationIcon: 'notification' - }); - - this.musicControls.subscribe().subscribe(action => { - - function events(action) { - const message = JSON.parse(action).message; - switch(message) { - case 'music-controls-next': - // Do something - break; - case 'music-controls-previous': - // Do something - break; - case 'music-controls-pause': - // Do something - break; - case 'music-controls-play': - // Do something - break; - case 'music-controls-destroy': - // Do something - break; - - // External controls (iOS only) - case 'music-controls-toggle-play-pause' : - // Do something - break; - case 'music-controls-seek-to': - const seekToInSeconds = JSON.parse(action).position; - this.musicControls.updateElapsed({ - elapsed: seekToInSeconds, - isPlaying: true - }); - // Do something - break; - case 'music-controls-skip-forward': - // Do something - break; - case 'music-controls-skip-backward': - // Do something - break; - - // Headset events (Android only) - // All media button events are listed below - case 'music-controls-media-button' : - // Do something - break; - case 'music-controls-headset-unplugged': - // Do something - break; - case 'music-controls-headset-plugged': - // Do something - break; - default: - break; - } - } - }); - - this.musicControls.listen(); // activates the observable above - - this.musicControls.updateIsPlaying(true); - - -``` diff --git a/versioned_docs/version-v5/native/native-audio.md b/versioned_docs/version-v5/native/native-audio.md deleted file mode 100644 index f482b8374cc..00000000000 --- a/versioned_docs/version-v5/native/native-audio.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -sidebar_label: 'Native Audio' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Native Audio - -Native Audio Playback - -

- - - - {' '} - https://github.com/floatinghotpot/cordova-plugin-nativeaudio - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-nativeaudio {'\n'}$ npm install @awesome-cordova-plugins/native-audio {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-nativeaudio {'\n'}$ npm install @awesome-cordova-plugins/native-audio {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { NativeAudio } from '@awesome-cordova-plugins/native-audio/ngx'; - -constructor(private nativeAudio: NativeAudio) { } - -... - -this.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError); -this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError); - -this.nativeAudio.play('uniqueId1').then(onSuccess, onError); - -// can optionally pass a callback to be called when the file is done playing -this.nativeAudio.play('uniqueId1', () => console.log('uniqueId1 is done playing')); - -this.nativeAudio.loop('uniqueId2').then(onSuccess, onError); - -this.nativeAudio.setVolumeForComplexAsset('uniqueId2', 0.6).then(onSuccess,onError); - -this.nativeAudio.stop('uniqueId1').then(onSuccess,onError); - -this.nativeAudio.unload('uniqueId1').then(onSuccess,onError); - -``` diff --git a/versioned_docs/version-v5/native/native-geocoder.md b/versioned_docs/version-v5/native/native-geocoder.md deleted file mode 100644 index d79cfb6853d..00000000000 --- a/versioned_docs/version-v5/native/native-geocoder.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'Native Geocoder' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Native Geocoder - -Cordova plugin for native forward and reverse geocoding - -

- - - - {' '} - https://github.com/sebastianbaar/cordova-plugin-nativegeocoder - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-nativegeocoder {'\n'}$ npm install @awesome-cordova-plugins/native-geocoder {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-nativegeocoder {'\n'}$ npm install @awesome-cordova-plugins/native-geocoder {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@awesome-cordova-plugins/native-geocoder/ngx'; - -constructor(private nativeGeocoder: NativeGeocoder) { } - -... - -let options: NativeGeocoderOptions = { - useLocale: true, - maxResults: 5 -}; - -this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818, options) - .then((result: NativeGeocoderResult[]) => console.log(JSON.stringify(result[0]))) - .catch((error: any) => console.log(error)); - -this.nativeGeocoder.forwardGeocode('Berlin', options) - .then((result: NativeGeocoderResult[]) => console.log('The coordinates are latitude=' + result[0].latitude + ' and longitude=' + result[0].longitude)) - .catch((error: any) => console.log(error)); -``` diff --git a/versioned_docs/version-v5/native/native-keyboard.md b/versioned_docs/version-v5/native/native-keyboard.md deleted file mode 100644 index c6659691d56..00000000000 --- a/versioned_docs/version-v5/native/native-keyboard.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -sidebar_label: 'Native Keyboard' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Native Keyboard - -A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app. - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-native-keyboard {'\n'}$ npm install @awesome-cordova-plugins/native-keyboard {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-native-keyboard {'\n'}$ npm install @awesome-cordova-plugins/native-keyboard {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { NativeKeyboard } from '@awesome-cordova-plugins/native-keyboard/ngx'; - - -constructor(private nativeKeyboard: NativeKeyboard) { } - -... - - -``` diff --git a/versioned_docs/version-v5/native/native-page-transitions.md b/versioned_docs/version-v5/native/native-page-transitions.md deleted file mode 100644 index c5a652a43d8..00000000000 --- a/versioned_docs/version-v5/native/native-page-transitions.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -sidebar_label: 'Native Page Transitions' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Native Page Transitions - -The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction. - -

- - - - {' '} - https://github.com/Telerik-Verified-Plugins/NativePageTransitions - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com.telerik.plugins.nativepagetransitions {'\n'}$ npm install @awesome-cordova-plugins/native-page-transitions { - '\n' - }$ ionic cap sync - - - - - $ ionic cordova plugin add com.telerik.plugins.nativepagetransitions {'\n'}$ npm install @awesome-cordova-plugins/native-page-transitions{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { NativePageTransitions, NativeTransitionOptions } from '@awesome-cordova-plugins/native-page-transitions/ngx'; - -constructor(private nativePageTransitions: NativePageTransitions) { } - -... - - -// example of adding a transition when a page/modal closes -ionViewWillLeave() { - - let options: NativeTransitionOptions = { - direction: 'up', - duration: 500, - slowdownfactor: 3, - slidePixels: 20, - iosdelay: 100, - androiddelay: 150, - fixedPixelsTop: 0, - fixedPixelsBottom: 60 - } - - this.nativePageTransitions.slide(options) - .then(onSuccess) - .catch(onError); - -} - - -// example of adding a transition when pushing a new page -openPage(page: any) { - - this.nativePageTransitions.slide(options); - this.navCtrl.push(page); - -} - -``` diff --git a/versioned_docs/version-v5/native/native-storage.md b/versioned_docs/version-v5/native/native-storage.md deleted file mode 100644 index 1d4d382cd1a..00000000000 --- a/versioned_docs/version-v5/native/native-storage.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: 'Ionic Native Storage | Install Cordova Plugin Native Storage' -description: 'Learn to use and install Native Storage of variables in Android and iOS on Ionic apps. Read to explore more about the cordova-plugin-nativestorage.' -sidebar_label: 'Native Storage' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Native Storage - -Native storage of variables in Android and iOS - -

- - - - {' '} - https://github.com/TheCocoaProject/cordova-plugin-nativestorage - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-nativestorage {'\n'}$ npm install @awesome-cordova-plugins/native-storage {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-nativestorage {'\n'}$ npm install @awesome-cordova-plugins/native-storage {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- macOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { NativeStorage } from '@awesome-cordova-plugins/native-storage/ngx'; - -constructor(private nativeStorage: NativeStorage) { } - -... - -this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'}) - .then( - () => console.log('Stored item!'), - error => console.error('Error storing item', error) - ); - -this.nativeStorage.getItem('myitem') - .then( - data => console.log(data), - error => console.error(error) - ); -``` diff --git a/versioned_docs/version-v5/native/network-interface.md b/versioned_docs/version-v5/native/network-interface.md deleted file mode 100644 index bd11e719886..00000000000 --- a/versioned_docs/version-v5/native/network-interface.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -sidebar_label: 'Network Interface' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Network Interface - -Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8. - -

- - - - {' '} - https://github.com/salbahra/cordova-plugin-networkinterface - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-networkinterface {'\n'}$ npm install @awesome-cordova-plugins/network-interface {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-networkinterface {'\n'}$ npm install @awesome-cordova-plugins/network-interface {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- BlackBerry 10 -- Browser -- iOS -- Windows -- Windows Phone - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { NetworkInterface } from '@awesome-cordova-plugins/network-interface/ngx'; - -constructor( private networkInterface: NetworkInterface ) { - - this.networkInterface.getWiFiIPAddress() - .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`)) - .catch(error => console.error(`Unable to get IP: ${error}`)); - - this.networkInterface.getCarrierIPAddress() - .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`)) - .catch(error => console.error(`Unable to get IP: ${error}`)); - - const url = 'www.github.com'; - this.networkInterface.getHttpProxyInformation(url) - .then(proxy => console.info(`Type: ${proxy.type}, Host: ${proxy.host}, Port: ${proxy.port}`)) - .catch(error => console.error(`Unable to get proxy info: ${error}`)); -} -``` diff --git a/versioned_docs/version-v5/native/network.md b/versioned_docs/version-v5/native/network.md deleted file mode 100644 index 852052de559..00000000000 --- a/versioned_docs/version-v5/native/network.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: 'Ionic Native Network Plugin: Cordova Plugin Network Information' -description: 'The Ionic native network plugin requires the Cordova plugin: cordova-plugin-network-information. Read to learn more about this Ionic app feature and usage.' -sidebar_label: 'Network' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Network - -Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-network-information - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-network-information {'\n'}$ npm install @awesome-cordova-plugins/network {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-network-information {'\n'}$ npm install @awesome-cordova-plugins/network {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Network } from '@awesome-cordova-plugins/network/ngx'; - -constructor(private network: Network) { } - -... - -// watch network for a disconnection -let disconnectSubscription = this.network.onDisconnect().subscribe(() => { - console.log('network was disconnected :-('); -}); - -// stop disconnect watch -disconnectSubscription.unsubscribe(); - - -// watch network for a connection -let connectSubscription = this.network.onConnect().subscribe(() => { - console.log('network connected!'); - // We just got a connection but we need to wait briefly - // before we determine the connection type. Might need to wait. - // prior to doing any api requests as well. - setTimeout(() => { - if (this.network.type === 'wifi') { - console.log('we got a wifi connection, woohoo!'); - } - }, 3000); -}); - -// stop connect watch -connectSubscription.unsubscribe(); - -``` diff --git a/versioned_docs/version-v5/native/nfc.md b/versioned_docs/version-v5/native/nfc.md deleted file mode 100644 index a9c27e0f82a..00000000000 --- a/versioned_docs/version-v5/native/nfc.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -sidebar_label: 'NFC' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# NFC - -The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices. - -Use to - -- read data from NFC tags -- write data to NFC tags -- send data to other NFC enabled devices -- receive data from NFC devices - -This plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty between NFC devices, tag types, and operating systems. - -

- - - - {' '} - https://github.com/chariotsolutions/phonegap-nfc - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install phonegap-nfc {'\n'}$ npm install @awesome-cordova-plugins/nfc {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add phonegap-nfc {'\n'}$ npm install @awesome-cordova-plugins/nfc {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { NFC, Ndef } from '@awesome-cordova-plugins/nfc/ngx'; - -constructor(private nfc: NFC, private ndef: Ndef) { } - -... - -// Read NFC Tag - Android -// Once the reader mode is enabled, any tags that are scanned are sent to the subscriber - let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V; - this.readerMode$ = this.nfc.readerMode(flags).subscribe( - tag => console.log(JSON.stringify(tag)), - err => console.log('Error reading tag', err) - ); - -// Read NFC Tag - iOS -// On iOS, a NFC reader session takes control from your app while scanning tags then returns a tag -try { - let tag = await this.nfc.scanNdef(); - console.log(JSON.stringify(tag)); - } catch (err) { - console.log('Error reading tag', err); - } - -``` - -For more details on NFC tag operations see https://github.com/chariotsolutions/phonegap-nfc diff --git a/versioned_docs/version-v5/native/ocr.md b/versioned_docs/version-v5/native/ocr.md deleted file mode 100644 index 06684377e13..00000000000 --- a/versioned_docs/version-v5/native/ocr.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'OCR' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# OCR - -This plugin attempts to identify and extract text from an image. -Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple. -Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs` -For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27). - -

- - - - {' '} - https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-mobile-ocr {'\n'}$ npm install @awesome-cordova-plugins/ocr {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-mobile-ocr {'\n'}$ npm install @awesome-cordova-plugins/ocr {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { OCR, OCRSourceType } from '@awesome-cordova-plugins/ocr/ngx'; - - -constructor(private ocr: OCR) { } - -... - -this.ocr.recText(OCRSourceType.NORMFILEURL, "file://path/to/image.png") - .then((res: OCRResult) => console.log(JSON.stringify(res))) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/onesignal.md b/versioned_docs/version-v5/native/onesignal.md deleted file mode 100644 index d34f52020a8..00000000000 --- a/versioned_docs/version-v5/native/onesignal.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: 'OneSignal | OneSignal Cordova SDK Push Notification Plugin' -description: 'The OneSignal Cordova SDK plugin is a simple implementation for delivering push notifications on Ionic apps. Read our OneSignal Documentation to learn more.' -sidebar_label: 'OneSignal' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# OneSignal - -The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service. -OneSignal is a simple implementation for delivering push notifications. - -Please view the official [OneSignal Ionic SDK Installation](https://documentation.onesignal.com/docs/ionic-sdk-setup) guide -for more information. - -#### Icons - -If you want to use generated icons with command `ionic cordova resources`: - -1. Add a file to your `hooks` directory called `copy_android_notification_icons.js` - -2. Configure the hook in your config.xml - -``` - - - -``` - -3. Put the following code in it: - -``` -#!/usr/bin/env node - -var fs = require('fs'); -var path = require('path'); - -var filestocopy = [{ - "resources/android/icon/drawable-hdpi-icon.png": - "platforms/android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png" -}, { - "resources/android/icon/drawable-mdpi-icon.png": - "platforms/android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png" -}, { - "resources/android/icon/drawable-xhdpi-icon.png": - "platforms/android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png" -}, { - "resources/android/icon/drawable-xxhdpi-icon.png": - "platforms/android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png" -}, { - "resources/android/icon/drawable-xxxhdpi-icon.png": - "platforms/android/app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png" -} ]; - -module.exports = function(context) { - - // no need to configure below - var rootdir = context.opts.projectRoot; - - filestocopy.forEach(function(obj) { - Object.keys(obj).forEach(function(key) { - var val = obj[key]; - var srcfile = path.join(rootdir, key); - var destfile = path.join(rootdir, val); - console.log("copying "+srcfile+" to "+destfile); - var destdir = path.dirname(destfile); - if (fs.existsSync(srcfile) && fs.existsSync(destdir)) { - fs.createReadStream(srcfile).pipe( - fs.createWriteStream(destfile)); - } - }); - }); - -}; -``` - -3. From the root of your project make the file executable: - `$ chmod +x hooks/copy_android_notification_icons.js` - -

- - - - {' '} - https://github.com/OneSignal/OneSignal-Cordova-SDK - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install onesignal-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/onesignal {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add onesignal-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/onesignal {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { OneSignal } from '@awesome-cordova-plugins/onesignal/ngx'; - -constructor(private oneSignal: OneSignal) { } - -... - -this.oneSignal.startInit('b2f7f966-d8cc-11e4-bed1-df8f05be55ba', '703322744261'); - -this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert); - -this.oneSignal.handleNotificationReceived().subscribe(() => { - // do something when notification is received -}); - -this.oneSignal.handleNotificationOpened().subscribe(() => { - // do something when a notification is opened -}); - -this.oneSignal.endInit(); -``` diff --git a/versioned_docs/version-v5/native/open-native-settings.md b/versioned_docs/version-v5/native/open-native-settings.md deleted file mode 100644 index 082bcf9b2bf..00000000000 --- a/versioned_docs/version-v5/native/open-native-settings.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -sidebar_label: 'Open Native Settings' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Open Native Settings - -Plugin to open native screens of iOS/android settings - -

- - - - {' '} - https://github.com/guyromb/Cordova-open-native-settings - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-open-native-settings {'\n'}$ npm install @awesome-cordova-plugins/open-native-settings {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-open-native-settings {'\n'}$ npm install @awesome-cordova-plugins/open-native-settings {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -You can open any of these settings: - -``` - "about", // ios - "accessibility", // ios, android - "account", // ios, android - "airplane_mode", // ios, android - "apn", // android - "application_details", // ios, android - "application_development", // android - "application", // android - "autolock", // ios - "battery_optimization", // android - "bluetooth", // ios, android - "castle", // ios - "captioning", // android - "cast", // android - "cellular_usage", // ios - "configuration_list", // ios - "data_roaming", // android - "date", // ios, android - "display", // ios, android - "dream", // android - "facetime", // ios - "home", // android - "keyboard", // ios, android - "keyboard_subtype", // android - "locale", // ios, android -"location", // ios, android -"locations", // ios -"manage_all_applications", // android -"manage_applications", // android -"memory_card", // android -"music", // ios -"music_equalizer", // ios -"music_volume", // ios -"network", // ios, android -"nike_ipod", // ios -"nfcsharing", // android -"nfc_payment", // android -"nfc_settings", // android -"notes", // ios -"notification_id", // ios -"passbook", // ios -"phone", // ios -"photos", // ios -"print", // android -"privacy", // android -"quick_launch", // android -"reset", // ios -"ringtone", // ios -"browser", // ios -"search", // ios, android -"security", // android -"settings", // ios, android -"show_regulatory_info", -"sound", // ios, android -"software_update", // ios -"storage", // ios, android -"store", // ios, android -"sync", // android -"tethering", // ios -"twitter", // ios -"touch", // ios -"usage", // ios, android -"user_dictionary", // android -"video", // ios -"voice_input", // android -"vpn", // ios -"wallpaper", // ios -"wifi_ip", // android -"wifi", // ios, android -"wireless" // android -``` - -```tsx -import { OpenNativeSettings } from '@awesome-cordova-plugins/open-native-settings/ngx'; - - -constructor(private openNativeSettings: OpenNativeSettings) { } - -... - - -``` diff --git a/versioned_docs/version-v5/native/openalpr.md b/versioned_docs/version-v5/native/openalpr.md deleted file mode 100644 index 66f6d89c896..00000000000 --- a/versioned_docs/version-v5/native/openalpr.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'OpenALPR' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# OpenALPR - -This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture. - -

- - - - {' '} - https://github.com/iMicknl/cordova-plugin-openalpr - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-openalpr {'\n'}$ npm install @awesome-cordova-plugins/openalpr {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-openalpr {'\n'}$ npm install @awesome-cordova-plugins/openalpr {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { OpenALPR, OpenALPROptions, OpenALPRResult } from '@awesome-cordova-plugins/openalpr/ngx'; - - -constructor(private openALPR: OpenALPR) { } - -const scanOptions: OpenALPROptions = { - country: this.openALPR.Country.EU, - amount: 3 -} - -// To get imageData, you can use the @awesome-cordova-plugins/camera module for example. It works with DestinationType.FILE_URI and DATA_URL - -this.openALPR.scan(imageData, scanOptions) - .then((res: [OpenALPRResult]) => console.log(res)) - .catch((error: Error) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/pdf-generator.md b/versioned_docs/version-v5/native/pdf-generator.md deleted file mode 100644 index 4dd0e008874..00000000000 --- a/versioned_docs/version-v5/native/pdf-generator.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -sidebar_label: 'PDFGenerator' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# PDFGenerator - -Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc. - -

- - - - {' '} - https://github.com/cesarvr/pdf-generator - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-pdf-generator {'\n'}$ npm install @awesome-cordova-plugins/pdf-generator {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-pdf-generator {'\n'}$ npm install @awesome-cordova-plugins/pdf-generator {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { PDFGenerator } from '@awesome-cordova-plugins/pdf-generator'; - -constructor(private pdfGenerator: PDFGenerator) { } - -... - -this.pdfGenerator.fromURL(url, options).then(base64String => console.log(base64String)); - -``` diff --git a/versioned_docs/version-v5/native/photo-library.md b/versioned_docs/version-v5/native/photo-library.md deleted file mode 100644 index 451010f40bc..00000000000 --- a/versioned_docs/version-v5/native/photo-library.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -sidebar_label: 'Photo Library' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Photo Library - -The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well. -Saving photos and videos to the library is also supported. -cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how. - -

- - - - {' '} - https://github.com/terikon/cordova-plugin-photo-library - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-photo-library {'\n'}$ npm install @awesome-cordova-plugins/photo-library {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-photo-library {'\n'}$ npm install @awesome-cordova-plugins/photo-library {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { PhotoLibrary } from '@awesome-cordova-plugins/photo-library/ngx'; - -constructor(private photoLibrary: PhotoLibrary) { } - -this.photoLibrary.requestAuthorization().then(() => { - this.photoLibrary.getLibrary().subscribe({ - next: library => { - library.forEach(function(libraryItem) { - console.log(libraryItem.id); // ID of the photo - console.log(libraryItem.photoURL); // Cross-platform access to photo - console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail - console.log(libraryItem.fileName); - console.log(libraryItem.width); - console.log(libraryItem.height); - console.log(libraryItem.creationDate); - console.log(libraryItem.latitude); - console.log(libraryItem.longitude); - console.log(libraryItem.albumIds); // array of ids of appropriate AlbumItem, only of includeAlbumsData was used - }); - }, - error: err => { console.log('could not get photos'); }, - complete: () => { console.log('done getting photos'); } - }); -}) -.catch(err => console.log('permissions weren\'t granted')); - -``` diff --git a/versioned_docs/version-v5/native/photo-viewer.md b/versioned_docs/version-v5/native/photo-viewer.md deleted file mode 100644 index d8c419cbc70..00000000000 --- a/versioned_docs/version-v5/native/photo-viewer.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -sidebar_label: 'Photo Viewer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Photo Viewer - -This plugin can display your image in full screen with the ability to pan, zoom, and share the image. - -

- - - - {' '} - https://github.com/sarriaroman/photoviewer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com-sarriaroman-photoviewer {'\n'}$ npm install @awesome-cordova-plugins/photo-viewer {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add com-sarriaroman-photoviewer {'\n'}$ npm install @awesome-cordova-plugins/photo-viewer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { PhotoViewer } from '@awesome-cordova-plugins/photo-viewer/ngx'; - -constructor(private photoViewer: PhotoViewer) { } - -... - -this.photoViewer.show('https://mysite.com/path/to/image.jpg'); - -this.photoViewer.show('https://mysite.com/path/to/image.jpg', 'My image title', {share: false}); - -this.photoViewer.show('https://mysecuresite.com/path/to/image.jpg', 'My image title', {share: false, headers: '{username:foo,password:bar}'}); -``` diff --git a/versioned_docs/version-v5/native/printer.md b/versioned_docs/version-v5/native/printer.md deleted file mode 100644 index 4d04a4a1839..00000000000 --- a/versioned_docs/version-v5/native/printer.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_label: 'Printer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Printer - -Prints documents or HTML rendered content - -

- - - - {' '} - https://github.com/katzer/cordova-plugin-printer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-printer {'\n'}$ npm install @awesome-cordova-plugins/printer {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-printer {'\n'}$ npm install @awesome-cordova-plugins/printer {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Printer, PrintOptions } from '@awesome-cordova-plugins/printer/ngx'; - -constructor(private printer: Printer) { } - -... - -this.printer.isAvailable().then(onSuccess, onError); - -let options: PrintOptions = { - name: 'MyDocument', - duplex: true, - orientation: 'landscape', - monochrome: true -} - -this.printer.print(content, options).then(onSuccess, onError); -``` diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.md b/versioned_docs/version-v5/native/pspdfkit-cordova.md deleted file mode 100644 index 575f1d29187..00000000000 --- a/versioned_docs/version-v5/native/pspdfkit-cordova.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'PSPDFKit-Cordova' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# PSPDFKit-Cordova - -The official plugin to use PSPDFKit with Cordova and Ionic. - -

- - - - {' '} - https://github.com/PSPDFKit/PSPDFKit-Cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install pspdfkit-cordova {'\n'}$ npm install @awesome-cordova-plugins/pspdfkit-cordova {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add pspdfkit-cordova {'\n'}$ npm install @awesome-cordova-plugins/pspdfkit-cordova {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { PSPDFKit } from '@awesome-cordova-plugins/pspdfkit-cordova/ngx'; - - -constructor(private pspdfkit: PSPDFKit) { } - -... - -// Set your license key here. -this.pspdfkit.setLicenseKey("YOUR KEY"); - -// Show a PDF in single page mode, with a black background. -this.pspdfkit.present('document.pdf', {pageMode: 'single', backgroundColor: "black"}) - .then(result => { - console.log(result); // Success - }) - .catch(error => { - console.log(error); // Failed - }); -} - -// Scroll to page at index 1. -this.pspdfkit.setPage(1, true); - -``` diff --git a/versioned_docs/version-v5/native/purchases.md b/versioned_docs/version-v5/native/purchases.md deleted file mode 100644 index 42eb78e8dae..00000000000 --- a/versioned_docs/version-v5/native/purchases.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -sidebar_label: 'Purchases' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Purchases - -Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com) - -## Features - -| | RevenueCat | -| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| ✅ | Server-side receipt validation | -| ➡️ | [Webhooks](https://docs.revenuecat.com/docs/webhooks) - enhanced server-to-server communication with events for purchases, renewals, cancellations, and more | -| 🎯 | Subscription status tracking - know whether a user is subscribed whether they're on iOS, Android or web | -| 📊 | Analytics - automatic calculation of metrics like conversion, mrr, and churn | -| 📝 | [Online documentation](https://docs.revenuecat.com/docs) up to date | -| 🔀 | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it | -| 💯 | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases) | -| 📮 | Great support - [Help Center](https://revenuecat.zendesk.com) | -| 🤩 | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap) | - -## Getting Started - -For more detailed information, you can view our complete documentation at [docs.revenuecat.com](https://docs.revenuecat.com/docs). - -

- - - - {' '} - https://github.com/RevenueCat/cordova-plugin-purchases - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-purchases@2.0.0 {'\n'}$ npm install @awesome-cordova-plugins/purchases {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-purchases@2.0.0 {'\n'}$ npm install @awesome-cordova-plugins/purchases {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -#### 1. Get a RevenueCat API key - -Log in to the [RevenueCat dashboard](https://app.revenuecat.com) and obtain a free API key for your application. - -#### 2. Initialize the SDK - -You should only configure _Purchases_ once (usually on app launch) as soon as your app has a unique user id for your user. This can be when a user logs in if you have accounts or on launch if you can generate a random user identifier. - -```tsx - import { Platform } from "@ionic/angular"; - import { Purchases } from "@awesome-cordova-plugins/purchases/ngx"; - - constructor(public platform: Platform, private purchases: Purchases) { - platform.ready().then(() => { - this.purchases.setDebugLogsEnabled(true); // Enable to get debug logs - this.purchases.setup("my_api_key", "my_app_user_id"); - } - } -``` - -#### 3. Quickstart - -Please follow the [Quickstart Guide](https://docs.revenuecat.com/docs/) for more information on how to use the SDK - -### Requirements - -Requires XCode 11.0+ and minimum target iOS 9.0+ -This plugin has been tested with cordova-plugin-purchases@ diff --git a/versioned_docs/version-v5/native/push.md b/versioned_docs/version-v5/native/push.md deleted file mode 100644 index fbfbf1a6ad1..00000000000 --- a/versioned_docs/version-v5/native/push.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'PhoneGap Plugin for Push Notifications With Cordova and Ionic' -description: 'Register and receive push notifications on your Ionic apps using the Cordova plugin: phonegap-plugin-push. Read for how to install on supported platforms.' -sidebar_label: 'Push' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Push - -Register and receive push notifications. - -Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push). - -For TypeScript users, see the [Push plugin docs about using TypeScript for custom notifications](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/TYPESCRIPT.md). - -

- - - - {' '} - https://github.com/phonegap/phonegap-plugin-push - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install phonegap-plugin-push {'\n'}$ npm install @awesome-cordova-plugins/push {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add phonegap-plugin-push {'\n'}$ npm install @awesome-cordova-plugins/push {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Push, PushObject, PushOptions } from '@awesome-cordova-plugins/push/ngx'; - -constructor(private push: Push) { } - -... - - -// to check if we have permission -this.push.hasPermission() - .then((res: any) => { - - if (res.isEnabled) { - console.log('We have permission to send push notifications'); - } else { - console.log('We do not have permission to send push notifications'); - } - - }); - -// Create a channel (Android O and above). You'll need to provide the id, description and importance properties. -this.push.createChannel({ - id: "testchannel1", - description: "My first test channel", - // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest. - importance: 3, - //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean). - //false = no badge on app icon. - //true = badge on app icon - badge: false -}).then(() => console.log('Channel created')); - -// Delete a channel (Android O and above) -this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted')); - -// Return a list of currently configured channels -this.push.listChannels().then((channels) => console.log('List of channels', channels)) - -// to initialize push notifications - -const options: PushOptions = { - android: {}, - ios: { - alert: 'true', - badge: true, - sound: 'false' - }, - windows: {}, - browser: { - pushServiceURL: 'http://push.api.phonegap.com/v1/push' - } -} - -const pushObject: PushObject = this.push.init(options); - - -pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification)); - -pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration)); - -pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error)); - - -``` diff --git a/versioned_docs/version-v5/native/pushape-push.md b/versioned_docs/version-v5/native/pushape-push.md deleted file mode 100644 index 16223c8a195..00000000000 --- a/versioned_docs/version-v5/native/pushape-push.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_label: 'PushapePush' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# PushapePush - -Register and receive push notifications. -This plugin extends functionalities of Push native plugin in order to use it with Pushape service. - -Pushape service: @link https://glue-labs.com/pushape-invio-notifiche-push-ios-android-api-sdk - -Requires Cordova plugin: `pushape-cordova-push`. For more info, please see the [Pushape plugin docs](https://github.com/gluelabs/pushape-cordova-push). - -For TypeScript users, see the [Pushape plugin docs about using TypeScript for custom notifications](https://github.com/gluelabs/pushape-cordova-push/blob/master/docs/PUSHAPE_TYPESCRIPT.md). - -

- - - - {' '} - https://github.com/gluelabs/pushape-cordova-push - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install pushape-cordova-push {'\n'}$ npm install @awesome-cordova-plugins/pushape-push {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add pushape-cordova-push {'\n'}$ npm install @awesome-cordova-plugins/pushape-push {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { PushapePush } from '@awesome-cordova-plugins/pushape-push/ngx'; - - -constructor(private readonly pushapePush: PushapePush) { } - -... - - - -``` diff --git a/versioned_docs/version-v5/native/safari-view-controller.md b/versioned_docs/version-v5/native/safari-view-controller.md deleted file mode 100644 index 1a16ebc3434..00000000000 --- a/versioned_docs/version-v5/native/safari-view-controller.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -sidebar_label: 'Safari View Controller' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Safari View Controller - -For displaying read-only web content. - -Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller). - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-safariviewcontroller {'\n'}$ npm install @awesome-cordova-plugins/safari-view-controller {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-safariviewcontroller {'\n'}$ npm install @awesome-cordova-plugins/safari-view-controller{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SafariViewController } from '@awesome-cordova-plugins/safari-view-controller/ngx'; - -constructor(private safariViewController: SafariViewController) { } - -... - -this.safariViewController.isAvailable() - .then((available: boolean) => { - if (available) { - - this.safariViewController.show({ - url: 'http://ionic.io', - hidden: false, - animated: false, - transition: 'curl', - enterReaderModeIfAvailable: true, - tintColor: '#ff0000' - }) - .subscribe((result: any) => { - if(result.event === 'opened') console.log('Opened'); - else if(result.event === 'loaded') console.log('Loaded'); - else if(result.event === 'closed') console.log('Closed'); - }, - (error: any) => console.error(error) - ); - - } else { - // use fallback browser, example InAppBrowser - } - } - ); -``` diff --git a/versioned_docs/version-v5/native/screen-orientation.md b/versioned_docs/version-v5/native/screen-orientation.md deleted file mode 100644 index 83ada8ab234..00000000000 --- a/versioned_docs/version-v5/native/screen-orientation.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -sidebar_label: 'Screen Orientation' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Screen Orientation - -Cordova plugin to set/lock the screen orientation in a common way. - -Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-screen-orientation - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-screen-orientation {'\n'}$ npm install @awesome-cordova-plugins/screen-orientation {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-screen-orientation {'\n'}$ npm install @awesome-cordova-plugins/screen-orientation {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation/ngx'; - -constructor(private screenOrientation: ScreenOrientation) { } - -... - - -// get current -console.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape' - -// set to landscape -this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE); - -// allow user rotate -this.screenOrientation.unlock(); - -// detect orientation changes -this.screenOrientation.onChange().subscribe( - () => { - console.log("Orientation Changed"); - } -); - -``` diff --git a/versioned_docs/version-v5/native/service-discovery.md b/versioned_docs/version-v5/native/service-discovery.md deleted file mode 100644 index b3d70d13cd1..00000000000 --- a/versioned_docs/version-v5/native/service-discovery.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_label: 'ServiceDiscovery' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# ServiceDiscovery - -Simple plugin to get any SSDP / UPnP / DLNA service on a local network - -

- - - - {' '} - https://github.com/scottdermott/cordova-plugin-discovery - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-discovery {'\n'}$ npm install @awesome-cordova-plugins/service-discovery {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-discovery {'\n'}$ npm install @awesome-cordova-plugins/service-discovery {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ServiceDiscovery } from '@awesome-cordova-plugins/service-discovery'; - - -constructor(private serviceDiscovery: ServiceDiscovery) { } - -... - - -this.serviceDiscovery.getNetworkServices('ssdp:all') - .then(devices => console.log(devices)) - .catch(error => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/shake.md b/versioned_docs/version-v5/native/shake.md deleted file mode 100644 index e5e18e98478..00000000000 --- a/versioned_docs/version-v5/native/shake.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -sidebar_label: 'Shake' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Shake - -Handles shake gesture - -

- - - - {' '} - https://github.com/leecrossley/cordova-plugin-shake - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-shake {'\n'}$ npm install @awesome-cordova-plugins/shake {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-shake {'\n'}$ npm install @awesome-cordova-plugins/shake {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Shake } from '@awesome-cordova-plugins/shake/ngx'; - -constructor(private shake: Shake) { } - -... - -const watch = this.shake.startWatch(60).subscribe(() => { - // do something - }); - -watch.unsubscribe(); -``` diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.md b/versioned_docs/version-v5/native/sign-in-with-apple.md deleted file mode 100644 index bc6d98cf8fe..00000000000 --- a/versioned_docs/version-v5/native/sign-in-with-apple.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -sidebar_label: 'Sign In With Apple' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Sign In With Apple - -Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID. -Instead of filling out forms, verifying email addresses, and choosing new passwords, -they can use Sign in with Apple to set up an account and start using your app right away. -All accounts are protected with two-factor authentication for superior security, -and Apple will not track users’ activity in your app or website. -_Source:_ https://developer.apple.com/sign-in-with-apple/ - -

- - - - {' '} - https://github.com/twogate/cordova-plugin-sign-in-with-apple - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-sign-in-with-apple {'\n'}$ npm install @awesome-cordova-plugins/sign-in-with-apple {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-sign-in-with-apple {'\n'}$ npm install @awesome-cordova-plugins/sign-in-with-apple {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@awesome-cordova-plugins/sign-in-with-apple/ngx'; - - -constructor(private signInWithApple: SignInWithApple) { } - -... - - - this.signInWithApple.signin({ - requestedScopes: [ - ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName, - ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail - ] - }) - .then((res: AppleSignInResponse) => { - // https://developer.apple.com/documentation/signinwithapplerestapi/verifying_a_user - alert('Send token to apple for verification: ' + res.identityToken); - console.log(res); - }) - .catch((error: AppleSignInErrorResponse) => { - alert(error.code + ' ' + error.localizedDescription); - console.error(error); - }); - -``` diff --git a/versioned_docs/version-v5/native/smartlook.md b/versioned_docs/version-v5/native/smartlook.md deleted file mode 100644 index 8b538751c03..00000000000 --- a/versioned_docs/version-v5/native/smartlook.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Smartlook' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Smartlook - -Official Smartlook SDK plugin. -Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/ - -

- - - - {' '} - https://github.com/smartlook/cordova-smartlook.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install https://github.com/smartlook/cordova-smartlook.git {'\n'}$ npm install @awesome-cordova-plugins/smartlook { - '\n' - }$ ionic cap sync - - - - - $ ionic cordova plugin add https://github.com/smartlook/cordova-smartlook.git {'\n'}$ npm install @awesome-cordova-plugins/smartlook{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Smartlook, SmartlookSetupConfig } from '@awesome-cordova-plugins/smartlook/ngx'; - -... - -@Component( ... ) -export class AppComponent { - constructor(private smartlook: Smartlook) { - this.platform.ready().then(() => { - this.smartlook.setupAndStartRecording(new SmartlookSetupConfig("YOUR API KEY")); - } - } -} -``` diff --git a/versioned_docs/version-v5/native/sms-retriever.md b/versioned_docs/version-v5/native/sms-retriever.md deleted file mode 100644 index 32ff4b59b79..00000000000 --- a/versioned_docs/version-v5/native/sms-retriever.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Sms Retriever' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Sms Retriever - -This plugin retrives the SMS which arrive without requiring READ permissions. - -

- - - - {' '} - https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-sms-retriever-manager {'\n'}$ npm install @awesome-cordova-plugins/sms-retriever {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-sms-retriever-manager {'\n'}$ npm install @awesome-cordova-plugins/sms-retriever {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SmsRetriever } from '@awesome-cordova-plugins/sms-retriever'; - - -constructor(private smsRetriever: SmsRetriever) { } - -... - - -this.smsRetriever.getAppHash() - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); -this.smsRetriever.startWatching() - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/sms.md b/versioned_docs/version-v5/native/sms.md deleted file mode 100644 index c4ec108d654..00000000000 --- a/versioned_docs/version-v5/native/sms.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'SMS' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# SMS - -Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin). - -

- - - - {' '} - https://github.com/cordova-sms/cordova-sms-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-sms-plugin {'\n'}$ npm install @awesome-cordova-plugins/sms {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-sms-plugin {'\n'}$ npm install @awesome-cordova-plugins/sms {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SMS } from '@awesome-cordova-plugins/sms/ngx'; - -constructor(private sms: SMS) { } - - -... - - -// Send a text message using default options -this.sms.send('416123456', 'Hello world!'); -``` diff --git a/versioned_docs/version-v5/native/social-sharing.md b/versioned_docs/version-v5/native/social-sharing.md deleted file mode 100644 index 47cc115efb6..00000000000 --- a/versioned_docs/version-v5/native/social-sharing.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'Social Sharing | Cordova Social Sharing Plugin for Ionic Apps' -description: 'Social sharing for Ionic apps allows you to share text, files, images, and links via social networks, SMS, and email—read to learn about this Cordova Plugin.' -sidebar_label: 'Social Sharing' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Social Sharing - -Share text, files, images, and links via social networks, sms, and email. - -For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api - -

- - - - {' '} - https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-x-socialsharing {'\n'}$ npm install @awesome-cordova-plugins/social-sharing {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-x-socialsharing {'\n'}$ npm install @awesome-cordova-plugins/social-sharing {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS -- Windows -- Windows Phone - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SocialSharing } from '@awesome-cordova-plugins/social-sharing/ngx'; - -constructor(private socialSharing: SocialSharing) { } - -... - -// Check if sharing via email is supported -this.socialSharing.canShareViaEmail().then(() => { - // Sharing via email is possible -}).catch(() => { - // Sharing via email is not possible -}); - -// Share via email -this.socialSharing.shareViaEmail('Body', 'Subject', ['recipient@example.org']).then(() => { - // Success! -}).catch(() => { - // Error! -}); -``` diff --git a/versioned_docs/version-v5/native/speech-recognition.md b/versioned_docs/version-v5/native/speech-recognition.md deleted file mode 100644 index 0995eb0b899..00000000000 --- a/versioned_docs/version-v5/native/speech-recognition.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -sidebar_label: 'Speech Recognition' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Speech Recognition - -This plugin does speech recognition using cloud services - -

- - - - {' '} - https://github.com/pbakondy/cordova-plugin-speechrecognition - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-speechrecognition {'\n'}$ npm install @awesome-cordova-plugins/speech-recognition {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-speechrecognition {'\n'}$ npm install @awesome-cordova-plugins/speech-recognition {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SpeechRecognition } from '@awesome-cordova-plugins/speech-recognition/ngx'; - -constructor(private speechRecognition: SpeechRecognition) { } - -... - - - -// Check feature available -this.speechRecognition.isRecognitionAvailable() - .then((available: boolean) => console.log(available)) - -// Start the recognition process -this.speechRecognition.startListening(options) - .subscribe( - (matches: string[]) => console.log(matches), - (onerror) => console.log('error:', onerror) - ) - -// Stop the recognition process (iOS only) -this.speechRecognition.stopListening() - -// Get the list of supported languages -this.speechRecognition.getSupportedLanguages() - .then( - (languages: string[]) => console.log(languages), - (error) => console.log(error) - ) - -// Check permission -this.speechRecognition.hasPermission() - .then((hasPermission: boolean) => console.log(hasPermission)) - -// Request permissions -this.speechRecognition.requestPermission() - .then( - () => console.log('Granted'), - () => console.log('Denied') - ) - -``` diff --git a/versioned_docs/version-v5/native/spinner-dialog.md b/versioned_docs/version-v5/native/spinner-dialog.md deleted file mode 100644 index b6d3960d46c..00000000000 --- a/versioned_docs/version-v5/native/spinner-dialog.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'Spinner Dialog' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Spinner Dialog - -Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog. - -Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner). - -

- - - - {' '} - https://github.com/greybax/cordova-plugin-native-spinner - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-native-spinner {'\n'}$ npm install @awesome-cordova-plugins/spinner-dialog {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-native-spinner {'\n'}$ npm install @awesome-cordova-plugins/spinner-dialog {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows Phone 8 -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SpinnerDialog } from '@awesome-cordova-plugins/spinner-dialog/ngx'; - -constructor(private spinnerDialog: SpinnerDialog) { } - -... - -this.spinnerDialog.show(); - -this.spinnerDialog.hide(); -``` diff --git a/versioned_docs/version-v5/native/splash-screen.md b/versioned_docs/version-v5/native/splash-screen.md deleted file mode 100644 index 7c7dc839629..00000000000 --- a/versioned_docs/version-v5/native/splash-screen.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: 'Splash Screen | Cordova Splash Screen Plugin for Android & iOS' -description: 'This Cordova plugin displays and hides a splash screen during application launch. Show and hide the splash screen after the Android or iOS app has loaded.' -sidebar_label: 'Splash Screen' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Splash Screen - -This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded. - -

- - - - {' '} - https://github.com/apache/cordova-plugin-splashscreen - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/splash-screen {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-splashscreen {'\n'}$ npm install @awesome-cordova-plugins/splash-screen {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- iOS -- Windows - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SplashScreen } from '@awesome-cordova-plugins/splash-screen/ngx'; - -constructor(private splashScreen: SplashScreen) { } - -... - -this.splashScreen.show(); - -this.splashScreen.hide(); -``` diff --git a/versioned_docs/version-v5/native/spotify-auth.md b/versioned_docs/version-v5/native/spotify-auth.md deleted file mode 100644 index a0cfbaadfe0..00000000000 --- a/versioned_docs/version-v5/native/spotify-auth.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -sidebar_label: 'Spotify Auth' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Spotify Auth - -Cordova plugin for authenticating with Spotify - -> https://github.com/Festify/cordova-spotify-oauth - -

- - - - {' '} - https://github.com/Festify/cordova-spotify-oauth - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-spotify-oauth {'\n'}$ npm install @awesome-cordova-plugins/spotify-auth {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-spotify-oauth {'\n'}$ npm install @awesome-cordova-plugins/spotify-auth {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SpotifyAuth } from '@awesome-cordova-plugins/spotify-auth/ngx'; - -// [...] - -constructor(private spotifyAuth: SpotifyAuth) { } - -// [...] - -const config = { - clientId: "<SPOTIFY CLIENT ID>", - redirectUrl: "<REDIRECT URL, MUST MATCH WITH AUTH ENDPOINT AND SPOTIFY DEV CONSOLE>", - scopes: ["streaming"], // see Spotify Dev console for all scopes - tokenExchangeUrl: "<URL OF TOKEN EXCHANGE HTTP ENDPOINT>", - tokenRefreshUrl: "<URL OF TOKEN REFRESH HTTP ENDPOINT>", -}; - -... - -this.spotifyAuth.authorize(config) - .then(({ accessToken, expiresAt }) => { - console.log(`Got an access token, its ${accessToken}!`); - console.log(`Its going to expire in ${expiresAt - Date.now()}ms.`); - }); - -// [...] - -this.spotifyAuth.forget(); - -// [...] -``` diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.md b/versioned_docs/version-v5/native/sqlite-db-copy.md deleted file mode 100644 index 6e26b561b7e..00000000000 --- a/versioned_docs/version-v5/native/sqlite-db-copy.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'Sqlite Db Copy' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Sqlite Db Copy - -This plugin does something - -

- - - - {' '} - https://github.com/an-rahulpandey/cordova-plugin-dbcopy - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-dbcopy {'\n'}$ npm install @awesome-cordova-plugins/sqlite-db-copy {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-dbcopy {'\n'}$ npm install @awesome-cordova-plugins/sqlite-db-copy {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SqliteDbCopy } from '@awesome-cordova-plugins/sqlite-db-copy/ngx'; - - -constructor(private sqliteDbCopy: SqliteDbCopy) { } - -... - - -this.sqliteDbCopy.copy('sample.db', 0) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/sqlite-porter.md b/versioned_docs/version-v5/native/sqlite-porter.md deleted file mode 100644 index e27eff537c4..00000000000 --- a/versioned_docs/version-v5/native/sqlite-porter.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -sidebar_label: 'SQLite Porter' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# SQLite Porter - -This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON. - -

- - - - {' '} - https://github.com/dpa99c/cordova-sqlite-porter - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install uk.co.workingedge.cordova.plugin.sqliteporter {'\n'}$ npm install @awesome-cordova-plugins/sqlite-porter {'\n'} - $ ionic cap sync - - - - - $ ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter {'\n'}$ npm install @awesome-cordova-plugins/sqlite-porter{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- BlackBerry 10 -- Browser -- iOS -- Tizen -- Windows -- Windows Phone - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SQLitePorter } from '@awesome-cordova-plugins/sqlite-porter/ngx'; - - -constructor(private sqlitePorter: SQLitePorter) { } - -... - -let db = window.openDatabase('Test', '1.0', 'TestDB', 1 * 1024); -// or we can use SQLite plugin -// we will assume that we injected SQLite into this component as sqlite -this.sqlite.create({ - name: 'data.db', - location: 'default' -}) - .then((db: any) => { - let dbInstance = db._objectInstance; - // we can pass db._objectInstance as the database option in all SQLitePorter methods - }); - - -let sql = 'CREATE TABLE Artist ([Id] PRIMARY KEY, [Title]);' + - 'INSERT INTO Artist(Id,Title) VALUES ("1","Fred");'; - -this.sqlitePorter.importSqlToDb(db, sql) - .then(() => console.log('Imported')) - .catch(e => console.error(e)); - - -``` diff --git a/versioned_docs/version-v5/native/sqlite.md b/versioned_docs/version-v5/native/sqlite.md deleted file mode 100644 index 340fa74b8cb..00000000000 --- a/versioned_docs/version-v5/native/sqlite.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: "SQLite | Install Cordova SQLite Plugin for iOS and Android Apps" -description: "Access SQLite databases on supported iOS, Android, macOS, and Windows devices by installing the Cordova SQLite Plugin for Ionic Framework Applications." -sidebar_label: "SQLite -" ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# SQLite - -Access SQLite databases on the device. - -

- - - - {' '} - https://github.com/litehelpers/Cordova-sqlite-storage - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-sqlite-storage {'\n'}$ npm install @awesome-cordova-plugins/sqlite {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-sqlite-storage {'\n'}$ npm install @awesome-cordova-plugins/sqlite {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- macOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SQLite, SQLiteObject } from '@awesome-cordova-plugins/sqlite/ngx'; - -constructor(private sqlite: SQLite) { } - -... - -this.sqlite.create({ - name: 'data.db', - location: 'default' -}) - .then((db: SQLiteObject) => { - - - db.executeSql('create table danceMoves(name VARCHAR(32))', []) - .then(() => console.log('Executed SQL')) - .catch(e => console.log(e)); - - - }) - .catch(e => console.log(e)); - -``` diff --git a/versioned_docs/version-v5/native/star-prnt.md b/versioned_docs/version-v5/native/star-prnt.md deleted file mode 100644 index fadcac4a976..00000000000 --- a/versioned_docs/version-v5/native/star-prnt.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'StarPRNT' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# StarPRNT - -- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers - -

- - - - {' '} - https://github.com/auctifera-josed/starprnt - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-starprnt {'\n'}$ npm install @awesome-cordova-plugins/star-prnt {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-starprnt {'\n'}$ npm install @awesome-cordova-plugins/star-prnt {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { StarPRNT } from '@awesome-cordova-plugins/star-prnt/ngx'; - - -constructor(private starprnt: StarPRNT) { } - -... - - -this.starprnt.portDiscovery('all') - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/status-bar.md b/versioned_docs/version-v5/native/status-bar.md deleted file mode 100644 index fb1bbf6a3cf..00000000000 --- a/versioned_docs/version-v5/native/status-bar.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 'Status Bar | Cordova StatusBar Plugin for iOS and Android Apps' -description: 'Manage the appearance of the native status bar with the Cordova StatusBar Plugin. Learn how to install status bar on supported iOS and Android platforms.' -sidebar_label: 'Status Bar' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Status Bar - -Manage the appearance of the native status bar. - -Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar). - -

- - - - {' '} - https://github.com/apache/cordova-plugin-statusbar - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-statusbar {'\n'}$ npm install @awesome-cordova-plugins/status-bar {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-statusbar {'\n'}$ npm install @awesome-cordova-plugins/status-bar {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Capacitor - -Not Compatible - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { StatusBar } from '@awesome-cordova-plugins/status-bar/ngx'; - -constructor(private statusBar: StatusBar) { } - -... - -// let status bar overlay webview -this.statusBar.overlaysWebView(true); - -// set status bar to white -this.statusBar.backgroundColorByHexString('#ffffff'); -``` diff --git a/versioned_docs/version-v5/native/streaming-media.md b/versioned_docs/version-v5/native/streaming-media.md deleted file mode 100644 index 37e6a8db384..00000000000 --- a/versioned_docs/version-v5/native/streaming-media.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -sidebar_label: 'Streaming Media' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Streaming Media - -This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android. - -

- - - - {' '} - https://github.com/nchutchind/cordova-plugin-streaming-media - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-streaming-media {'\n'}$ npm install @awesome-cordova-plugins/streaming-media {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-streaming-media {'\n'}$ npm install @awesome-cordova-plugins/streaming-media {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Amazon Fire OS -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { StreamingMedia, StreamingVideoOptions } from '@awesome-cordova-plugins/streaming-media/ngx'; - -constructor(private streamingMedia: StreamingMedia) { } - -let options: StreamingVideoOptions = { - successCallback: () => { console.log('Video played') }, - errorCallback: (e) => { console.log('Error streaming') }, - orientation: 'landscape', - shouldAutoClose: true, - controls: false -}; - -this.streamingMedia.playVideo('https://path/to/video/stream', options); - -``` diff --git a/versioned_docs/version-v5/native/stripe.md b/versioned_docs/version-v5/native/stripe.md deleted file mode 100644 index 5955db35d25..00000000000 --- a/versioned_docs/version-v5/native/stripe.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Stripe' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Stripe - -A plugin that allows you to use Stripe's Native SDKs for Android and iOS. - -

- - - - {' '} - https://github.com/zyramedia/cordova-plugin-stripe - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-stripe {'\n'}$ npm install @awesome-cordova-plugins/stripe {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-stripe {'\n'}$ npm install @awesome-cordova-plugins/stripe {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- Browser -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Stripe } from '@awesome-cordova-plugins/stripe/ngx'; - -constructor(private stripe: Stripe) { } - -... - -this.stripe.setPublishableKey('my_publishable_key'); - -let card = { - number: '4242424242424242', - expMonth: 12, - expYear: 2020, - cvc: '220' -} - -this.stripe.createCardToken(card) - .then(token => console.log(token.id)) - .catch(error => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/sum-up.md b/versioned_docs/version-v5/native/sum-up.md deleted file mode 100644 index 00493a43ee0..00000000000 --- a/versioned_docs/version-v5/native/sum-up.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -sidebar_label: 'SumUp' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# SumUp - -Plugin to communicate with a SumUp payment terminal - -

- - - - {' '} - https://github.com/mariusbackes/cordova-plugin-sumup - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-sumup-plugin {'\n'}$ npm install @awesome-cordova-plugins/sum-up {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-sumup-plugin {'\n'}$ npm install @awesome-cordova-plugins/sum-up {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { SumUp } from '@awesome-cordova-plugins/sum-up'; - - -constructor(private sumUp: SumUp) { } - -const sumUpKeys: SumUpKeys = new SumUpKeys(); -sumUpKeys.affiliateKey = 'YOUR_API_KEY'; // if not provided in installation -sumUpKeys.accessToken = 'YOUR_ACCESS_TOKEN'; - -this.sumUp.login(sumUpKeys) - .then((res: SumUpResponse) => console.log(res)) - .catch((error: SumUpResponse) => console.error(error)); - - this.sumUp.auth('YOUR_ACCESS_TOKEN') - .then((res: SumUpResponse) => console.log(res)) - .catch((error: SumUpResponse) => console.error(error)); - - this.sumUp.getSettings() - .then((res: SumUpResponse) => console.log(res)) - .catch((error: SumUpResponse) => console.error(error)); - - this.sumUp.logout() - .then((res: SumUpResponse) => console.log(res)) - .catch((error: SumUpResponse) => console.error(error)); - - this.sumUp.isLoggedIn() - .then((res: SumUpLoginStatus) => console.log(res)) - .catch((error: SumUpLoginStatus) => console.error(error)); - - this.sumUp.prepare() - .then((res: SumUpResponse) => console.log(res)) - .catch((error: SumUpResponse) => console.error(error)); - -this.sumUp.closeConnection() - .then((res: SumUpResponse) => console.log(res)) - .catch((error: SumUpResponse) => console.error(error)); - -this.sumUp.pay(10.0, 'EUR') - .then((res: SumUpPayment) => console.log(res)) - .catch((error: SumUpPayment) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/taptic-engine.md b/versioned_docs/version-v5/native/taptic-engine.md deleted file mode 100644 index da541aaaf1c..00000000000 --- a/versioned_docs/version-v5/native/taptic-engine.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_label: 'Taptic Engine' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Taptic Engine - -An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer. - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-taptic-engine - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-taptic-engine {'\n'}$ npm install @awesome-cordova-plugins/taptic-engine {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-taptic-engine {'\n'}$ npm install @awesome-cordova-plugins/taptic-engine {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { TapticEngine } from '@awesome-cordova-plugins/taptic-engine/ngx'; - -... - -constructor(private taptic: TapticEngine) { } - -... - -this.taptic.selection(); - -this.taptic.notification(); - -this.taptic.impact(); - -``` diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.md b/versioned_docs/version-v5/native/tealium-adidentifier.md deleted file mode 100644 index 15d954f1b88..00000000000 --- a/versioned_docs/version-v5/native/tealium-adidentifier.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'TealiumAdIdentifier' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# TealiumAdIdentifier - -This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything. -Makes the IDFA and Google Ad Identifier available in the Tealium data layer. - -

- - - - {' '} - https://github.com/Tealium/cordova-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install tealium-cordova-adidentifier {'\n'}$ npm install @awesome-cordova-plugins/tealium-adidentifier {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add tealium-cordova-adidentifier {'\n'}$ npm install @awesome-cordova-plugins/tealium-adidentifier {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { TealiumAdIdentifier } from '@awesome-cordova-plugins/tealium-adidentifier/ngx'; - - -constructor(private adIdentifier: TealiumAdIdentifier) { } - -... - - -this.adIdentifier.setPersistent("main"); -this.adIdentifier.setVolatile("main"); - -``` diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.md b/versioned_docs/version-v5/native/tealium-installreferrer.md deleted file mode 100644 index bb1c89d210e..00000000000 --- a/versioned_docs/version-v5/native/tealium-installreferrer.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: 'TealiumInstallReferrer' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# TealiumInstallReferrer - -This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything. -Implements a Broadcast Receiver for the INSTALL_REFERRER intent. - -

- - - - {' '} - https://github.com/Tealium/cordova-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install tealium-cordova-installreferrer {'\n'}$ npm install @awesome-cordova-plugins/tealium-installreferrer {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add tealium-cordova-installreferrer {'\n'}$ npm install @awesome-cordova-plugins/tealium-installreferrer{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { TealiumInstallReferrer } from '@awesome-cordova-plugins/tealium-installreferrer/ngx'; - - -constructor(private installReferrer: TealiumInstallReferrer) { } - - -this.installReferrer.setPersistent("main"); -this.installReferrer.setVolatile("main"); - - - -``` diff --git a/versioned_docs/version-v5/native/tealium.md b/versioned_docs/version-v5/native/tealium.md deleted file mode 100644 index 0b6912f00e5..00000000000 --- a/versioned_docs/version-v5/native/tealium.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -sidebar_label: 'Tealium' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Tealium - -This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native. - -For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618) - -

- - - - {' '} - https://github.com/Tealium/cordova-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install tealium-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/tealium {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add tealium-cordova-plugin {'\n'}$ npm install @awesome-cordova-plugins/tealium {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { Tealium, TealConfig } from '@awesome-cordova-plugins/tealium/ngx'; - - -constructor(private tealium: Tealium) { } - -... - -let tealConfig: TealConfig = { - account: "<your-account>", - profile: "<your-profile>", - environment: "<your-environment>", // usually "dev", "qa" or "prod" - isLifecycleEnabled: "true", // pass "false" to disable lifecycle tracking - isCrashReporterEnabled: "false", // pass "true" to enable crash reporter (Android only) - instance: "<your-instance-name" // an arbitrary instance name. use the same instance name for all subsequent API calls -} - -this.tealium.init(tealConfig).then(()=>{ - this.tealium.trackView({"screen_name": "homescreen"}); -}); - -``` diff --git a/versioned_docs/version-v5/native/theme-detection.md b/versioned_docs/version-v5/native/theme-detection.md deleted file mode 100644 index 0a0f8449aa1..00000000000 --- a/versioned_docs/version-v5/native/theme-detection.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'Theme Detection' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Theme Detection - -Cordova plugin to detect whether dark mode is enabled or not - -

- - - - {' '} - https://github.com/mariusbackes/cordova-plugin-theme-detection - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-theme-detection {'\n'}$ npm install @awesome-cordova-plugins/theme-detection {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-plugin-theme-detection {'\n'}$ npm install @awesome-cordova-plugins/theme-detection {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ThemeDetection } from '@awesome-cordova-plugins/theme-detection'; - - -constructor(private themeDetection: ThemeDetection) { } - -... - -this.themeDetection.isAvailable() - .then((res: ThemeDetectionResponse) => { - if(res.value) { - this.themeDetection.isDarkModeEnabled().then((res: ThemeDetectionResponse) => { - console.log(res); - }) - .catch((error: any) => console.error(error)); - } - }) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/three-dee-touch.md b/versioned_docs/version-v5/native/three-dee-touch.md deleted file mode 100644 index 20a8a8fd3ab..00000000000 --- a/versioned_docs/version-v5/native/three-dee-touch.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -sidebar_label: '3D Touch' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# 3D Touch - -The 3D Touch plugin adds 3D Touch capabilities to your Cordova app. - -Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch). - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-3dtouch - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-3dtouch {'\n'}$ npm install @awesome-cordova-plugins/three-dee-touch {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-3dtouch {'\n'}$ npm install @awesome-cordova-plugins/three-dee-touch {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -Please do refer to the original plugin's repo for detailed usage. The usage example here might not be sufficient. - -```tsx -import { ThreeDeeTouch, ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from '@awesome-cordova-plugins/three-dee-touch/ngx'; - -constructor(private threeDeeTouch: ThreeDeeTouch) { } - -... - -this.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable)); - -this.threeDeeTouch.watchForceTouches() - .subscribe( - (data: ThreeDeeTouchForceTouch) => { - console.log('Force touch %' + data.force); - console.log('Force touch timestamp: ' + data.timestamp); - console.log('Force touch x: ' + data.x); - console.log('Force touch y: ' + data.y); - } - ); - - -let actions: ThreeDeeTouchQuickAction[] = [ - { - type: 'checkin', - title: 'Check in', - subtitle: 'Quickly check in', - iconType: 'Compose' - }, - { - type: 'share', - title: 'Share', - subtitle: 'Share like you care', - iconType: 'Share' - }, - { - type: 'search', - title: 'Search', - iconType: 'Search' - }, - { - title: 'Show favorites', - iconTemplate: 'HeartTemplate' - } -]; - -this.threeDeeTouch.configureQuickActions(actions); - -this.threeDeeTouch.onHomeIconPressed().subscribe( - (payload) => { - // returns an object that is the button you presed - console.log('Pressed the ${payload.title} button') - console.log(payload.type) - - } -) -``` diff --git a/versioned_docs/version-v5/native/toast.md b/versioned_docs/version-v5/native/toast.md deleted file mode 100644 index fb608a872f6..00000000000 --- a/versioned_docs/version-v5/native/toast.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Toast' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Toast - -This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser. - -Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin). - -

- - - - {' '} - https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-x-toast {'\n'}$ npm install @awesome-cordova-plugins/toast {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-x-toast {'\n'}$ npm install @awesome-cordova-plugins/toast {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- BlackBerry 10 -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Toast } from '@awesome-cordova-plugins/toast/ngx'; - -constructor(private toast: Toast) { } - -... - -this.toast.show(`I'm a toast`, '5000', 'center').subscribe( - toast => { - console.log(toast); - } -); -``` diff --git a/versioned_docs/version-v5/native/touch-id.md b/versioned_docs/version-v5/native/touch-id.md deleted file mode 100644 index fc3116251b9..00000000000 --- a/versioned_docs/version-v5/native/touch-id.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -sidebar_label: 'Touch ID' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Touch ID - -Scan the fingerprint of a user with the TouchID sensor. - -Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id). - -

- - - - {' '} - https://github.com/EddyVerbruggen/cordova-plugin-touch-id - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-touch-id {'\n'}$ npm install @awesome-cordova-plugins/touch-id {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-touch-id {'\n'}$ npm install @awesome-cordova-plugins/touch-id {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { TouchID } from '@awesome-cordova-plugins/touch-id/ngx'; - -constructor(private touchId: TouchID) { } - -... - -this.touchId.isAvailable() - .then( - res => console.log('TouchID is available!'), - err => console.error('TouchID is not available', err) - ); - -this.touchId.verifyFingerprint('Scan your fingerprint please') - .then( - res => console.log('Ok', res), - err => console.error('Error', err) - ); -``` - -### Error Codes - -The plugin will reject for various reasons. Your app will most likely need to respond to the cases differently. - -Here is a list of some of the error codes: - -- `-1` - Fingerprint scan failed more than 3 times -- `-2` or `-128` - User tapped the 'Cancel' button -- `-3` - User tapped the 'Enter Passcode' or 'Enter Password' button -- `-4` - The scan was cancelled by the system (Home button for example) -- `-6` - TouchID is not Available -- `-8` - TouchID is locked out from too many tries diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.md b/versioned_docs/version-v5/native/unvired-cordova-sdk.md deleted file mode 100644 index 495e440690d..00000000000 --- a/versioned_docs/version-v5/native/unvired-cordova-sdk.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -sidebar_label: 'Unvired Cordova SDK' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Unvired Cordova SDK - -## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP). - -## iOS Requirements - -This plugin uses Cocoapods to install dependent libraries. Please make sure you have a valid Cocoapods installation. -Once you have it ready, do update the cocoapods repo by running the following command before you install this plugin. - -``` -pod repo update -``` - -

- - - - {' '} - https://github.com/unvired/cordova-plugin-unvired-sdk/ - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install https://github.com/unvired/cordova-plugin-unvired-sdk {'\n'}$ npm install @awesome-cordova-plugins/unvired-cordova-sdk{' '} - {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add https://github.com/unvired/cordova-plugin-unvired-sdk {'\n'}$ npm install @awesome-cordova-plugins/unvired-cordova-sdk{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- iOS -- Android -- Windows -- Browser - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { UnviredCordovaSDK } from '@awesome-cordova-plugins/unvired-cordova-sdk/ngx'; - - -constructor(private unviredSDK: UnviredCordovaSDK) { } - -... -// This is usually done in app.component.ts of your app. -// Before you can interact with UMP, you need to initialize the SDK and authenticate with UMP. -// SDK Initialization -let loginParameters = new LoginParameters() -loginParameters.appName = 'UNVIRED_DIGITAL_FORMS' -loginParameters.metadataPath = '../assets/metadata.json' -let loginResult: LoginResult -try { - loginResult = await this.unviredSDK.login(loginParameters) -} -catch (error) { - this.unviredSDK.logError("AppComponent", "Initialize", "Error during login: " + error) -} - - -switch (loginResult.type) { -case LoginListenerType.auth_activation_required: -// App is not activated. i.e, User is using the app for the very first time. -// App needs to be activated before it can interact with UMP. -// At this point of time, you basically navigate to a login screen & accept username / password from the user. -// Set the username & password to loginParameters object and call authenticateAndActivate -try { - // Execute this block of code in a login screen. -let loginParameters = new LoginParameters(); -loginParameters.url = '<UMP_URL>'; -loginParameters.company = '<Company>'; -loginParameters.username = '<Username>'; -loginParameters.password = '<Password>'; -loginParameters.loginType = LoginType.unvired; -let authenticateActivateResult: AuthenticateActivateResult = await this.unviredSDK.authenticateAndActivate(loginParameters); -if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_success) { -// App is fully setup. Navigate to your app's home screen. -} else if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_error) { -console.log("Error during login: " + authenticateActivateResult.error) -} catch (error) { -this.unviredSDK.logError('LoginPage', 'auth_activation_required', 'ERROR: ' + error); -} -break; - - - -case LoginListenerType.app_requires_login: -// App is already activated. But, the user needs to enter credentials because the setting LOCAL_PASSWORD is set to YES in Unvired Admin Cockpit. -// To set LOCAL_PASSWORD property for your app, contact your administrator. -try { - // Execute this block of code in a login screen. - let loginParameters = new LoginParameters() - loginParameters.username = '<Username>'; - loginParameters.password = '<Password>'; - let authenticateLocalResult: AuthenticateLocalResult = await this.unviredSDK.authenticateLocal(loginParameters); - if (authenticateLocalResult.type === AuthenticateLocalResultType.login_success) { - // App is fully setup. Navigate to your app's home screen. - } else if (authenticateLocalResult.type === AuthenticateLocalResultType.login_error) { - console.log("Error during local login: " + authenticateActivateResult.error) - } catch (error) { - this.unviredSDK.logError('LoginPage', 'app_requires_login', 'ERROR: ' + error); -} -break; - - - -case login_success: -// The setting LOCAL_PASSWORD is set to false. -// App is fully initialized. Users can interact with the UMP -// Navigate to Home screen -break; -} - - - - - -// Synchronization APIs -// Make sync call. -let result = await this.unviredSDK.syncForeground(RequestType.QUERY, null, {"CUSTOMER_HEADER": {"field1" : "value1", "field2" : "value2"}}, 'UNVIRED_DIGITAL_FORMS_PA_MOBILE_GET_USERS', true) - -// Make async call. -let result = await this.unviredSDK.syncBackground(RequestType.QUERY, null, inputObj, 'UNVIRED_DIGITAL_FORMS_PA_MOBILE_GET_USERS', 'INPUT_GET_USERS', 'GUID', false) -// Note: Subscribe to NotificationListener to get updates on data processing in background -// However, only one screen can listen to background data updates at any point of time. -this.unviredSDK.registerNotifListener().subscribe( data => { -switch (data.type) { -case NotificationListenerType.dataSend: -break; -case NotificationListenerType.dataChanged: -break; -case NotificationListenerType.dataReceived: -break; -. -. -. -}}) - - - - - -// Database APIs -// Insert a record onto database -this.unviredsdk.dbInsert("CUSTOMER_HEADER", {"NAME":"USER","NO":"0039"}, true); - -// Update a record in database -this.unviredSDK.dbUpdate('CUSTOMER_HEADER', {"NAME":"UPDATED_USER","NO":"UPDATED_NO"}, "FORM_ID = '5caed815892215034dacad56'") - -// Delete a record in database -this.unviredSDK.dbDelete('CUSTOMER_HEADER', "FORM_ID = '5caed815892215034dacad56'") - -// Execute a SQL Query -this.unviredSDK.dbExecuteStatement('SELECT * FROM CUSTOMER_HEADER WHERE CUSTOMER_ID = "0039"') - -``` diff --git a/versioned_docs/version-v5/native/uptime.md b/versioned_docs/version-v5/native/uptime.md deleted file mode 100644 index b7a83df2cd7..00000000000 --- a/versioned_docs/version-v5/native/uptime.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -sidebar_label: 'Uptime' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Uptime - -This plugin provides the time spent in milliseconds since boot (uptime). - -

- - - - {' '} - https://github.com/s1lviu/cordova-plugin-uptime - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-uptime {'\n'}$ npm install @awesome-cordova-plugins/uptime {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-uptime {'\n'}$ npm install @awesome-cordova-plugins/uptime {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Uptime } from '@awesome-cordova-plugins/uptime/ngx'; - -constructor(private uptime: Uptime) { } - -... - -this.uptime.getUptime(includeDeepSleep) - .then(uptime => console.log(uptime)) - .catch(error => console.log(error)); - -``` diff --git a/versioned_docs/version-v5/native/urbanairship.md b/versioned_docs/version-v5/native/urbanairship.md deleted file mode 100644 index 5c9b03d1b30..00000000000 --- a/versioned_docs/version-v5/native/urbanairship.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'UrbanAirShip' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# UrbanAirShip - -This plugin does something - -

- - - - {' '} - https://www.npmjs.com/package/urbanairship-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install urbanairship-cordova {'\n'}$ npm install @awesome-cordova-plugins/urbanairship {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add urbanairship-cordova {'\n'}$ npm install @awesome-cordova-plugins/urbanairship {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { UrbanAirShip } from '@awesome-cordova-plugins/urbanairship/ngx'; - - -constructor(private urbanAirShip: UrbanAirShip) { } - -... - - -this.urbanAirShip.takeOff(config) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md b/versioned_docs/version-v5/native/usabilla-cordova-sdk.md deleted file mode 100644 index 6edc06ec17e..00000000000 --- a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -sidebar_label: 'Usabilla' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Usabilla - -Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application. -This document describes library integration steps for your Cordova project. - -For more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a-cordova) - -

- - - - {' '} - https://github.com/usabilla/usabilla-u4a-cordova - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install usabilla-cordova {'\n'}$ npm install @awesome-cordova-plugins/usabilla-cordova-sdk {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add usabilla-cordova {'\n'}$ npm install @awesome-cordova-plugins/usabilla-cordova-sdk {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Usabilla } from '@awesome-cordova-plugins/usabilla-cordova-sdk/ngx'; - - -constructor(private usabilla: Usabilla) { } - -... - - - this.usabilla.initialize( - appID: '<your_application_id>', - custom_vars: { - "key": "value" - }); - - this.usabilla.loadFeedbackForm( - formID : '<your_form_id>' - ); - -``` diff --git a/versioned_docs/version-v5/native/vibes.md b/versioned_docs/version-v5/native/vibes.md deleted file mode 100644 index 1e9e61230c9..00000000000 --- a/versioned_docs/version-v5/native/vibes.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -sidebar_label: 'Vibes' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Vibes - -This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported. - -

- - - - {' '} - https://github.com/vibes/vibes-cordova.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install vibes-cordova {'\n'}$ npm install @awesome-cordova-plugins/vibes {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add vibes-cordova {'\n'}$ npm install @awesome-cordova-plugins/vibes {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Vibes } from '@awesome-cordova-plugins/vibes/ngx'; - - -constructor(private vibes: Vibes) { } - -... - - -this.vibes.registerDevice() - .then((res: any) => console.log(`device registration success: ${res}`)) // retrieve and save the device_id from `res` JSON object - .catch((error: any) => console.error('Error registering device', error)); - -this.vibes.registerPush() - .then((res: any) => console.log(res)) - .catch((error: any) => console.error('Error registering push', error)); - -this.vibes.getVibesDeviceInfo() - .then((res: any) => console.log(res)) // retrieve the `device_id` and `push_token` from the JSON object - .catch((error: any) => console.error('Error retrieving deviceinfo', error)); - -this.vibes.fetchInboxMessages() - .then((res: any) => console.log(res)) // fetches inbox messages for this person. - .catch((error: any) => console.error('Error fetching inbox messages for this person', error)); -``` diff --git a/versioned_docs/version-v5/native/vibration.md b/versioned_docs/version-v5/native/vibration.md deleted file mode 100644 index 957becf3f63..00000000000 --- a/versioned_docs/version-v5/native/vibration.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -sidebar_label: 'Vibration' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Vibration - -Vibrates the device - -

- - - - {' '} - https://github.com/apache/cordova-plugin-vibration - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-vibration {'\n'}$ npm install @awesome-cordova-plugins/vibration {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-vibration {'\n'}$ npm install @awesome-cordova-plugins/vibration {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Vibration } from '@awesome-cordova-plugins/vibration/ngx'; - -constructor(private vibration: Vibration) { } - -... - -// Vibrate the device for a second -// Duration is ignored on iOS. -this.vibration.vibrate(1000); - -// Vibrate 2 seconds -// Pause for 1 second -// Vibrate for 2 seconds -// Patterns work on Android and Windows only -this.vibration.vibrate([2000,1000,2000]); - -// Stop any current vibrations immediately -// Works on Android and Windows only -this.vibration.vibrate(0); -``` diff --git a/versioned_docs/version-v5/native/video-editor.md b/versioned_docs/version-v5/native/video-editor.md deleted file mode 100644 index e2b7539eec1..00000000000 --- a/versioned_docs/version-v5/native/video-editor.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Video Editor' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Video Editor - -Edit videos using native device APIs - -

- - - - {' '} - https://github.com/jbavari/cordova-plugin-video-editor - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-video-editor {'\n'}$ npm install @awesome-cordova-plugins/video-editor {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-video-editor {'\n'}$ npm install @awesome-cordova-plugins/video-editor {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS -- Windows -- Windows Phone 8 - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { VideoEditor } from '@awesome-cordova-plugins/video-editor/ngx'; - -constructor(private videoEditor: VideoEditor) { } - -... - -this.videoEditor.transcodeVideo({ - fileUri: '/path/to/input.mov', - outputFileName: 'output.mp4', - outputFileType: VideoEditor.OutputFileType.MPEG4 -}) -.then((fileUri: string) => console.log('video transcode success', fileUri)) -.catch((error: any) => console.log('video transcode error', error)); - -``` diff --git a/versioned_docs/version-v5/native/video-player.md b/versioned_docs/version-v5/native/video-player.md deleted file mode 100644 index 0dc835f6501..00000000000 --- a/versioned_docs/version-v5/native/video-player.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: 'Video Player' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Video Player - -A Cordova plugin that simply allows you to immediately play a video in fullscreen mode. - -Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer). - -

- - - - {' '} - https://github.com/moust/cordova-plugin-videoplayer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install https://github.com/moust/cordova-plugin-videoplayer.git {'\n'}$ npm install @awesome-cordova-plugins/video-player{' '} - {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git {'\n'}$ npm install @awesome-cordova-plugins/video-player{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx'; - -constructor(private videoPlayer: VideoPlayer) { } - -... - -// Playing a video. -this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => { - console.log('video completed'); -}).catch(err => { - console.log(err); -}); - -``` diff --git a/versioned_docs/version-v5/native/web-intent.md b/versioned_docs/version-v5/native/web-intent.md deleted file mode 100644 index c58d35adfe5..00000000000 --- a/versioned_docs/version-v5/native/web-intent.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -sidebar_label: 'Web Intent' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Web Intent - -This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents. - -

- - - - {' '} - https://github.com/darryncampbell/darryncampbell-cordova-plugin-intent - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install com-darryncampbell-cordova-plugin-intent {'\n'}$ npm install @awesome-cordova-plugins/web-intent {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add com-darryncampbell-cordova-plugin-intent {'\n'}$ npm install @awesome-cordova-plugins/web-intent {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -For usage information please refer to the plugin's Github repo. - -```tsx -import { WebIntent } from '@awesome-cordova-plugins/web-intent/ngx'; - -constructor(private webIntent: WebIntent) { } - -... - -const options = { - action: this.webIntent.ACTION_VIEW, - url: 'path/to/file', - type: 'application/vnd.android.package-archive' -} - -this.webIntent.startActivity(options).then(onSuccess, onError); - -``` diff --git a/versioned_docs/version-v5/native/web-server.md b/versioned_docs/version-v5/native/web-server.md deleted file mode 100644 index 422ae7f6981..00000000000 --- a/versioned_docs/version-v5/native/web-server.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -sidebar_label: 'Web Server' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Web Server - -This plugin allows you to start a local dynamic content web server for android and iOS devices. - -

- - - - {' '} - https://github.com/bykof/cordova-plugin-webserver.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-webserver {'\n'}$ npm install @awesome-cordova-plugins/web-server {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-webserver {'\n'}$ npm install @awesome-cordova-plugins/web-server {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { WebServer } from '@awesome-cordova-plugins/web-server/ngx'; - - -constructor(private webServer: WebServer) { } - -... - -this.webServer.onRequest().subscribe(data => { - console.log(data); - const res: Response = { - status: 200, - body: '', - headers: { - 'Content-Type': 'text/html' - } - }; - - this.webServer.sendResponse(data.requestId, res) - .catch((error: any) => console.error(error)); -}); - -this.webServer.start(80) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/web-socket-server.md b/versioned_docs/version-v5/native/web-socket-server.md deleted file mode 100644 index 6fb8463530b..00000000000 --- a/versioned_docs/version-v5/native/web-socket-server.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -sidebar_label: 'WebSocket Server' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# WebSocket Server - -This plugin allows you to run a single, lightweight, barebone WebSocket Server. - -

- - - - {' '} - https://github.com/becvert/cordova-plugin-websocket-server - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-websocket-server {'\n'}$ npm install @awesome-cordova-plugins/web-socket-server {'\n'}$ ionic - cap sync - - - - - $ ionic cordova plugin add cordova-plugin-websocket-server {'\n'}$ npm install @awesome-cordova-plugins/web-socket-server {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { WebSocketServer } from '@awesome-cordova-plugins/web-socket-server'; - -constructor(private wsserver: WebSocketServer) { } - -... - -// start websocket server -this.wsserver.start(8888, {}).subscribe({ - next: server => console.log(`Listening on ${server.addr}:${server.port}`), - error: error => console.log(`Unexpected error`, error); -}); - -// watch for any messages -this.wsserver.watchMessage().subscribe(result => { - console.log(`Received message ${result.msg} from ${result.conn.uuid}`); -}); - -// send message to connection with specified uuid -this.wsserver.send({ uuid: '8e7c4f48-de68-4b6f-8fca-1067a353968d' }, 'Hello World'); - -// stop websocket server -this.wsserver.stop().then(server => { - console.log(`Stop listening on ${server.addr}:${server.port}`); -}); - -``` diff --git a/versioned_docs/version-v5/native/webengage.md b/versioned_docs/version-v5/native/webengage.md deleted file mode 100644 index 53b07e9f0f4..00000000000 --- a/versioned_docs/version-v5/native/webengage.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -sidebar_label: 'Webengage' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Webengage - -Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS - -

- - - - {' '} - https://github.com/WebEngage/cordova-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-webengage {'\n'}$ npm install @awesome-cordova-plugins/webengage {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-webengage {'\n'}$ npm install @awesome-cordova-plugins/webengage {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Webengage, WebengageUser, WebengagePush, WebengageNotification } from '@awesome-cordova-plugins/webengage/ngx'; - - -constructor(private webengage: Webengage, private webengageUser: WebengageUser, private webengagePush: WebengagePush, private webengageNotification: WebengageNotification ) { } - -... - -this.webengage.engage(); -``` diff --git a/versioned_docs/version-v5/native/wechat.md b/versioned_docs/version-v5/native/wechat.md deleted file mode 100644 index a718a8a72d4..00000000000 --- a/versioned_docs/version-v5/native/wechat.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -sidebar_label: 'Wechat' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Wechat - -A cordova plugin, a JS version of Wechat SDK - -

- - - - {' '} - https://github.com/xu-li/cordova-plugin-wechat.git - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-wechat {'\n'}$ npm install @awesome-cordova-plugins/wechat {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-wechat {'\n'}$ npm install @awesome-cordova-plugins/wechat {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Wechat } from '@awesome-cordova-plugins/wechat/ngx'; - - -constructor(private wechat: Wechat) { } - -... - - -this.wechat.functionName('Hello', 123) - .then((res: any) => console.log(res)) - .catch((error: any) => console.error(error)); - -``` diff --git a/versioned_docs/version-v5/native/wheel-selector.md b/versioned_docs/version-v5/native/wheel-selector.md deleted file mode 100644 index cddbf2ac964..00000000000 --- a/versioned_docs/version-v5/native/wheel-selector.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -sidebar_label: 'WheelSelector Plugin' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# WheelSelector Plugin - -Native wheel selector for Cordova (Android/iOS). - -

- - - - {' '} - https://github.com/jasonmamy/cordova-wheel-selector-plugin - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-wheel-selector-plugin {'\n'}$ npm install @awesome-cordova-plugins/wheel-selector {'\n'}$ ionic cap - sync - - - - - $ ionic cordova plugin add cordova-wheel-selector-plugin {'\n'}$ npm install @awesome-cordova-plugins/wheel-selector {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -``` -import { WheelSelector } from '@awesome-cordova-plugins/wheel-selector/ngx'; - - -constructor(private selector: WheelSelector) { } - -... - -const jsonData = { - numbers: [ - { description: "1" }, - { description: "2" }, - { description: "3" } - ], - fruits: [ - { description: "Apple" }, - { description: "Banana" }, - { description: "Tangerine" } - ], - firstNames: [ - { name: "Fred", id: '1' }, - { name: "Jane", id: '2' }, - { name: "Bob", id: '3' }, - { name: "Earl", id: '4' }, - { name: "Eunice", id: '5' } - ], - lastNames: [ - { name: "Johnson", id: '100' }, - { name: "Doe", id: '101' }, - { name: "Kinishiwa", id: '102' }, - { name: "Gordon", id: '103' }, - { name: "Smith", id: '104' } - ] -} - -... - -// basic number selection, index is always returned in the result - selectANumber() { - this.selector.show({ - title: "How Many?", - items: [ - this.jsonData.numbers - ], - }).then( - result => { - console.log(result[0].description + ' at index: ' + result[0].index); - }, - err => console.log('Error: ', err) - ); - } - - ... - - // basic selection, setting initial displayed default values: '3' 'Banana' - selectFruit() { - this.selector.show({ - title: "How Much?", - items: [ - this.jsonData.numbers, this.jsonData.fruits - ], - positiveButtonText: "Ok", - negativeButtonText: "Nope", - defaultItems: [ - {index:0, value: this.jsonData.numbers[2].description}, - {index: 1, value: this.jsonData.fruits[3].description} - ] - }).then( - result => { - console.log(result[0].description + ' ' + result[1].description); - }, - err => console.log('Error: ' + JSON.stringify(err)) - ); - } - - ... - - // more complex as overrides which key to display - // then retrieve properties from original data - selectNamesUsingDisplayKey() { - this.selector.show({ - title: "Who?", - items: [ - this.jsonData.firstNames, this.jsonData.lastNames - ], - displayKey: 'name', - defaultItems: [ - {index:0, value: this.jsonData.firstNames[2].name}, - {index: 0, value: this.jsonData.lastNames[3].name} - ] - }).then( - result => { - console.log(result[0].name + ' (id= ' + this.jsonData.firstNames[result[0].index].id + '), ' + - result[1].name + ' (id=' + this.jsonData.lastNames[result[1].index].id + ')'); - }, - err => console.log('Error: ' + JSON.stringify(err)) - ); - } - -``` diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.md b/versioned_docs/version-v5/native/wifi-wizard-2.md deleted file mode 100644 index cd3e6725e4c..00000000000 --- a/versioned_docs/version-v5/native/wifi-wizard-2.md +++ /dev/null @@ -1,531 +0,0 @@ ---- -sidebar_label: 'WifiWizard2' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# WifiWizard2 - -WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects. - -This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin. - -

- - - - {' '} - https://github.com/tripflex/WifiWizard2 - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-wifiwizard2 {'\n'}$ npm install @awesome-cordova-plugins/wifi-wizard-2 {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-wifiwizard2 {'\n'}$ npm install @awesome-cordova-plugins/wifi-wizard-2 {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -````tsx -import { WifiWizard2 } from '@awesome-cordova-plugins/wifi-wizard-2/ngx'; - - -constructor(private wifiWizard2: WifiWizard2) { } - - -# Global Functions - These are functions that can be used by both Android and iOS applications - ```tsx - this.wifiWizard2.getConnectedSSID() -```` - -- Returns connected network SSID (only if connected) in success callback, otherwise fail callback will be called (if not connected or unable to retrieve) -- This does **NOT** return the BSSID if unable to obtain SSID (like original WifiWizard did) - -```tsx -this.wifiWizard2.getConnectedBSSID(); -``` - -- Same as above, except BSSID (mac) is returned - -```tsx -this.wifiWizard2.timeout(delay); -``` - -- `delay` should be time in milliseconds to delay -- Helper async timeout delay, `delay` is optional, default is 2000ms = 2 seconds -- This method always returns a resolved promise after the delay, it will never reject or throw an error - -**Example inside async function** - -```tsx -async function example() { - await this.wifiWizard2.timeout(4000); - // do something after 4 seconds -} -``` - -**Example inside standard non-async function** - -```tsx -function example(){ - this.wifiWizard2.timeout(4000).then( function(){ - // do something after waiting 4 seconds - }): -} -``` - -**Thrown Errors** - -- `TIMEOUT_WAITING_FOR_SCAN` on timeout waiting for scan 10 seconds + -- `SCAN_FAILED` if unable to start scan - -# iOS Functions - -For functionality, you need to note the following: - -- Connect/Disconnect only works for iOS11+ -- Can't run in the simulator so you need to attach an actual device when building with xCode -- Will ensure 'HotspotConfiguration' and 'NetworkExtensions' capabilities are added to your xCode project -- To connect to open network omit `ssidPassword` or call with `false` - -```tsx -this.wifiWizard2.iOSConnectNetwork(ssid, ssidPassword); -``` - -```tsx -this.wifiWizard2.iOSDisconnectNetwork(ssid); -``` - -# Android Functions - -- **WifiWizard2** _will automagically try to enable WiFi if it's disabled when calling any android related methods that require WiFi to be enabled_ - -## Connect vs Enable - -When writing Android Java code, there is no `connect` methods, you basically either `enable` or `disable` a network. In the original versions of WifiWizard the `connect` method would basically just call `enable` in Android. -I have changed the way this works in WifiWizard2 version 3.0.0+, converting it to a helper method to eliminate having to call `formatWifiConfig` then `add` and then `enable` ... the `connect` method will now automatically call `formatWifiConfig`, then call `add` to either add or update the network configuration, and then call `enable`. -If the connect method is unable to update existing network configuration (added by user or other apps), but there is a valid network ID, it will still attempt to enable that network ID. - -```tsx -this.wifiWizard2.connect(ssid, bindAll, password, algorithm, isHiddenSSID); -``` - -- `ssid` should be the SSID to connect to _required_ -- `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection (default is `false`) _optional_ -- See `WifiWizard2.enable` for more details regarding `bindAll` feature -- `algorithm` and `password` is not required if connecting to an open network -- Currently `WPA` and `WEP` are only supported algorithms -- For `WPA2` just pass `WPA` as the algorithm -- Set `isHiddenSSID` to `true` if the network you're connecting to is hidden -- These arguments are the same as for `formatWifiConfig` -- This method essentially calls `formatWifiConfig` then `add` then `enable` -- If unable to update network configuration (was added by user or other app), but a valid network ID exists, this method will still attempt to enable the network -- Promise will not be returned until method has verified that connection to WiFi was in completed state (waits up to 60 seconds) - -**Thrown Errors** - -- `CONNECT_FAILED_TIMEOUT` unable to verify connection, timed out after 60 seconds -- `INVALID_NETWORK_ID_TO_CONNECT` Unable to connect based on generated wifi config -- `INTERPUT_EXCEPT_WHILE_CONNECTING` Interupt exception while waiting for connection - -## Disconnect vs Disable - -Same as above for Connect vs Enable, except in this situation, `disconnect` will first disable the network, and then attempt to remove it (if SSID is passed) - -```tsx -this.wifiWizard2.disconnect(ssid); -``` - -- `ssid` can either be an SSID (string) or a network ID (integer) -- `ssid` is **OPTIONAL** .. if not passed, will disconnect current WiFi (almost all Android versions now will just automatically reconnect to last wifi after disconnecting) -- If `ssid` is provided, this method will first attempt to `disable` and then `remove` the network -- If you do not want to remove network configuration, use `disable` instead - -**Thrown Errors** - -- `DISCONNECT_NET_REMOVE_ERROR` Android returned error when removing wifi configuration -- `DISCONNECT_NET_DISABLE_ERROR` Unable to connect based on generated wifi config -- `DISCONNECT_NET_ID_NOT_FOUND` Unable to determine network ID to disconnect/remove (from passed SSID) -- `ERROR_DISCONNECT` - Android error disconnecting wifi (only when SSID is not passed) - -```tsx -this.wifiWizard2.formatWifiConfig(ssid, password, algorithm, isHiddenSSID); -``` - -- `algorithm` and `password` is not required if connecting to an open network -- Currently `WPA` and `WEP` are only supported algorithms -- For `WPA2` just pass `WPA` as the algorithm -- Set `isHiddenSSID` to `true` if the network you're connecting to is hidden - -```tsx -this.wifiWizard2.formatWPAConfig(ssid, password, isHiddenSSID); -``` - -- This is just a helper method that calls `WifiWizard2.formatWifiConfig( ssid, password, 'WPA', isHiddenSSID );` - -```tsx -this.wifiWizard2.add(wifi); -``` - -- `wifi` must be an object formatted by `formatWifiConfig`, this **must** be done before calling `enable` - -**Thrown Errors** - -- `AUTH_TYPE_NOT_SUPPORTED` - Invalid auth type specified -- `ERROR_ADDING_NETWORK` - Android returned `-1` specifying error adding network -- `ERROR_UPDATING_NETWORK` - Same as above, except an existing network ID was found, and unable to update it - -```tsx -this.wifiWizard2.remove(ssid); -``` - -- `ssid` can either be an SSID (string) or a network ID (integer) -- Please note, most newer versions of Android will only allow wifi to be removed if created by your application - -**Thrown Errors** - -- `UNABLE_TO_REMOVE` Android returned failure in removing network -- `REMOVE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID - -```tsx -this.wifiWizard2.listNetworks(); -``` - -```tsx -this.wifiWizard2.scan([options]); -``` - -- Same as calling `startScan` and then `getScanResults`, except this method will only resolve the promise after the scan completes and returns the results. - -```tsx -this.wifiWizard2.startScan(); -``` - -- It is recommended to just use the `scan` method instead of `startScan` - -**Thrown Errors** - -- `STARTSCAN_FAILED` Android returned failure in starting scan - -```tsx -this.wifiWizard2.getScanResults([options]); -``` - -- `getScanResults` should only be called after calling `startScan` (it is recommended to use `scan` instead as this starts the scan, then returns the results) -- `[options]` is optional, if you do not want to specify, just pass `success` callback as first parameter, and `fail` callback as second parameter -- Retrieves a list of the available networks as an array of objects and passes them to the function listHandler. The format of the array is: - -```tsx -networks = [ -{ "level": signal_level, // raw RSSI value - "SSID": ssid, // SSID as string, with escaped double quotes: "\"ssid name\"" - "BSSID": bssid // MAC address of WiFi router as string - "frequency": frequency of the access point channel in MHz - "capabilities": capabilities // Describes the authentication, key management, and encryption schemes supported by the access point. - "timestamp": timestamp // timestamp of when the scan was completed - "channelWidth": - "centerFreq0": - "centerFreq1": - } -] -``` - -- `channelWidth` `centerFreq0` and `centerFreq1` are only supported on API > 23 (Marshmallow), any older API will return null for these values - -An options object may be passed. Currently, the only supported option is `numLevels`, and it has the following behavior: - -- if `(n == true || n < 2)`, `*.getScanResults({numLevels: n})` will return data as before, split in 5 levels; -- if `(n > 1)`, `*.getScanResults({numLevels: n})` will calculate the signal level, split in n levels; -- if `(n == false)`, `*.getScanResults({numLevels: n})` will use the raw signal level; - -```tsx -this.wifiWizard2.isWifiEnabled(); -``` - -- Returns boolean value of whether Wifi is enabled or not - -```tsx -this.wifiWizard2.setWifiEnabled(enabled); -``` - -- Pass `true` for `enabled` parameter to set Wifi enabled -- You do not need to call this function to set WiFi enabled to call other methods that require wifi enabled. This plugin will automagically enable WiFi if a method is called that requires WiFi to be enabled. - -**Thrown Errors** - -- `ERROR_SETWIFIENABLED` wifi state does not match call (enable or disable) - -```tsx -this.wifiWizard2.getConnectedNetworkID(); -``` - -- Returns currently connected network ID in success callback (only if connected), otherwise fail callback will be called - -**Thrown Errors** - -- `GET_CONNECTED_NET_ID_ERROR` Unable to determine currently connected network ID (may not be connected) - -## New to 3.1.1+ - -```tsx -this.wifiWizard2.resetBindAll(); -``` - -- Disable bindAll to WiFi network without disconnecting from WiFi - -```tsx -this.wifiWizard2.setBindAll(); -``` - -- Enable bindAll to WiFi network without disconnecting from WiFi - -```tsx -this.wifiWizard2.canConnectToInternet(); -``` - -- Returns boolean, true or false, if device is able to connect to https://www.google.com via HTTP connection (since ping is unreliable) -- Unknown errors will still be thrown like all other async functions -- If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection. -- If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html) - -```tsx -this.wifiWizard2.canConnectToRouter(); -``` - -- As `canPingWifiRouter` is notoriously unreliable, this method uses HTTP connection to test if able to connect to router (as most routers should have web server running on port 80) -- Unknown errors will still be thrown like all other async functions -- This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi -- This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html) -- Attempts to connect router IP HTTP server on port 80 (example: `http://192.168.0.1/` where `192.168.0.1` is the automatically detected IP address) - -## New to 3.0.0+ - -```tsx -this.wifiWizard2.isConnectedToInternet(); -``` - -- Returns boolean, true or false, if device is able to ping 8.8.8.8 -- Unknown errors will still be thrown like all other async functions -- If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection. -- If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html) - -```tsx -this.wifiWizard2.canPingWifiRouter(); -``` - -- Returns boolean, true or false, if device is able to ping the connected WiFi router IP (obtained from DHCP info) -- Version 3.1.1+ uses HTTP connection to test if able to connect to router (as ping previous did not work) -- Unknown errors will still be thrown like all other async functions -- This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi -- This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html) - -```tsx -this.wifiWizard2.enableWifi(); -``` - -```tsx -this.wifiWizard2.disableWifi(); -``` - -```tsx -this.wifiWizard2.getWifiIP(); -``` - -- Returns IPv4 address of currently connected WiFi, or rejects promise if IP not found or wifi not connected - -```tsx -this.wifiWizard2.getWifiRouterIP(); -``` - -- Returns IPv4 WiFi router IP from currently connected WiFi, or rejects promise if unable to determine, or wifi not connected - -**Thrown Errors** - -- `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`) - -```tsx -this.wifiWizard2.getWifiIPInfo(); -``` - -- Returns a JSON object with IPv4 address and subnet `{"ip": "192.168.1.2", "subnet": "255.255.255.0" }` or rejected promise if not found or not connected - **Thrown Errors** - -- `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`) - -```tsx -this.wifiWizard2.reconnect(); -``` - -- Reconnect to the currently active access point, **if we are currently disconnected.** - -**Thrown Errors** - -- `ERROR_RECONNECT` Android returned error when reconnecting - -```tsx -this.wifiWizard2.reassociate(); -``` - -- Reconnect to the currently active access point, **even if we are already connected.** - -**Thrown Errors** - -- `ERROR_REASSOCIATE` Android returned error when reassociating - -```tsx -this.wifiWizard2.getSSIDNetworkID(ssid); -``` - -- Get Android Network ID from passed SSID - -```tsx -this.wifiWizard2.disable(ssid); -``` - -- `ssid` can either be an SSID (string) or a network ID (integer) -- Disable the passed SSID network -- Please note that most newer versions of Android will only allow you to disable networks created by your application - -**Thrown Errors** - -- `UNABLE_TO_DISABLE` Android returned failure in disabling network -- `DISABLE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID to disable - -```tsx -this.wifiWizard2.requestPermission(); -``` - -- Request `ACCESS_FINE_LOCATION` permssion -- This Android permission is required to run `scan`, `startStart` and `getScanResults` -- You can request permission by running this function manually, or WifiWizard2 will automagically request permission when one of the functions above is called - -**Thrown Errors** - -- `PERMISSION_DENIED` user denied permission on device - -```tsx -this.wifiWizard2.enable(ssid, bindAll, waitForConnection); -``` - -- `ssid` can either be an SSID (string) or a network ID (integer) -- `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection -- Android Lollipop+ (API 21+) will not route connections to the WiFi device if it does not have internet connection. Passing `true` to `bindAll` will force Android to route connections from your Android app through Wifi, regardless of internet connection. -- If you are having problems connecting to a local IP through WiFi because it does not have internet, try enabling `bindAll` and this should fix the problem. -- During my testing, some versions of Android (5.0 - 7.1.2) would still route connections through WiFi without internet, but it was random that some versions would and would not work. -- Testing Android Oreo+ (8.0.0+) if wifi does not have internet, 100% of the time it would NOT route connections through WiFi, so you _must_ enable this for Oreo or newer to route connections from your application through wifi without internet. -- When `bindAll` is enabled, _ALL_ connections from your app will be routed through WiFi, until you call `disconnect` or `disable` -- See the Google Android Blog for [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html) -- This feature _ONLY_ works for Android Lollipop+ (API 21+), if device is running API older than 21, `bindall` will be ignored (as API older than 21 does this by default) -- Enable the passed SSID network -- You **MUST** call `WifiWizard2.add(wifi)` before calling `enable` as the wifi configuration must exist before you can enable it (or previously used `connect` without calling `disconnect`) -- This method does NOT wait or verify connection to wifi network, pass `true` to `waitForConnection` to only return promise once connection is verified in COMPLETED state to specific `ssid` - -**Thrown Errors** - -`UNABLE_TO_ENABLE` - Android returned `-1` signifying failure enabling - -# Installation - -## Master - -Run `cordova plugin add https://github.com/tripflex/wifiwizard2` - -To install from the master branch (latest on GitHub) - -To install a specific branch (add `#tag` replacing `tag` with tag from this repo, example: -`cordova plugin add https://github.com/tripflex/wifiwizard2#v3.1.1` - -Find available tags here: -https://github.com/tripflex/WifiWizard2/tags - -If you are wanting to have the latest and greatest stable version, then run the 'Releases' command below. - -## Releases - -Run `cordova plugin add cordova-plugin-wifiwizard2` - -## Meteor - -To install and use this plugin in a Meteor project, you have to specify the exact version from NPM repository: -[https://www.npmjs.com/package/cordova-plugin-wifiwizard2](https://www.npmjs.com/package/cordova-plugin-wifiwizard2) - -As of April 4th 2019, the latest version is 3.1.1: - -`meteor add cordova:cordova-plugin-wifiwizard2@3.1.1` - -# Errors/Rejections - -Methods now return formatted string errors as detailed below, instead of returning generic error messages. This allows you to check yourself what specific error was returned, and customize the error message. -In an upcoming release I may add easy ways to override generic messages, or set your own, but for now, errors returned can be found below each method/function. - -## Generic **Thrown Errors** - -`WIFI_NOT_ENABLED` - -``` - -``` diff --git a/versioned_docs/version-v5/native/wonderpush.md b/versioned_docs/version-v5/native/wonderpush.md deleted file mode 100644 index d9dfd5d223f..00000000000 --- a/versioned_docs/version-v5/native/wonderpush.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -sidebar_label: 'Push Notifications - WonderPush' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Push Notifications - WonderPush - -Send unlimited push notifications to iOS and Android devices. - -Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart). - -Advanced segmentation, automation and personalization of push messages for €1 per 1000 subscribers. - -Requires the Cordova plugin `wonderpush-cordova-sdk`. - -[WonderPush push notifications](https://www.wonderpush.com) are the most effective way -to retain your users and grow your audience while remaining fully GDPR compliant. - -

- - - - {' '} - https://github.com/wonderpush/wonderpush-cordova-sdk - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install wonderpush-cordova-sdk {'\n'}$ npm install @awesome-cordova-plugins/wonderpush {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add wonderpush-cordova-sdk {'\n'}$ npm install @awesome-cordova-plugins/wonderpush {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { WonderPush } from '@awesome-cordova-plugins/wonderpush'; - - -constructor(private wonderPush: WonderPush) { } - -... - -// Subscribe user -this.wonderPush.subscribeToNotifications() - .then(() => console.log("User subscribed to notifications")) - .catch((error: any) => console.error(error)); - - -// Send an event (a purchase in this example) -this.wonderPush.sendEvent('purchase', { - float_price: 12.99, - string_sku: "X123456" -}); - -// Tag users (as customers) -this.wonderPush.addTag('customer'); - -// Personalize -// 1. Store user details. -// 2. Use those details to create segments. -// 3. Include those details in your notifications. -this.wonderPush.putProperties({ - string_name: 'John D.', - int_age: 24 -}); - -// GDPR -// 1. set REQUIRES_USER_CONSENT=true to enable GDPR compliance. -// 2. WonderPush doesn't start until setUserConsent(true) is called. -const onClick = (userConsent: boolean) => this.wonderPush.setUserConsent(userConsent); - -// Listen to notification clicks -document.addEventListener('wonderpush.notificationOpen', function(event) { - console.log('Notification opened', event.notification); - if (event.notificationType === 'data') { - console.log('Silent notification', event.notification); - } -}); -``` diff --git a/versioned_docs/version-v5/native/youtube-video-player.md b/versioned_docs/version-v5/native/youtube-video-player.md deleted file mode 100644 index 0bb9441620f..00000000000 --- a/versioned_docs/version-v5/native/youtube-video-player.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar_label: 'Youtube Video Player' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Youtube Video Player - -Plays YouTube videos in Native YouTube App - -

- - - - {' '} - https://github.com/ihadeed/CordovaYoutubeVideoPlayer - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-youtube-video-player {'\n'}$ npm install @awesome-cordova-plugins/youtube-video-player {'\n'}$ - ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-youtube-video-player {'\n'}$ npm install @awesome-cordova-plugins/youtube-video-player{' '} - {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -For Android 5.0+ you will need to add the following to config.xml - -```xml -<preference name="YouTubeDataApiKey" value="[YOUR YOUTUBE API]" /> -``` - -For more information: https://developers.google.com/youtube/v3/getting-started - -```tsx -import { YoutubeVideoPlayer } from '@awesome-cordova-plugins/youtube-video-player/ngx'; - -constructor(private youtube: YoutubeVideoPlayer) { } - -... - - -this.youtube.openVideo('myvideoid'); - -``` diff --git a/versioned_docs/version-v5/native/zbar.md b/versioned_docs/version-v5/native/zbar.md deleted file mode 100644 index 36f4b76f574..00000000000 --- a/versioned_docs/version-v5/native/zbar.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -sidebar_label: 'ZBar' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# ZBar - -The ZBar Scanner Plugin allows you to scan 2d barcodes. - -Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar). - -

- - - - {' '} - https://github.com/tjwoon/csZBar - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-cszbar {'\n'}$ npm install @awesome-cordova-plugins/zbar {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-cszbar {'\n'}$ npm install @awesome-cordova-plugins/zbar {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { ZBar, ZBarOptions } from '@awesome-cordova-plugins/zbar/ngx'; - -constructor(private zbar: ZBar) { } - -... - -let options: ZBarOptions = { - flash: 'off', - drawSight: false - } - -this.zbar.scan(options) - .then(result => { - console.log(result); // Scanned code - }) - .catch(error => { - console.log(error); // Error message - }); - -``` diff --git a/versioned_docs/version-v5/native/zeroconf.md b/versioned_docs/version-v5/native/zeroconf.md deleted file mode 100644 index 28c5fc5b584..00000000000 --- a/versioned_docs/version-v5/native/zeroconf.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -sidebar_label: 'Zeroconf' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Zeroconf - -This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services. - -

- - - - {' '} - https://github.com/becvert/cordova-plugin-zeroconf - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova-plugin-zeroconf {'\n'}$ npm install @awesome-cordova-plugins/zeroconf {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova-plugin-zeroconf {'\n'}$ npm install @awesome-cordova-plugins/zeroconf {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Zeroconf } from '@awesome-cordova-plugins/zeroconf/ngx'; - -constructor(private zeroconf: Zeroconf) { } - -... - -// watch for services of a specified type -this.zeroconf.watch('_http._tcp.', 'local.').subscribe(result => { - if (result.action == 'added') { - console.log('service added', result.service); - } else { - console.log('service removed', result.service); - } -}); - -// publish a zeroconf service of your own -this.zeroconf.register('_http._tcp.', 'local.', 'Becvert\'s iPad', 80, { - 'foo': 'bar' -}).then(result => { - console.log('Service registered', result.service); -}); - - -// unregister your service -this.zeroconf.unregister('_http._tcp.', 'local.', 'Becvert\'s iPad'); -``` diff --git a/versioned_docs/version-v5/native/zoom.md b/versioned_docs/version-v5/native/zoom.md deleted file mode 100644 index c6494e9ee4d..00000000000 --- a/versioned_docs/version-v5/native/zoom.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -sidebar_label: 'Zoom' ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsButton from '@components/page/native/DocsButton'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import CodeBlock from '@theme/CodeBlock'; - -# Zoom - -A Cordova plugin to use Zoom Video Conferencing services on Cordova applications. - -

- - - - {' '} - https://github.com/zoom/zoom-sdk-ionic - -

- -

Stuck on a Cordova issue?

- -
- -

- If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer - premium advisory services for both community plugins and premier plugins. -

- Contact Us Today! -
- - -

- Installation -

- - - - $ npm install cordova.plugin.zoom {'\n'}$ npm install @awesome-cordova-plugins/zoom {'\n'}$ ionic cap sync - - - - - $ ionic cordova plugin add cordova.plugin.zoom {'\n'}$ npm install @awesome-cordova-plugins/zoom {'\n'} - - - -
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.   - - Learn More - or if you're interested in an enterprise version of this plugin - Contact Us - -
- - - -## Supported Platforms - -- Android -- iOS - -## Usage - -### React - -[Learn more about using Ionic Native components in React](../native-community.md#react) - -### Angular - -```tsx -import { Zoom } from '@awesome-cordova-plugins/zoom'; - - -constructor(private zoomService: Zoom) { } - -... - -// Initialize Zoom SDK, need to be called when app fired up. -this.zoomService.initialize(API_KEY, API_SECRET) - .then((success: any) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Log user in with Zoom username and password. -this.zoomService.login(userName, password) - .then((success: any) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Log user out. -this.zoomService.logout() - .then((success: boolean) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Check whether user is logged in. -this.zoomService.isLoggedIn() - .then((success: boolean) => console.log(success)) - .catch((error: any) => console.log(error)); - -// meeting options (Only available for Android) -let options = { -"no_driving_mode":true, -"no_invite":true, -"no_meeting_end_message":true, -"no_titlebar":false, -"no_bottom_toolbar":false, -"no_dial_in_via_phone":true, -"no_dial_out_to_phone":true, -"no_disconnect_audio":true, -"no_share":true, -"no_audio":true, -"no_video":true, -"no_meeting_error_message":true -}; - -// Join meeting. -this.zoomService.joinMeeting(meetingNumber, meetingPassword, displayName, options) - .then((success: any) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Start an existing meeting for non-login user. -this.zoomService.startMeetingWithZAK(meetingNumber, displayName, zoomToken, zoomAccessToken, userId, options) - .then((success: any) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Start an existing meeting for logged in user. -this.zoomService.startMeeting(meetingNumber, vanityId, options) - .then((success: any) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Start an instant meeting for logged in user. -this.zoomService.startInstantMeeting() - .then((success: anu) => console.log(success)) - .catch((error: any) => console.log(error)); - -// Set language. -this.zoomService.setLanguage("en-US") - .then((success: any) => console.log(success)) - .catch((error: any) => console.log(error)); -``` diff --git a/versioned_docs/version-v6/native-faq.md b/versioned_docs/version-v6/native-faq.md deleted file mode 100644 index ceaf06b6d38..00000000000 --- a/versioned_docs/version-v6/native-faq.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_label: FAQ -slug: /native/faq ---- - -# Frequently Asked Question - -## What is Capacitor? - -Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. - -## Permission Issues - -If you're using a plugin, it may require adding additional permissions to your native project after you install the plugin. For instance, the Capacitor Camera plugin requires the following permission for iOS: - -- `NSCameraUsageDescription` (`Privacy - Camera Usage Description`) -- `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`) -- `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`) - -You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. - - -## Unexpected behaviour - -If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved. \ No newline at end of file diff --git a/versioned_docs/version-v6/native-setup.md b/versioned_docs/version-v6/native-setup.md deleted file mode 100644 index 30a8ac5c0fc..00000000000 --- a/versioned_docs/version-v6/native-setup.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Capacitor Plugins -sidebar_label: Setup -hide_table_of_contents: true -slug: /native/setup ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - - Capacitor Plugins | Capacitor Core Plugins for Ionic Apps - - - - -Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project. - - -## Install - -To install a plugin, find the plugin you want to use and install it using your package manager, like npm: - -```shell -# Install the Capacitor Plugins -$ npm install @capacitor/camera -``` - -## Usage - -Once installed, plugins can be imported into a component and you can call the native functionality directly from your code. - -Using the [Camera plugin](native/camera.md) as an example, first install it: - -````mdx-code-block - - - -```javascript -import { Camera, CameraResultType } from '@capacitor/camera'; - -const takePicture = async () => { - const image = await Camera.getPhoto({ - quality: 90, - allowEditing: true, - resultType: CameraResultType.Uri - }); - const imageUrl = image.webPath; - imageElement.src = imageUrl; -}; -``` - - - - -```javascript -import { Component } from '@angular/core'; -import { Camera, CameraResultType } from '@capacitor/camera'; - -@Component({...}) -export class CameraComponent{ - public imageSrc = ''; - - async takePicture() { - const image = await Camera.getPhoto({ - quality: 90, - allowEditing: true, - resultType: CameraResultType.Uri - }); - const imageUrl = image.webPath; - this.imageSrc = imageUrl; - }; - -} -``` - - - - -```typescript - - - - - -``` - - - - -```javascript -import { Camera, CameraResultType } from '@capacitor/camera'; -import { useState } from 'react'; - -export function CameraComponent() { - const [imageSrc, setImageSrc] = usetState(''); - - const takePicture = async () => { - const image = await Camera.getPhoto({ - quality: 90, - allowEditing: true, - resultType: CameraResultType.Uri - }); - const imageUrl = image.webPath; - setImageSrc(imageUrl); - }; - return (...) -} -``` - - - -```` diff --git a/versioned_docs/version-v6/native.md b/versioned_docs/version-v6/native.md deleted file mode 100644 index fcc12b23411..00000000000 --- a/versioned_docs/version-v6/native.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Capacitor -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard'; - - - Native APIs: Open-Source Native Device Plugins and Integrations - - - - - - - -Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. - -While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk). - - - - - - -> Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) diff --git a/versioned_docs/version-v6/native/.gitignore b/versioned_docs/version-v6/native/.gitignore deleted file mode 100644 index d6b7ef32c84..00000000000 --- a/versioned_docs/version-v6/native/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -* -!.gitignore diff --git a/versioned_sidebars/version-v5-sidebars.json b/versioned_sidebars/version-v5-sidebars.json index f62ebf319b5..b63e63feefe 100644 --- a/versioned_sidebars/version-v5-sidebars.json +++ b/versioned_sidebars/version-v5-sidebars.json @@ -1151,42 +1151,5 @@ } ] } - ], - "version-v5/native": [ - { - "collapsed": false, - "type": "category", - "label": "Getting Started", - "items": [ - { - "type": "doc", - "id": "version-v5/native" - }, - { - "type": "doc", - "id": "version-v5/native-community" - }, - { - "type": "doc", - "id": "version-v5/native-faq" - }, - { - "type": "link", - "label": "Community vs. Enterprise", - "href": "https://ionic.io/docs/premier-plugins" - } - ] - }, - { - "collapsed": false, - "type": "category", - "label": "Plugins", - "items": [ - { - "type": "autogenerated", - "dirName": "native" - } - ] - } ] } diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json index a5acf94ee45..89216965608 100644 --- a/versioned_sidebars/version-v6-sidebars.json +++ b/versioned_sidebars/version-v6-sidebars.json @@ -1288,39 +1288,5 @@ ], "collapsible": true } - ], - "version-v6/native": [ - { - "type": "category", - "label": "Getting Started", - "collapsed": false, - "items": [ - { - "type": "doc", - "id": "version-v6/native" - }, - { - "type": "doc", - "id": "version-v6/native-setup" - }, - { - "type": "doc", - "id": "version-v6/native-faq" - } - ], - "collapsible": true - }, - { - "type": "category", - "label": "Plugins", - "collapsed": false, - "items": [ - { - "type": "autogenerated", - "dirName": "native" - } - ], - "collapsible": true - } ] } From 1559c39850834f13e7e5c33712a69e003e6fdbe7 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 11 Apr 2023 15:22:36 -0400 Subject: [PATCH 3/4] refactor(docs): unversion the Guide portion of the docs (#2902) --- crowdin.yml | 3 +- docs/developing/config.md | 147 -- docusaurus.config.js | 18 +- {docs => guide}/angular/lifecycle.md | 0 {docs => guide}/angular/navigation.md | 0 {docs => guide}/angular/overview.md | 0 {docs => guide}/angular/performance.md | 0 {docs => guide}/angular/platform.md | 0 {docs => guide}/angular/pwa.md | 0 {docs => guide}/angular/slides.md | 0 {docs => guide}/angular/storage.md | 0 {docs => guide}/angular/testing.md | 0 {docs => guide}/angular/virtual-scroll.md | 0 {docs => guide}/angular/your-first-app.md | 0 .../angular/your-first-app/2-taking-photos.md | 0 .../angular/your-first-app/3-saving-photos.md | 0 .../your-first-app/4-loading-photos.md | 0 .../angular/your-first-app/5-adding-mobile.md | 0 .../your-first-app/6-deploying-mobile.md | 0 .../angular/your-first-app/7-live-reload.md | 0 .../angular/your-first-app/8-distribute.md | 0 {docs => guide}/contributing/coc.md | 0 .../contributing/how-to-contribute.md | 0 .../core-concepts/cross-platform.md | 0 {docs => guide}/core-concepts/fundamentals.md | 0 {docs => guide}/core-concepts/webview.md | 0 .../what-are-progressive-web-apps.md | 0 {docs => guide}/deployment/app-store.md | 0 {docs => guide}/deployment/desktop-app.md | 0 {docs => guide}/deployment/play-store.mdx | 0 .../deployment/progressive-web-app.md | 0 {docs => guide}/developer-resources/books.md | 0 .../developer-resources/courses.md | 0 {docs => guide}/developer-resources/guides.md | 0 .../creating-photo-gallery-device-storage.md | 0 .../guides/first-app-v3/intro.md | 0 .../guides/first-app-v3/ios-android-camera.md | 0 .../realtime-updates-ionic-deploy.md | 0 .../guides/first-app-v3/theming.md | 0 .../track-bugs-ionic-monitoring.md | 0 .../creating-photo-gallery-device-storage.md | 0 .../guides/first-app-v4/intro.md | 0 .../guides/first-app-v4/ios-android-camera.md | 0 .../guides/first-app-v4/theming.md | 0 {docs => guide}/developer-resources/posts.md | 0 {docs => guide}/developer-resources/tools.md | 0 {docs => guide}/developer-resources/videos.md | 0 {docs => guide}/developing/android.md | 0 .../version-v6 => guide}/developing/config.md | 2 +- .../developing/config/global/index.md | 0 .../developing/config/per-component/index.md | 0 .../config/per-platform-fallback/index.md | 0 .../config/per-platform-overrides/index.md | 0 .../developing/config/per-platform/index.md | 0 .../developing/hardware-back-button.md | 0 {docs => guide}/developing/ios.md | 0 {docs => guide}/developing/keyboard.md | 0 {docs => guide}/developing/previewing.md | 0 {docs => guide}/developing/scaffolding.md | 0 {docs => guide}/developing/starting.md | 0 {docs => guide}/developing/tips.md | 0 {docs => guide}/index.md | 4 +- {docs => guide}/intro/cdn.md | 0 {docs => guide}/intro/cli.md | 0 {docs => guide}/intro/environment.md | 0 {docs => guide}/intro/first-app.md | 0 {docs => guide}/intro/next.md | 0 {docs => guide}/intro/vscode-extension.md | 0 {docs => guide}/layout/css-utilities.md | 0 {docs => guide}/layout/global-stylesheets.md | 0 {docs => guide}/layout/structure.md | 0 {docs => guide}/react.md | 0 ...onic-react-to-an-existing-react-project.md | 0 {docs => guide}/react/lifecycle.md | 0 {docs => guide}/react/navigation.md | 0 {docs => guide}/react/overlays.md | 0 {docs => guide}/react/overview.md | 0 {docs => guide}/react/performance.md | 0 {docs => guide}/react/platform.md | 0 {docs => guide}/react/pwa.md | 0 {docs => guide}/react/quickstart.md | 0 {docs => guide}/react/slides.md | 0 {docs => guide}/react/storage.md | 0 {docs => guide}/react/testing.md | 0 {docs => guide}/react/virtual-scroll.md | 0 {docs => guide}/react/your-first-app.md | 0 .../react/your-first-app/2-taking-photos.md | 0 .../react/your-first-app/3-saving-photos.md | 0 .../react/your-first-app/4-loading-photos.md | 0 .../react/your-first-app/5-adding-mobile.md | 0 .../your-first-app/6-deploying-mobile.md | 0 .../react/your-first-app/7-live-reload.md | 0 .../react/your-first-app/8-distribute.md | 0 {docs => guide}/reference/browser-support.md | 0 {docs => guide}/reference/glossary.md | 0 {docs => guide}/reference/release-notes.md | 0 {docs => guide}/reference/support.md | 0 {docs => guide}/reference/versioning.md | 0 {docs => guide}/studio/assets.md | 0 {docs => guide}/studio/code.md | 0 {docs => guide}/studio/designer.md | 0 {docs => guide}/studio/faq.md | 0 .../studio/guides/routing-and-navigation.md | 0 .../guides/using-native-functionality.md | 0 {docs => guide}/studio/running.md | 0 {docs => guide}/studio/settings.md | 0 {docs => guide}/studio/setup/installation.md | 0 {docs => guide}/studio/setup/native.md | 0 {docs => guide}/studio/start.md | 0 {docs => guide}/studio/support.md | 0 {docs => guide}/studio/terminal.md | 0 {docs => guide}/studio/theming.md | 0 {docs => guide}/techniques/security.md | 0 {docs => guide}/test/page1.md | 0 {docs => guide}/test/page2.md | 0 {docs => guide}/theming/advanced.md | 0 {docs => guide}/theming/basics.md | 0 {docs => guide}/theming/color-generator.md | 0 {docs => guide}/theming/colors.md | 0 {docs => guide}/theming/css-shadow-parts.md | 0 {docs => guide}/theming/css-variables.md | 0 {docs => guide}/theming/dark-mode.md | 0 {docs => guide}/theming/platform-styles.md | 0 {docs => guide}/theming/themes.md | 0 {docs => guide}/troubleshooting/build.md | 0 {docs => guide}/troubleshooting/cors.md | 0 {docs => guide}/troubleshooting/debugging.md | 0 {docs => guide}/troubleshooting/native.md | 0 {docs => guide}/troubleshooting/runtime.md | 0 {docs => guide}/updating/4-0.md | 0 {docs => guide}/updating/5-0.md | 0 {docs => guide}/updating/6-0.md | 0 {docs => guide}/updating/7-0.md | 0 {docs => guide}/utilities/animations.md | 0 {docs => guide}/utilities/gestures.md | 0 {docs => guide}/vue/lifecycle.md | 0 {docs => guide}/vue/navigation.md | 0 {docs => guide}/vue/overview.md | 0 {docs => guide}/vue/performance.md | 0 {docs => guide}/vue/platform.md | 0 {docs => guide}/vue/pwa.md | 0 {docs => guide}/vue/quickstart.md | 0 {docs => guide}/vue/slides.md | 0 {docs => guide}/vue/storage.md | 0 {docs => guide}/vue/testing.md | 0 {docs => guide}/vue/troubleshooting.md | 0 {docs => guide}/vue/utility-functions.md | 0 {docs => guide}/vue/virtual-scroll.md | 0 {docs => guide}/vue/your-first-app.md | 0 .../vue/your-first-app/2-taking-photos.md | 0 .../vue/your-first-app/3-saving-photos.md | 0 .../vue/your-first-app/4-loading-photos.md | 0 .../vue/your-first-app/5-adding-mobile.md | 0 .../vue/your-first-app/6-deploying-mobile.md | 0 .../vue/your-first-app/7-live-reload.md | 0 .../vue/your-first-app/8-distribute.md | 0 sidebars-guide.js | 236 +++ sidebars.js | 235 --- versioned_docs/version-v5/angular/config.md | 175 -- .../version-v5/angular/lifecycle.md | 94 - .../version-v5/angular/navigation.md | 210 --- versioned_docs/version-v5/angular/overview.md | 17 - .../version-v5/angular/performance.md | 62 - versioned_docs/version-v5/angular/platform.md | 137 -- versioned_docs/version-v5/angular/pwa.md | 145 -- versioned_docs/version-v5/angular/storage.md | 25 - versioned_docs/version-v5/angular/testing.md | 585 ------ .../version-v5/angular/your-first-app.md | 169 -- .../angular/your-first-app/2-taking-photos.md | 127 -- .../angular/your-first-app/3-saving-photos.md | 81 - .../your-first-app/4-loading-photos.md | 69 - .../angular/your-first-app/5-adding-mobile.md | 117 -- .../your-first-app/6-deploying-mobile.md | 107 -- .../angular/your-first-app/7-live-reload.md | 112 -- versioned_docs/version-v5/contributing/coc.md | 13 - .../contributing/how-to-contribute.md | 252 --- .../core-concepts/cross-platform.md | 180 -- .../version-v5/core-concepts/fundamentals.md | 40 - .../version-v5/core-concepts/webview.md | 40 - .../what-are-progressive-web-apps.md | 61 - .../version-v5/deployment/app-store.md | 67 - .../version-v5/deployment/desktop-app.md | 41 - .../version-v5/deployment/play-store.md | 72 - .../deployment/progressive-web-app.md | 19 - .../version-v5/developer-resources/books.md | 53 - .../version-v5/developer-resources/courses.md | 83 - .../version-v5/developer-resources/guides.md | 9 - .../creating-photo-gallery-device-storage.md | 195 -- .../guides/first-app-v3/intro.md | 117 -- .../guides/first-app-v3/ios-android-camera.md | 156 -- .../realtime-updates-ionic-deploy.md | 193 -- .../guides/first-app-v3/theming.md | 47 - .../track-bugs-ionic-monitoring.md | 92 - .../creating-photo-gallery-device-storage.md | 202 -- .../guides/first-app-v4/intro.md | 97 - .../guides/first-app-v4/ios-android-camera.md | 154 -- .../guides/first-app-v4/theming.md | 56 - .../version-v5/developer-resources/posts.md | 77 - .../version-v5/developer-resources/tools.md | 21 - .../version-v5/developer-resources/videos.md | 21 - .../version-v5/developing/android.md | 214 --- .../developing/hardware-back-button.md | 330 ---- versioned_docs/version-v5/developing/ios.md | 185 -- .../version-v5/developing/keyboard.md | 262 --- .../version-v5/developing/previewing.md | 32 - .../version-v5/developing/scaffolding.md | 81 - .../version-v5/developing/starting.md | 41 - versioned_docs/version-v5/developing/tips.md | 142 -- versioned_docs/version-v5/index.md | 150 -- versioned_docs/version-v5/intro/cdn.md | 159 -- versioned_docs/version-v5/intro/cli.md | 57 - .../version-v5/intro/environment.md | 57 - versioned_docs/version-v5/intro/first-app.md | 24 - versioned_docs/version-v5/intro/next.md | 22 - .../version-v5/layout/css-utilities.md | 527 ------ .../version-v5/layout/global-stylesheets.md | 66 - versioned_docs/version-v5/layout/grid.md | 510 ----- versioned_docs/version-v5/layout/rtl.md | 3 - versioned_docs/version-v5/layout/structure.md | 229 --- versioned_docs/version-v5/react.md | 140 -- versioned_docs/version-v5/react/config.md | 112 -- versioned_docs/version-v5/react/lifecycle.md | 138 -- versioned_docs/version-v5/react/navigation.md | 284 --- versioned_docs/version-v5/react/overlays.md | 91 - versioned_docs/version-v5/react/overview.md | 45 - .../version-v5/react/performance.md | 40 - versioned_docs/version-v5/react/platform.md | 46 - versioned_docs/version-v5/react/pwa.md | 119 -- versioned_docs/version-v5/react/quickstart.md | 408 ---- versioned_docs/version-v5/react/storage.md | 25 - versioned_docs/version-v5/react/testing.md | 7 - .../version-v5/react/your-first-app.md | 199 -- .../react/your-first-app/2-taking-photos.md | 139 -- .../react/your-first-app/3-saving-photos.md | 81 - .../react/your-first-app/4-loading-photos.md | 58 - .../react/your-first-app/5-adding-mobile.md | 73 - .../your-first-app/6-deploying-mobile.md | 107 -- .../react/your-first-app/7-live-reload.md | 126 -- .../version-v5/reference/browser-support.md | 28 - .../version-v5/reference/glossary.md | 544 ------ .../version-v5/reference/migration.md | 16 - .../version-v5/reference/release-notes.md | 7 - .../version-v5/reference/support.md | 79 - .../version-v5/reference/versioning.md | 24 - versioned_docs/version-v5/studio.md | 31 - versioned_docs/version-v5/studio/assets.md | 17 - versioned_docs/version-v5/studio/code.md | 40 - versioned_docs/version-v5/studio/designer.md | 179 -- versioned_docs/version-v5/studio/faq.md | 23 - .../studio/guides/routing-and-navigation.md | 29 - .../guides/using-native-functionality.md | 17 - versioned_docs/version-v5/studio/running.md | 66 - versioned_docs/version-v5/studio/settings.md | 68 - .../version-v5/studio/setup/installation.md | 17 - .../version-v5/studio/setup/native.md | 13 - versioned_docs/version-v5/studio/start.md | 13 - versioned_docs/version-v5/studio/support.md | 15 - versioned_docs/version-v5/studio/terminal.md | 36 - versioned_docs/version-v5/studio/theming.md | 15 - .../version-v5/techniques/security.md | 147 -- versioned_docs/version-v5/test/page1.md | 3 - versioned_docs/version-v5/test/page2.md | 3 - versioned_docs/version-v5/theming/advanced.md | 142 -- versioned_docs/version-v5/theming/basics.md | 37 - .../version-v5/theming/color-generator.md | 14 - versioned_docs/version-v5/theming/colors.md | 109 -- .../version-v5/theming/css-shadow-parts.md | 151 -- .../version-v5/theming/css-variables.md | 94 - .../version-v5/theming/dark-mode.md | 316 ---- .../version-v5/theming/platform-styles.md | 48 - versioned_docs/version-v5/theming/themes.md | 65 - .../version-v5/troubleshooting/build.md | 201 -- .../version-v5/troubleshooting/cors.md | 291 --- .../version-v5/troubleshooting/debugging.md | 97 - .../version-v5/troubleshooting/native.md | 92 - .../version-v5/troubleshooting/runtime.md | 199 -- .../version-v5/utilities/animations.md | 1617 ---------------- .../version-v5/utilities/gestures.md | 496 ----- versioned_docs/version-v5/vue/config.md | 113 -- versioned_docs/version-v5/vue/lifecycle.md | 105 -- versioned_docs/version-v5/vue/navigation.md | 488 ----- versioned_docs/version-v5/vue/overview.md | 54 - versioned_docs/version-v5/vue/performance.md | 50 - versioned_docs/version-v5/vue/platform.md | 46 - versioned_docs/version-v5/vue/pwa.md | 206 --- versioned_docs/version-v5/vue/quickstart.md | 845 --------- versioned_docs/version-v5/vue/storage.md | 25 - versioned_docs/version-v5/vue/testing.md | 3 - .../version-v5/vue/troubleshooting.md | 106 -- .../version-v5/vue/your-first-app.md | 254 --- .../vue/your-first-app/2-taking-photos.md | 169 -- .../vue/your-first-app/3-saving-photos.md | 72 - .../vue/your-first-app/4-loading-photos.md | 69 - .../vue/your-first-app/5-adding-mobile.md | 79 - .../vue/your-first-app/6-deploying-mobile.md | 111 -- .../vue/your-first-app/7-live-reload.md | 155 -- versioned_docs/version-v6/README.md | 17 - .../version-v6/angular/lifecycle.md | 103 -- .../version-v6/angular/navigation.md | 453 ----- versioned_docs/version-v6/angular/overview.md | 42 - .../version-v6/angular/performance.md | 69 - versioned_docs/version-v6/angular/platform.md | 216 --- versioned_docs/version-v6/angular/pwa.md | 152 -- versioned_docs/version-v6/angular/slides.md | 333 ---- versioned_docs/version-v6/angular/storage.md | 32 - versioned_docs/version-v6/angular/testing.md | 595 ------ .../version-v6/angular/virtual-scroll.md | 129 -- .../version-v6/angular/your-first-app.md | 176 -- .../angular/your-first-app/2-taking-photos.md | 134 -- .../angular/your-first-app/3-saving-photos.md | 81 - .../your-first-app/4-loading-photos.md | 69 - .../angular/your-first-app/5-adding-mobile.md | 117 -- .../your-first-app/6-deploying-mobile.md | 114 -- .../angular/your-first-app/7-live-reload.md | 114 -- .../angular/your-first-app/8-distribute.md | 100 - versioned_docs/version-v6/contributing/coc.md | 13 - .../contributing/how-to-contribute.md | 252 --- .../core-concepts/cross-platform.md | 180 -- .../version-v6/core-concepts/fundamentals.md | 47 - .../version-v6/core-concepts/webview.md | 50 - .../what-are-progressive-web-apps.md | 68 - .../version-v6/deployment/app-store.md | 74 - .../version-v6/deployment/desktop-app.md | 48 - .../version-v6/deployment/play-store.mdx | 167 -- .../deployment/progressive-web-app.md | 25 - .../version-v6/developer-resources/books.md | 53 - .../version-v6/developer-resources/courses.md | 83 - .../version-v6/developer-resources/guides.md | 9 - .../creating-photo-gallery-device-storage.md | 195 -- .../guides/first-app-v3/intro.md | 117 -- .../guides/first-app-v3/ios-android-camera.md | 156 -- .../realtime-updates-ionic-deploy.md | 193 -- .../guides/first-app-v3/theming.md | 47 - .../track-bugs-ionic-monitoring.md | 92 - .../creating-photo-gallery-device-storage.md | 202 -- .../guides/first-app-v4/intro.md | 97 - .../guides/first-app-v4/ios-android-camera.md | 154 -- .../guides/first-app-v4/theming.md | 56 - .../version-v6/developer-resources/posts.md | 77 - .../version-v6/developer-resources/tools.md | 21 - .../version-v6/developer-resources/videos.md | 21 - .../version-v6/developing/android.md | 222 --- .../developing/config/global/index.md | 67 - .../developing/config/per-component/index.md | 143 -- .../config/per-platform-fallback/index.md | 79 - .../config/per-platform-overrides/index.md | 88 - .../developing/config/per-platform/index.md | 63 - .../developing/hardware-back-button.md | 345 ---- versioned_docs/version-v6/developing/ios.md | 184 -- .../version-v6/developing/keyboard.md | 272 --- .../version-v6/developing/previewing.md | 82 - .../version-v6/developing/scaffolding.md | 91 - .../version-v6/developing/starting.md | 48 - versioned_docs/version-v6/developing/tips.md | 152 -- versioned_docs/version-v6/index.md | 159 -- versioned_docs/version-v6/intro/cdn.md | 166 -- versioned_docs/version-v6/intro/cli.md | 64 - .../version-v6/intro/environment.md | 67 - versioned_docs/version-v6/intro/first-app.md | 24 - versioned_docs/version-v6/intro/next.md | 32 - .../version-v6/intro/upgrading-to-ionic-6.md | 461 ----- .../version-v6/intro/vscode-extension.md | 39 - .../version-v6/layout/css-utilities.md | 534 ------ .../version-v6/layout/global-stylesheets.md | 73 - versioned_docs/version-v6/layout/structure.md | 236 --- versioned_docs/version-v6/react.md | 147 -- versioned_docs/version-v6/react/lifecycle.md | 147 -- versioned_docs/version-v6/react/navigation.md | 600 ------ versioned_docs/version-v6/react/overlays.md | 91 - versioned_docs/version-v6/react/overview.md | 45 - .../version-v6/react/performance.md | 47 - versioned_docs/version-v6/react/platform.md | 83 - versioned_docs/version-v6/react/pwa.md | 130 -- versioned_docs/version-v6/react/quickstart.md | 452 ----- versioned_docs/version-v6/react/slides.md | 565 ------ versioned_docs/version-v6/react/storage.md | 25 - versioned_docs/version-v6/react/testing.md | 7 - .../version-v6/react/virtual-scroll.md | 72 - .../version-v6/react/your-first-app.md | 204 -- .../react/your-first-app/2-taking-photos.md | 146 -- .../react/your-first-app/3-saving-photos.md | 81 - .../react/your-first-app/4-loading-photos.md | 65 - .../react/your-first-app/5-adding-mobile.md | 73 - .../your-first-app/6-deploying-mobile.md | 107 -- .../react/your-first-app/7-live-reload.md | 120 -- .../react/your-first-app/8-distribute.md | 100 - .../version-v6/reference/browser-support.md | 52 - .../version-v6/reference/glossary.md | 552 ------ .../version-v6/reference/migration.md | 27 - .../version-v6/reference/release-notes.md | 7 - .../version-v6/reference/support.md | 105 -- .../version-v6/reference/versioning.md | 24 - versioned_docs/version-v6/studio.md | 31 - versioned_docs/version-v6/studio/assets.md | 17 - versioned_docs/version-v6/studio/code.md | 40 - versioned_docs/version-v6/studio/designer.md | 179 -- versioned_docs/version-v6/studio/faq.md | 23 - .../studio/guides/routing-and-navigation.md | 29 - .../guides/using-native-functionality.md | 17 - versioned_docs/version-v6/studio/running.md | 66 - versioned_docs/version-v6/studio/settings.md | 68 - .../version-v6/studio/setup/installation.md | 17 - .../version-v6/studio/setup/native.md | 13 - versioned_docs/version-v6/studio/start.md | 13 - versioned_docs/version-v6/studio/support.md | 15 - versioned_docs/version-v6/studio/terminal.md | 36 - versioned_docs/version-v6/studio/theming.md | 15 - .../version-v6/techniques/security.md | 158 -- versioned_docs/version-v6/test/page1.md | 3 - versioned_docs/version-v6/test/page2.md | 3 - versioned_docs/version-v6/theming/advanced.md | 182 -- versioned_docs/version-v6/theming/basics.md | 42 - .../version-v6/theming/color-generator.md | 19 - versioned_docs/version-v6/theming/colors.md | 116 -- .../version-v6/theming/css-shadow-parts.md | 161 -- .../version-v6/theming/css-variables.md | 98 - .../version-v6/theming/dark-mode.md | 327 ---- .../version-v6/theming/platform-styles.md | 51 - versioned_docs/version-v6/theming/themes.md | 67 - .../version-v6/troubleshooting/build.md | 208 --- .../version-v6/troubleshooting/cors.md | 300 --- .../version-v6/troubleshooting/debugging.md | 100 - .../version-v6/troubleshooting/native.md | 102 - .../version-v6/troubleshooting/runtime.md | 209 --- .../version-v6/utilities/animations.md | 1635 ----------------- .../version-v6/utilities/gestures.md | 505 ----- versioned_docs/version-v6/vue/lifecycle.md | 107 -- versioned_docs/version-v6/vue/navigation.md | 672 ------- versioned_docs/version-v6/vue/overview.md | 61 - versioned_docs/version-v6/vue/performance.md | 50 - versioned_docs/version-v6/vue/platform.md | 87 - versioned_docs/version-v6/vue/pwa.md | 214 --- versioned_docs/version-v6/vue/quickstart.md | 703 ------- versioned_docs/version-v6/vue/slides.md | 568 ------ versioned_docs/version-v6/vue/storage.md | 32 - versioned_docs/version-v6/vue/testing.md | 3 - .../version-v6/vue/troubleshooting.md | 134 -- .../version-v6/vue/utility-functions.md | 184 -- .../version-v6/vue/virtual-scroll.md | 139 -- .../version-v6/vue/your-first-app.md | 261 --- .../vue/your-first-app/2-taking-photos.md | 169 -- .../vue/your-first-app/3-saving-photos.md | 72 - .../vue/your-first-app/4-loading-photos.md | 69 - .../vue/your-first-app/5-adding-mobile.md | 79 - .../vue/your-first-app/6-deploying-mobile.md | 118 -- .../vue/your-first-app/7-live-reload.md | 149 -- .../vue/your-first-app/8-distribute.md | 100 - versioned_sidebars/version-v5-sidebars.json | 534 ------ versioned_sidebars/version-v6-sidebars.json | 592 ------ 449 files changed, 257 insertions(+), 41926 deletions(-) delete mode 100644 docs/developing/config.md rename {docs => guide}/angular/lifecycle.md (100%) rename {docs => guide}/angular/navigation.md (100%) rename {docs => guide}/angular/overview.md (100%) rename {docs => guide}/angular/performance.md (100%) rename {docs => guide}/angular/platform.md (100%) rename {docs => guide}/angular/pwa.md (100%) rename {docs => guide}/angular/slides.md (100%) rename {docs => guide}/angular/storage.md (100%) rename {docs => guide}/angular/testing.md (100%) rename {docs => guide}/angular/virtual-scroll.md (100%) rename {docs => guide}/angular/your-first-app.md (100%) rename {docs => guide}/angular/your-first-app/2-taking-photos.md (100%) rename {docs => guide}/angular/your-first-app/3-saving-photos.md (100%) rename {docs => guide}/angular/your-first-app/4-loading-photos.md (100%) rename {docs => guide}/angular/your-first-app/5-adding-mobile.md (100%) rename {docs => guide}/angular/your-first-app/6-deploying-mobile.md (100%) rename {docs => guide}/angular/your-first-app/7-live-reload.md (100%) rename {docs => guide}/angular/your-first-app/8-distribute.md (100%) rename {docs => guide}/contributing/coc.md (100%) rename {docs => guide}/contributing/how-to-contribute.md (100%) rename {docs => guide}/core-concepts/cross-platform.md (100%) rename {docs => guide}/core-concepts/fundamentals.md (100%) rename {docs => guide}/core-concepts/webview.md (100%) rename {docs => guide}/core-concepts/what-are-progressive-web-apps.md (100%) rename {docs => guide}/deployment/app-store.md (100%) rename {docs => guide}/deployment/desktop-app.md (100%) rename {docs => guide}/deployment/play-store.mdx (100%) rename {docs => guide}/deployment/progressive-web-app.md (100%) rename {docs => guide}/developer-resources/books.md (100%) rename {docs => guide}/developer-resources/courses.md (100%) rename {docs => guide}/developer-resources/guides.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v3/intro.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v3/ios-android-camera.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v3/theming.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v4/intro.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v4/ios-android-camera.md (100%) rename {docs => guide}/developer-resources/guides/first-app-v4/theming.md (100%) rename {docs => guide}/developer-resources/posts.md (100%) rename {docs => guide}/developer-resources/tools.md (100%) rename {docs => guide}/developer-resources/videos.md (100%) rename {docs => guide}/developing/android.md (100%) rename {versioned_docs/version-v6 => guide}/developing/config.md (98%) rename {docs => guide}/developing/config/global/index.md (100%) rename {docs => guide}/developing/config/per-component/index.md (100%) rename {docs => guide}/developing/config/per-platform-fallback/index.md (100%) rename {docs => guide}/developing/config/per-platform-overrides/index.md (100%) rename {docs => guide}/developing/config/per-platform/index.md (100%) rename {docs => guide}/developing/hardware-back-button.md (100%) rename {docs => guide}/developing/ios.md (100%) rename {docs => guide}/developing/keyboard.md (100%) rename {docs => guide}/developing/previewing.md (100%) rename {docs => guide}/developing/scaffolding.md (100%) rename {docs => guide}/developing/starting.md (100%) rename {docs => guide}/developing/tips.md (100%) rename {docs => guide}/index.md (96%) rename {docs => guide}/intro/cdn.md (100%) rename {docs => guide}/intro/cli.md (100%) rename {docs => guide}/intro/environment.md (100%) rename {docs => guide}/intro/first-app.md (100%) rename {docs => guide}/intro/next.md (100%) rename {docs => guide}/intro/vscode-extension.md (100%) rename {docs => guide}/layout/css-utilities.md (100%) rename {docs => guide}/layout/global-stylesheets.md (100%) rename {docs => guide}/layout/structure.md (100%) rename {docs => guide}/react.md (100%) rename {docs => guide}/react/adding-ionic-react-to-an-existing-react-project.md (100%) rename {docs => guide}/react/lifecycle.md (100%) rename {docs => guide}/react/navigation.md (100%) rename {docs => guide}/react/overlays.md (100%) rename {docs => guide}/react/overview.md (100%) rename {docs => guide}/react/performance.md (100%) rename {docs => guide}/react/platform.md (100%) rename {docs => guide}/react/pwa.md (100%) rename {docs => guide}/react/quickstart.md (100%) rename {docs => guide}/react/slides.md (100%) rename {docs => guide}/react/storage.md (100%) rename {docs => guide}/react/testing.md (100%) rename {docs => guide}/react/virtual-scroll.md (100%) rename {docs => guide}/react/your-first-app.md (100%) rename {docs => guide}/react/your-first-app/2-taking-photos.md (100%) rename {docs => guide}/react/your-first-app/3-saving-photos.md (100%) rename {docs => guide}/react/your-first-app/4-loading-photos.md (100%) rename {docs => guide}/react/your-first-app/5-adding-mobile.md (100%) rename {docs => guide}/react/your-first-app/6-deploying-mobile.md (100%) rename {docs => guide}/react/your-first-app/7-live-reload.md (100%) rename {docs => guide}/react/your-first-app/8-distribute.md (100%) rename {docs => guide}/reference/browser-support.md (100%) rename {docs => guide}/reference/glossary.md (100%) rename {docs => guide}/reference/release-notes.md (100%) rename {docs => guide}/reference/support.md (100%) rename {docs => guide}/reference/versioning.md (100%) rename {docs => guide}/studio/assets.md (100%) rename {docs => guide}/studio/code.md (100%) rename {docs => guide}/studio/designer.md (100%) rename {docs => guide}/studio/faq.md (100%) rename {docs => guide}/studio/guides/routing-and-navigation.md (100%) rename {docs => guide}/studio/guides/using-native-functionality.md (100%) rename {docs => guide}/studio/running.md (100%) rename {docs => guide}/studio/settings.md (100%) rename {docs => guide}/studio/setup/installation.md (100%) rename {docs => guide}/studio/setup/native.md (100%) rename {docs => guide}/studio/start.md (100%) rename {docs => guide}/studio/support.md (100%) rename {docs => guide}/studio/terminal.md (100%) rename {docs => guide}/studio/theming.md (100%) rename {docs => guide}/techniques/security.md (100%) rename {docs => guide}/test/page1.md (100%) rename {docs => guide}/test/page2.md (100%) rename {docs => guide}/theming/advanced.md (100%) rename {docs => guide}/theming/basics.md (100%) rename {docs => guide}/theming/color-generator.md (100%) rename {docs => guide}/theming/colors.md (100%) rename {docs => guide}/theming/css-shadow-parts.md (100%) rename {docs => guide}/theming/css-variables.md (100%) rename {docs => guide}/theming/dark-mode.md (100%) rename {docs => guide}/theming/platform-styles.md (100%) rename {docs => guide}/theming/themes.md (100%) rename {docs => guide}/troubleshooting/build.md (100%) rename {docs => guide}/troubleshooting/cors.md (100%) rename {docs => guide}/troubleshooting/debugging.md (100%) rename {docs => guide}/troubleshooting/native.md (100%) rename {docs => guide}/troubleshooting/runtime.md (100%) rename {docs => guide}/updating/4-0.md (100%) rename {docs => guide}/updating/5-0.md (100%) rename {docs => guide}/updating/6-0.md (100%) rename {docs => guide}/updating/7-0.md (100%) rename {docs => guide}/utilities/animations.md (100%) rename {docs => guide}/utilities/gestures.md (100%) rename {docs => guide}/vue/lifecycle.md (100%) rename {docs => guide}/vue/navigation.md (100%) rename {docs => guide}/vue/overview.md (100%) rename {docs => guide}/vue/performance.md (100%) rename {docs => guide}/vue/platform.md (100%) rename {docs => guide}/vue/pwa.md (100%) rename {docs => guide}/vue/quickstart.md (100%) rename {docs => guide}/vue/slides.md (100%) rename {docs => guide}/vue/storage.md (100%) rename {docs => guide}/vue/testing.md (100%) rename {docs => guide}/vue/troubleshooting.md (100%) rename {docs => guide}/vue/utility-functions.md (100%) rename {docs => guide}/vue/virtual-scroll.md (100%) rename {docs => guide}/vue/your-first-app.md (100%) rename {docs => guide}/vue/your-first-app/2-taking-photos.md (100%) rename {docs => guide}/vue/your-first-app/3-saving-photos.md (100%) rename {docs => guide}/vue/your-first-app/4-loading-photos.md (100%) rename {docs => guide}/vue/your-first-app/5-adding-mobile.md (100%) rename {docs => guide}/vue/your-first-app/6-deploying-mobile.md (100%) rename {docs => guide}/vue/your-first-app/7-live-reload.md (100%) rename {docs => guide}/vue/your-first-app/8-distribute.md (100%) create mode 100644 sidebars-guide.js delete mode 100644 versioned_docs/version-v5/angular/config.md delete mode 100644 versioned_docs/version-v5/angular/lifecycle.md delete mode 100644 versioned_docs/version-v5/angular/navigation.md delete mode 100644 versioned_docs/version-v5/angular/overview.md delete mode 100644 versioned_docs/version-v5/angular/performance.md delete mode 100644 versioned_docs/version-v5/angular/platform.md delete mode 100644 versioned_docs/version-v5/angular/pwa.md delete mode 100644 versioned_docs/version-v5/angular/storage.md delete mode 100644 versioned_docs/version-v5/angular/testing.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md delete mode 100644 versioned_docs/version-v5/angular/your-first-app/7-live-reload.md delete mode 100644 versioned_docs/version-v5/contributing/coc.md delete mode 100644 versioned_docs/version-v5/contributing/how-to-contribute.md delete mode 100644 versioned_docs/version-v5/core-concepts/cross-platform.md delete mode 100644 versioned_docs/version-v5/core-concepts/fundamentals.md delete mode 100644 versioned_docs/version-v5/core-concepts/webview.md delete mode 100644 versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md delete mode 100644 versioned_docs/version-v5/deployment/app-store.md delete mode 100644 versioned_docs/version-v5/deployment/desktop-app.md delete mode 100644 versioned_docs/version-v5/deployment/play-store.md delete mode 100644 versioned_docs/version-v5/deployment/progressive-web-app.md delete mode 100644 versioned_docs/version-v5/developer-resources/books.md delete mode 100644 versioned_docs/version-v5/developer-resources/courses.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md delete mode 100644 versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md delete mode 100644 versioned_docs/version-v5/developer-resources/posts.md delete mode 100644 versioned_docs/version-v5/developer-resources/tools.md delete mode 100644 versioned_docs/version-v5/developer-resources/videos.md delete mode 100644 versioned_docs/version-v5/developing/android.md delete mode 100644 versioned_docs/version-v5/developing/hardware-back-button.md delete mode 100644 versioned_docs/version-v5/developing/ios.md delete mode 100644 versioned_docs/version-v5/developing/keyboard.md delete mode 100644 versioned_docs/version-v5/developing/previewing.md delete mode 100644 versioned_docs/version-v5/developing/scaffolding.md delete mode 100644 versioned_docs/version-v5/developing/starting.md delete mode 100644 versioned_docs/version-v5/developing/tips.md delete mode 100644 versioned_docs/version-v5/index.md delete mode 100644 versioned_docs/version-v5/intro/cdn.md delete mode 100644 versioned_docs/version-v5/intro/cli.md delete mode 100644 versioned_docs/version-v5/intro/environment.md delete mode 100644 versioned_docs/version-v5/intro/first-app.md delete mode 100644 versioned_docs/version-v5/intro/next.md delete mode 100644 versioned_docs/version-v5/layout/css-utilities.md delete mode 100644 versioned_docs/version-v5/layout/global-stylesheets.md delete mode 100644 versioned_docs/version-v5/layout/grid.md delete mode 100644 versioned_docs/version-v5/layout/rtl.md delete mode 100644 versioned_docs/version-v5/layout/structure.md delete mode 100644 versioned_docs/version-v5/react.md delete mode 100644 versioned_docs/version-v5/react/config.md delete mode 100644 versioned_docs/version-v5/react/lifecycle.md delete mode 100644 versioned_docs/version-v5/react/navigation.md delete mode 100644 versioned_docs/version-v5/react/overlays.md delete mode 100644 versioned_docs/version-v5/react/overview.md delete mode 100644 versioned_docs/version-v5/react/performance.md delete mode 100644 versioned_docs/version-v5/react/platform.md delete mode 100644 versioned_docs/version-v5/react/pwa.md delete mode 100644 versioned_docs/version-v5/react/quickstart.md delete mode 100644 versioned_docs/version-v5/react/storage.md delete mode 100644 versioned_docs/version-v5/react/testing.md delete mode 100644 versioned_docs/version-v5/react/your-first-app.md delete mode 100644 versioned_docs/version-v5/react/your-first-app/2-taking-photos.md delete mode 100644 versioned_docs/version-v5/react/your-first-app/3-saving-photos.md delete mode 100644 versioned_docs/version-v5/react/your-first-app/4-loading-photos.md delete mode 100644 versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md delete mode 100644 versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md delete mode 100644 versioned_docs/version-v5/react/your-first-app/7-live-reload.md delete mode 100644 versioned_docs/version-v5/reference/browser-support.md delete mode 100644 versioned_docs/version-v5/reference/glossary.md delete mode 100644 versioned_docs/version-v5/reference/migration.md delete mode 100644 versioned_docs/version-v5/reference/release-notes.md delete mode 100644 versioned_docs/version-v5/reference/support.md delete mode 100644 versioned_docs/version-v5/reference/versioning.md delete mode 100644 versioned_docs/version-v5/studio.md delete mode 100644 versioned_docs/version-v5/studio/assets.md delete mode 100644 versioned_docs/version-v5/studio/code.md delete mode 100644 versioned_docs/version-v5/studio/designer.md delete mode 100644 versioned_docs/version-v5/studio/faq.md delete mode 100644 versioned_docs/version-v5/studio/guides/routing-and-navigation.md delete mode 100644 versioned_docs/version-v5/studio/guides/using-native-functionality.md delete mode 100644 versioned_docs/version-v5/studio/running.md delete mode 100644 versioned_docs/version-v5/studio/settings.md delete mode 100644 versioned_docs/version-v5/studio/setup/installation.md delete mode 100644 versioned_docs/version-v5/studio/setup/native.md delete mode 100644 versioned_docs/version-v5/studio/start.md delete mode 100644 versioned_docs/version-v5/studio/support.md delete mode 100644 versioned_docs/version-v5/studio/terminal.md delete mode 100644 versioned_docs/version-v5/studio/theming.md delete mode 100644 versioned_docs/version-v5/techniques/security.md delete mode 100644 versioned_docs/version-v5/test/page1.md delete mode 100644 versioned_docs/version-v5/test/page2.md delete mode 100644 versioned_docs/version-v5/theming/advanced.md delete mode 100644 versioned_docs/version-v5/theming/basics.md delete mode 100644 versioned_docs/version-v5/theming/color-generator.md delete mode 100644 versioned_docs/version-v5/theming/colors.md delete mode 100644 versioned_docs/version-v5/theming/css-shadow-parts.md delete mode 100644 versioned_docs/version-v5/theming/css-variables.md delete mode 100644 versioned_docs/version-v5/theming/dark-mode.md delete mode 100644 versioned_docs/version-v5/theming/platform-styles.md delete mode 100644 versioned_docs/version-v5/theming/themes.md delete mode 100644 versioned_docs/version-v5/troubleshooting/build.md delete mode 100644 versioned_docs/version-v5/troubleshooting/cors.md delete mode 100644 versioned_docs/version-v5/troubleshooting/debugging.md delete mode 100644 versioned_docs/version-v5/troubleshooting/native.md delete mode 100644 versioned_docs/version-v5/troubleshooting/runtime.md delete mode 100644 versioned_docs/version-v5/utilities/animations.md delete mode 100644 versioned_docs/version-v5/utilities/gestures.md delete mode 100644 versioned_docs/version-v5/vue/config.md delete mode 100644 versioned_docs/version-v5/vue/lifecycle.md delete mode 100644 versioned_docs/version-v5/vue/navigation.md delete mode 100644 versioned_docs/version-v5/vue/overview.md delete mode 100644 versioned_docs/version-v5/vue/performance.md delete mode 100644 versioned_docs/version-v5/vue/platform.md delete mode 100644 versioned_docs/version-v5/vue/pwa.md delete mode 100644 versioned_docs/version-v5/vue/quickstart.md delete mode 100644 versioned_docs/version-v5/vue/storage.md delete mode 100644 versioned_docs/version-v5/vue/testing.md delete mode 100644 versioned_docs/version-v5/vue/troubleshooting.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md delete mode 100644 versioned_docs/version-v5/vue/your-first-app/7-live-reload.md delete mode 100644 versioned_docs/version-v6/README.md delete mode 100644 versioned_docs/version-v6/angular/lifecycle.md delete mode 100644 versioned_docs/version-v6/angular/navigation.md delete mode 100644 versioned_docs/version-v6/angular/overview.md delete mode 100644 versioned_docs/version-v6/angular/performance.md delete mode 100644 versioned_docs/version-v6/angular/platform.md delete mode 100644 versioned_docs/version-v6/angular/pwa.md delete mode 100644 versioned_docs/version-v6/angular/slides.md delete mode 100644 versioned_docs/version-v6/angular/storage.md delete mode 100644 versioned_docs/version-v6/angular/testing.md delete mode 100644 versioned_docs/version-v6/angular/virtual-scroll.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/7-live-reload.md delete mode 100644 versioned_docs/version-v6/angular/your-first-app/8-distribute.md delete mode 100644 versioned_docs/version-v6/contributing/coc.md delete mode 100644 versioned_docs/version-v6/contributing/how-to-contribute.md delete mode 100644 versioned_docs/version-v6/core-concepts/cross-platform.md delete mode 100644 versioned_docs/version-v6/core-concepts/fundamentals.md delete mode 100644 versioned_docs/version-v6/core-concepts/webview.md delete mode 100644 versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md delete mode 100644 versioned_docs/version-v6/deployment/app-store.md delete mode 100644 versioned_docs/version-v6/deployment/desktop-app.md delete mode 100644 versioned_docs/version-v6/deployment/play-store.mdx delete mode 100644 versioned_docs/version-v6/deployment/progressive-web-app.md delete mode 100644 versioned_docs/version-v6/developer-resources/books.md delete mode 100644 versioned_docs/version-v6/developer-resources/courses.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md delete mode 100644 versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md delete mode 100644 versioned_docs/version-v6/developer-resources/posts.md delete mode 100644 versioned_docs/version-v6/developer-resources/tools.md delete mode 100644 versioned_docs/version-v6/developer-resources/videos.md delete mode 100644 versioned_docs/version-v6/developing/android.md delete mode 100644 versioned_docs/version-v6/developing/config/global/index.md delete mode 100644 versioned_docs/version-v6/developing/config/per-component/index.md delete mode 100644 versioned_docs/version-v6/developing/config/per-platform-fallback/index.md delete mode 100644 versioned_docs/version-v6/developing/config/per-platform-overrides/index.md delete mode 100644 versioned_docs/version-v6/developing/config/per-platform/index.md delete mode 100644 versioned_docs/version-v6/developing/hardware-back-button.md delete mode 100644 versioned_docs/version-v6/developing/ios.md delete mode 100644 versioned_docs/version-v6/developing/keyboard.md delete mode 100644 versioned_docs/version-v6/developing/previewing.md delete mode 100644 versioned_docs/version-v6/developing/scaffolding.md delete mode 100644 versioned_docs/version-v6/developing/starting.md delete mode 100644 versioned_docs/version-v6/developing/tips.md delete mode 100644 versioned_docs/version-v6/index.md delete mode 100644 versioned_docs/version-v6/intro/cdn.md delete mode 100644 versioned_docs/version-v6/intro/cli.md delete mode 100644 versioned_docs/version-v6/intro/environment.md delete mode 100644 versioned_docs/version-v6/intro/first-app.md delete mode 100644 versioned_docs/version-v6/intro/next.md delete mode 100644 versioned_docs/version-v6/intro/upgrading-to-ionic-6.md delete mode 100644 versioned_docs/version-v6/intro/vscode-extension.md delete mode 100644 versioned_docs/version-v6/layout/css-utilities.md delete mode 100644 versioned_docs/version-v6/layout/global-stylesheets.md delete mode 100644 versioned_docs/version-v6/layout/structure.md delete mode 100644 versioned_docs/version-v6/react.md delete mode 100644 versioned_docs/version-v6/react/lifecycle.md delete mode 100644 versioned_docs/version-v6/react/navigation.md delete mode 100644 versioned_docs/version-v6/react/overlays.md delete mode 100644 versioned_docs/version-v6/react/overview.md delete mode 100644 versioned_docs/version-v6/react/performance.md delete mode 100644 versioned_docs/version-v6/react/platform.md delete mode 100644 versioned_docs/version-v6/react/pwa.md delete mode 100644 versioned_docs/version-v6/react/quickstart.md delete mode 100644 versioned_docs/version-v6/react/slides.md delete mode 100644 versioned_docs/version-v6/react/storage.md delete mode 100644 versioned_docs/version-v6/react/testing.md delete mode 100644 versioned_docs/version-v6/react/virtual-scroll.md delete mode 100644 versioned_docs/version-v6/react/your-first-app.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/2-taking-photos.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/3-saving-photos.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/4-loading-photos.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/7-live-reload.md delete mode 100644 versioned_docs/version-v6/react/your-first-app/8-distribute.md delete mode 100644 versioned_docs/version-v6/reference/browser-support.md delete mode 100644 versioned_docs/version-v6/reference/glossary.md delete mode 100644 versioned_docs/version-v6/reference/migration.md delete mode 100644 versioned_docs/version-v6/reference/release-notes.md delete mode 100644 versioned_docs/version-v6/reference/support.md delete mode 100644 versioned_docs/version-v6/reference/versioning.md delete mode 100644 versioned_docs/version-v6/studio.md delete mode 100644 versioned_docs/version-v6/studio/assets.md delete mode 100644 versioned_docs/version-v6/studio/code.md delete mode 100644 versioned_docs/version-v6/studio/designer.md delete mode 100644 versioned_docs/version-v6/studio/faq.md delete mode 100644 versioned_docs/version-v6/studio/guides/routing-and-navigation.md delete mode 100644 versioned_docs/version-v6/studio/guides/using-native-functionality.md delete mode 100644 versioned_docs/version-v6/studio/running.md delete mode 100644 versioned_docs/version-v6/studio/settings.md delete mode 100644 versioned_docs/version-v6/studio/setup/installation.md delete mode 100644 versioned_docs/version-v6/studio/setup/native.md delete mode 100644 versioned_docs/version-v6/studio/start.md delete mode 100644 versioned_docs/version-v6/studio/support.md delete mode 100644 versioned_docs/version-v6/studio/terminal.md delete mode 100644 versioned_docs/version-v6/studio/theming.md delete mode 100644 versioned_docs/version-v6/techniques/security.md delete mode 100644 versioned_docs/version-v6/test/page1.md delete mode 100644 versioned_docs/version-v6/test/page2.md delete mode 100644 versioned_docs/version-v6/theming/advanced.md delete mode 100644 versioned_docs/version-v6/theming/basics.md delete mode 100644 versioned_docs/version-v6/theming/color-generator.md delete mode 100644 versioned_docs/version-v6/theming/colors.md delete mode 100644 versioned_docs/version-v6/theming/css-shadow-parts.md delete mode 100644 versioned_docs/version-v6/theming/css-variables.md delete mode 100644 versioned_docs/version-v6/theming/dark-mode.md delete mode 100644 versioned_docs/version-v6/theming/platform-styles.md delete mode 100644 versioned_docs/version-v6/theming/themes.md delete mode 100644 versioned_docs/version-v6/troubleshooting/build.md delete mode 100644 versioned_docs/version-v6/troubleshooting/cors.md delete mode 100644 versioned_docs/version-v6/troubleshooting/debugging.md delete mode 100644 versioned_docs/version-v6/troubleshooting/native.md delete mode 100644 versioned_docs/version-v6/troubleshooting/runtime.md delete mode 100644 versioned_docs/version-v6/utilities/animations.md delete mode 100644 versioned_docs/version-v6/utilities/gestures.md delete mode 100644 versioned_docs/version-v6/vue/lifecycle.md delete mode 100644 versioned_docs/version-v6/vue/navigation.md delete mode 100644 versioned_docs/version-v6/vue/overview.md delete mode 100644 versioned_docs/version-v6/vue/performance.md delete mode 100644 versioned_docs/version-v6/vue/platform.md delete mode 100644 versioned_docs/version-v6/vue/pwa.md delete mode 100644 versioned_docs/version-v6/vue/quickstart.md delete mode 100644 versioned_docs/version-v6/vue/slides.md delete mode 100644 versioned_docs/version-v6/vue/storage.md delete mode 100644 versioned_docs/version-v6/vue/testing.md delete mode 100644 versioned_docs/version-v6/vue/troubleshooting.md delete mode 100644 versioned_docs/version-v6/vue/utility-functions.md delete mode 100644 versioned_docs/version-v6/vue/virtual-scroll.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/7-live-reload.md delete mode 100644 versioned_docs/version-v6/vue/your-first-app/8-distribute.md diff --git a/crowdin.yml b/crowdin.yml index c228fc16da1..83f8c20152a 100644 --- a/crowdin.yml +++ b/crowdin.yml @@ -9,7 +9,8 @@ files: translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% ignore: - /docs/api/**/* - - /docs/cli/commands/**/* + - source: /guide/**/* + translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% - source: /native/**/* translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% ignore: diff --git a/docs/developing/config.md b/docs/developing/config.md deleted file mode 100644 index 10ad73cec8d..00000000000 --- a/docs/developing/config.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Config ---- - -Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more. - -## Global Config - -The available config keys can be found in the [`IonicConfig`](#ionicconfig) interface. - -The following example disables ripple effects and default the mode to Material Design: - -import GlobalExample from '@site/docs/developing/config/global/index.md'; - - - -## Per-Component Config - -Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values. - -import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; - - - - -## Per-Platform Config - -Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. - -In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. - -import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md'; - - - - -### Fallbacks - -The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: - -import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md'; - - - -### Overrides - -This final example allows you to accumulate a config object based upon different platform requirements. - -import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md'; - - - -## Reading the Config (Angular) - -Ionic Angular provides a `Config` provider for accessing the Ionic Config. - -### get - -| | | -| --------------- | -------------------------------------------------------------------------------- | -| **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. | -| **Signature** | `get(key: string, fallback?: any) => any` | - -#### Examples - -```ts -import { Config } from '@ionic/angular'; - -@Component(...) -class AppComponent { - constructor(config: Config) { - const mode = config.get('mode'); - } -} -``` - -### getBoolean - -| | | -| --------------- | ------------------------------------------------------------------------------------ | -| **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. | -| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | - -#### Examples - -```ts -import { Config } from '@ionic/angular'; - -@Component(...) -class AppComponent { - constructor(config: Config) { - const swipeBackEnabled = config.getBoolean('swipeBackEnabled'); - } -} -``` - -### getNumber - -| | | -| --------------- | ------------------------------------------------------------------------------- | -| **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. | -| **Signature** | `getNumber(key: string, fallback?: number) => number` | - -## Interfaces - -### IonicConfig - -Below are the config options that Ionic uses. - -| Config | Type | Description | -| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | diff --git a/docusaurus.config.js b/docusaurus.config.js index 41fb8e9bae9..bdf0bb93da4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -74,8 +74,7 @@ module.exports = { }, items: [ { - type: 'doc', - docId: 'index', + to: 'guide', label: 'Guide', position: 'left', }, @@ -278,6 +277,21 @@ module.exports = { }, }, ], + [ + '@docusaurus/plugin-content-docs', + { + id: 'guide', + path: 'guide', + routeBasePath: 'guide', + sidebarPath: require.resolve('./sidebars-guide.js'), + editUrl: ({ versionDocsDirPath, docPath, locale }) => { + if (locale != 'en') { + return 'https://crowdin.com/project/ionic-docs'; + } + return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`; + }, + } + ], [ '@docusaurus/plugin-content-docs', { diff --git a/docs/angular/lifecycle.md b/guide/angular/lifecycle.md similarity index 100% rename from docs/angular/lifecycle.md rename to guide/angular/lifecycle.md diff --git a/docs/angular/navigation.md b/guide/angular/navigation.md similarity index 100% rename from docs/angular/navigation.md rename to guide/angular/navigation.md diff --git a/docs/angular/overview.md b/guide/angular/overview.md similarity index 100% rename from docs/angular/overview.md rename to guide/angular/overview.md diff --git a/docs/angular/performance.md b/guide/angular/performance.md similarity index 100% rename from docs/angular/performance.md rename to guide/angular/performance.md diff --git a/docs/angular/platform.md b/guide/angular/platform.md similarity index 100% rename from docs/angular/platform.md rename to guide/angular/platform.md diff --git a/docs/angular/pwa.md b/guide/angular/pwa.md similarity index 100% rename from docs/angular/pwa.md rename to guide/angular/pwa.md diff --git a/docs/angular/slides.md b/guide/angular/slides.md similarity index 100% rename from docs/angular/slides.md rename to guide/angular/slides.md diff --git a/docs/angular/storage.md b/guide/angular/storage.md similarity index 100% rename from docs/angular/storage.md rename to guide/angular/storage.md diff --git a/docs/angular/testing.md b/guide/angular/testing.md similarity index 100% rename from docs/angular/testing.md rename to guide/angular/testing.md diff --git a/docs/angular/virtual-scroll.md b/guide/angular/virtual-scroll.md similarity index 100% rename from docs/angular/virtual-scroll.md rename to guide/angular/virtual-scroll.md diff --git a/docs/angular/your-first-app.md b/guide/angular/your-first-app.md similarity index 100% rename from docs/angular/your-first-app.md rename to guide/angular/your-first-app.md diff --git a/docs/angular/your-first-app/2-taking-photos.md b/guide/angular/your-first-app/2-taking-photos.md similarity index 100% rename from docs/angular/your-first-app/2-taking-photos.md rename to guide/angular/your-first-app/2-taking-photos.md diff --git a/docs/angular/your-first-app/3-saving-photos.md b/guide/angular/your-first-app/3-saving-photos.md similarity index 100% rename from docs/angular/your-first-app/3-saving-photos.md rename to guide/angular/your-first-app/3-saving-photos.md diff --git a/docs/angular/your-first-app/4-loading-photos.md b/guide/angular/your-first-app/4-loading-photos.md similarity index 100% rename from docs/angular/your-first-app/4-loading-photos.md rename to guide/angular/your-first-app/4-loading-photos.md diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/guide/angular/your-first-app/5-adding-mobile.md similarity index 100% rename from docs/angular/your-first-app/5-adding-mobile.md rename to guide/angular/your-first-app/5-adding-mobile.md diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/guide/angular/your-first-app/6-deploying-mobile.md similarity index 100% rename from docs/angular/your-first-app/6-deploying-mobile.md rename to guide/angular/your-first-app/6-deploying-mobile.md diff --git a/docs/angular/your-first-app/7-live-reload.md b/guide/angular/your-first-app/7-live-reload.md similarity index 100% rename from docs/angular/your-first-app/7-live-reload.md rename to guide/angular/your-first-app/7-live-reload.md diff --git a/docs/angular/your-first-app/8-distribute.md b/guide/angular/your-first-app/8-distribute.md similarity index 100% rename from docs/angular/your-first-app/8-distribute.md rename to guide/angular/your-first-app/8-distribute.md diff --git a/docs/contributing/coc.md b/guide/contributing/coc.md similarity index 100% rename from docs/contributing/coc.md rename to guide/contributing/coc.md diff --git a/docs/contributing/how-to-contribute.md b/guide/contributing/how-to-contribute.md similarity index 100% rename from docs/contributing/how-to-contribute.md rename to guide/contributing/how-to-contribute.md diff --git a/docs/core-concepts/cross-platform.md b/guide/core-concepts/cross-platform.md similarity index 100% rename from docs/core-concepts/cross-platform.md rename to guide/core-concepts/cross-platform.md diff --git a/docs/core-concepts/fundamentals.md b/guide/core-concepts/fundamentals.md similarity index 100% rename from docs/core-concepts/fundamentals.md rename to guide/core-concepts/fundamentals.md diff --git a/docs/core-concepts/webview.md b/guide/core-concepts/webview.md similarity index 100% rename from docs/core-concepts/webview.md rename to guide/core-concepts/webview.md diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/guide/core-concepts/what-are-progressive-web-apps.md similarity index 100% rename from docs/core-concepts/what-are-progressive-web-apps.md rename to guide/core-concepts/what-are-progressive-web-apps.md diff --git a/docs/deployment/app-store.md b/guide/deployment/app-store.md similarity index 100% rename from docs/deployment/app-store.md rename to guide/deployment/app-store.md diff --git a/docs/deployment/desktop-app.md b/guide/deployment/desktop-app.md similarity index 100% rename from docs/deployment/desktop-app.md rename to guide/deployment/desktop-app.md diff --git a/docs/deployment/play-store.mdx b/guide/deployment/play-store.mdx similarity index 100% rename from docs/deployment/play-store.mdx rename to guide/deployment/play-store.mdx diff --git a/docs/deployment/progressive-web-app.md b/guide/deployment/progressive-web-app.md similarity index 100% rename from docs/deployment/progressive-web-app.md rename to guide/deployment/progressive-web-app.md diff --git a/docs/developer-resources/books.md b/guide/developer-resources/books.md similarity index 100% rename from docs/developer-resources/books.md rename to guide/developer-resources/books.md diff --git a/docs/developer-resources/courses.md b/guide/developer-resources/courses.md similarity index 100% rename from docs/developer-resources/courses.md rename to guide/developer-resources/courses.md diff --git a/docs/developer-resources/guides.md b/guide/developer-resources/guides.md similarity index 100% rename from docs/developer-resources/guides.md rename to guide/developer-resources/guides.md diff --git a/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/guide/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md similarity index 100% rename from docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md rename to guide/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md diff --git a/docs/developer-resources/guides/first-app-v3/intro.md b/guide/developer-resources/guides/first-app-v3/intro.md similarity index 100% rename from docs/developer-resources/guides/first-app-v3/intro.md rename to guide/developer-resources/guides/first-app-v3/intro.md diff --git a/docs/developer-resources/guides/first-app-v3/ios-android-camera.md b/guide/developer-resources/guides/first-app-v3/ios-android-camera.md similarity index 100% rename from docs/developer-resources/guides/first-app-v3/ios-android-camera.md rename to guide/developer-resources/guides/first-app-v3/ios-android-camera.md diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/guide/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md similarity index 100% rename from docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md rename to guide/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md diff --git a/docs/developer-resources/guides/first-app-v3/theming.md b/guide/developer-resources/guides/first-app-v3/theming.md similarity index 100% rename from docs/developer-resources/guides/first-app-v3/theming.md rename to guide/developer-resources/guides/first-app-v3/theming.md diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/guide/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md similarity index 100% rename from docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md rename to guide/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md diff --git a/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/guide/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md similarity index 100% rename from docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md rename to guide/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/guide/developer-resources/guides/first-app-v4/intro.md similarity index 100% rename from docs/developer-resources/guides/first-app-v4/intro.md rename to guide/developer-resources/guides/first-app-v4/intro.md diff --git a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md b/guide/developer-resources/guides/first-app-v4/ios-android-camera.md similarity index 100% rename from docs/developer-resources/guides/first-app-v4/ios-android-camera.md rename to guide/developer-resources/guides/first-app-v4/ios-android-camera.md diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/guide/developer-resources/guides/first-app-v4/theming.md similarity index 100% rename from docs/developer-resources/guides/first-app-v4/theming.md rename to guide/developer-resources/guides/first-app-v4/theming.md diff --git a/docs/developer-resources/posts.md b/guide/developer-resources/posts.md similarity index 100% rename from docs/developer-resources/posts.md rename to guide/developer-resources/posts.md diff --git a/docs/developer-resources/tools.md b/guide/developer-resources/tools.md similarity index 100% rename from docs/developer-resources/tools.md rename to guide/developer-resources/tools.md diff --git a/docs/developer-resources/videos.md b/guide/developer-resources/videos.md similarity index 100% rename from docs/developer-resources/videos.md rename to guide/developer-resources/videos.md diff --git a/docs/developing/android.md b/guide/developing/android.md similarity index 100% rename from docs/developing/android.md rename to guide/developing/android.md diff --git a/versioned_docs/version-v6/developing/config.md b/guide/developing/config.md similarity index 98% rename from versioned_docs/version-v6/developing/config.md rename to guide/developing/config.md index 662e790864d..c234d117b53 100644 --- a/versioned_docs/version-v6/developing/config.md +++ b/guide/developing/config.md @@ -117,7 +117,7 @@ Below are the config options that Ionic uses. | `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | | `backButtonIcon` | `string` | Overrides the default icon in all `` components. | | `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | | `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | | `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | | `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | diff --git a/docs/developing/config/global/index.md b/guide/developing/config/global/index.md similarity index 100% rename from docs/developing/config/global/index.md rename to guide/developing/config/global/index.md diff --git a/docs/developing/config/per-component/index.md b/guide/developing/config/per-component/index.md similarity index 100% rename from docs/developing/config/per-component/index.md rename to guide/developing/config/per-component/index.md diff --git a/docs/developing/config/per-platform-fallback/index.md b/guide/developing/config/per-platform-fallback/index.md similarity index 100% rename from docs/developing/config/per-platform-fallback/index.md rename to guide/developing/config/per-platform-fallback/index.md diff --git a/docs/developing/config/per-platform-overrides/index.md b/guide/developing/config/per-platform-overrides/index.md similarity index 100% rename from docs/developing/config/per-platform-overrides/index.md rename to guide/developing/config/per-platform-overrides/index.md diff --git a/docs/developing/config/per-platform/index.md b/guide/developing/config/per-platform/index.md similarity index 100% rename from docs/developing/config/per-platform/index.md rename to guide/developing/config/per-platform/index.md diff --git a/docs/developing/hardware-back-button.md b/guide/developing/hardware-back-button.md similarity index 100% rename from docs/developing/hardware-back-button.md rename to guide/developing/hardware-back-button.md diff --git a/docs/developing/ios.md b/guide/developing/ios.md similarity index 100% rename from docs/developing/ios.md rename to guide/developing/ios.md diff --git a/docs/developing/keyboard.md b/guide/developing/keyboard.md similarity index 100% rename from docs/developing/keyboard.md rename to guide/developing/keyboard.md diff --git a/docs/developing/previewing.md b/guide/developing/previewing.md similarity index 100% rename from docs/developing/previewing.md rename to guide/developing/previewing.md diff --git a/docs/developing/scaffolding.md b/guide/developing/scaffolding.md similarity index 100% rename from docs/developing/scaffolding.md rename to guide/developing/scaffolding.md diff --git a/docs/developing/starting.md b/guide/developing/starting.md similarity index 100% rename from docs/developing/starting.md rename to guide/developing/starting.md diff --git a/docs/developing/tips.md b/guide/developing/tips.md similarity index 100% rename from docs/developing/tips.md rename to guide/developing/tips.md diff --git a/docs/index.md b/guide/index.md similarity index 96% rename from docs/index.md rename to guide/index.md index 5a5909b1b3e..db841e894a0 100644 --- a/docs/index.md +++ b/guide/index.md @@ -29,7 +29,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First - +

Step-by-step guides to setting up your system and installing the framework.

 @@ -51,7 +51,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First

Integrate native device plugins, like Bluetooth, Maps, HealthKit, and more.

 - +

Learn to easily customize and modify your Ionic app's visual design to fit your brand.

 diff --git a/docs/intro/cdn.md b/guide/intro/cdn.md similarity index 100% rename from docs/intro/cdn.md rename to guide/intro/cdn.md diff --git a/docs/intro/cli.md b/guide/intro/cli.md similarity index 100% rename from docs/intro/cli.md rename to guide/intro/cli.md diff --git a/docs/intro/environment.md b/guide/intro/environment.md similarity index 100% rename from docs/intro/environment.md rename to guide/intro/environment.md diff --git a/docs/intro/first-app.md b/guide/intro/first-app.md similarity index 100% rename from docs/intro/first-app.md rename to guide/intro/first-app.md diff --git a/docs/intro/next.md b/guide/intro/next.md similarity index 100% rename from docs/intro/next.md rename to guide/intro/next.md diff --git a/docs/intro/vscode-extension.md b/guide/intro/vscode-extension.md similarity index 100% rename from docs/intro/vscode-extension.md rename to guide/intro/vscode-extension.md diff --git a/docs/layout/css-utilities.md b/guide/layout/css-utilities.md similarity index 100% rename from docs/layout/css-utilities.md rename to guide/layout/css-utilities.md diff --git a/docs/layout/global-stylesheets.md b/guide/layout/global-stylesheets.md similarity index 100% rename from docs/layout/global-stylesheets.md rename to guide/layout/global-stylesheets.md diff --git a/docs/layout/structure.md b/guide/layout/structure.md similarity index 100% rename from docs/layout/structure.md rename to guide/layout/structure.md diff --git a/docs/react.md b/guide/react.md similarity index 100% rename from docs/react.md rename to guide/react.md diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/guide/react/adding-ionic-react-to-an-existing-react-project.md similarity index 100% rename from docs/react/adding-ionic-react-to-an-existing-react-project.md rename to guide/react/adding-ionic-react-to-an-existing-react-project.md diff --git a/docs/react/lifecycle.md b/guide/react/lifecycle.md similarity index 100% rename from docs/react/lifecycle.md rename to guide/react/lifecycle.md diff --git a/docs/react/navigation.md b/guide/react/navigation.md similarity index 100% rename from docs/react/navigation.md rename to guide/react/navigation.md diff --git a/docs/react/overlays.md b/guide/react/overlays.md similarity index 100% rename from docs/react/overlays.md rename to guide/react/overlays.md diff --git a/docs/react/overview.md b/guide/react/overview.md similarity index 100% rename from docs/react/overview.md rename to guide/react/overview.md diff --git a/docs/react/performance.md b/guide/react/performance.md similarity index 100% rename from docs/react/performance.md rename to guide/react/performance.md diff --git a/docs/react/platform.md b/guide/react/platform.md similarity index 100% rename from docs/react/platform.md rename to guide/react/platform.md diff --git a/docs/react/pwa.md b/guide/react/pwa.md similarity index 100% rename from docs/react/pwa.md rename to guide/react/pwa.md diff --git a/docs/react/quickstart.md b/guide/react/quickstart.md similarity index 100% rename from docs/react/quickstart.md rename to guide/react/quickstart.md diff --git a/docs/react/slides.md b/guide/react/slides.md similarity index 100% rename from docs/react/slides.md rename to guide/react/slides.md diff --git a/docs/react/storage.md b/guide/react/storage.md similarity index 100% rename from docs/react/storage.md rename to guide/react/storage.md diff --git a/docs/react/testing.md b/guide/react/testing.md similarity index 100% rename from docs/react/testing.md rename to guide/react/testing.md diff --git a/docs/react/virtual-scroll.md b/guide/react/virtual-scroll.md similarity index 100% rename from docs/react/virtual-scroll.md rename to guide/react/virtual-scroll.md diff --git a/docs/react/your-first-app.md b/guide/react/your-first-app.md similarity index 100% rename from docs/react/your-first-app.md rename to guide/react/your-first-app.md diff --git a/docs/react/your-first-app/2-taking-photos.md b/guide/react/your-first-app/2-taking-photos.md similarity index 100% rename from docs/react/your-first-app/2-taking-photos.md rename to guide/react/your-first-app/2-taking-photos.md diff --git a/docs/react/your-first-app/3-saving-photos.md b/guide/react/your-first-app/3-saving-photos.md similarity index 100% rename from docs/react/your-first-app/3-saving-photos.md rename to guide/react/your-first-app/3-saving-photos.md diff --git a/docs/react/your-first-app/4-loading-photos.md b/guide/react/your-first-app/4-loading-photos.md similarity index 100% rename from docs/react/your-first-app/4-loading-photos.md rename to guide/react/your-first-app/4-loading-photos.md diff --git a/docs/react/your-first-app/5-adding-mobile.md b/guide/react/your-first-app/5-adding-mobile.md similarity index 100% rename from docs/react/your-first-app/5-adding-mobile.md rename to guide/react/your-first-app/5-adding-mobile.md diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/guide/react/your-first-app/6-deploying-mobile.md similarity index 100% rename from docs/react/your-first-app/6-deploying-mobile.md rename to guide/react/your-first-app/6-deploying-mobile.md diff --git a/docs/react/your-first-app/7-live-reload.md b/guide/react/your-first-app/7-live-reload.md similarity index 100% rename from docs/react/your-first-app/7-live-reload.md rename to guide/react/your-first-app/7-live-reload.md diff --git a/docs/react/your-first-app/8-distribute.md b/guide/react/your-first-app/8-distribute.md similarity index 100% rename from docs/react/your-first-app/8-distribute.md rename to guide/react/your-first-app/8-distribute.md diff --git a/docs/reference/browser-support.md b/guide/reference/browser-support.md similarity index 100% rename from docs/reference/browser-support.md rename to guide/reference/browser-support.md diff --git a/docs/reference/glossary.md b/guide/reference/glossary.md similarity index 100% rename from docs/reference/glossary.md rename to guide/reference/glossary.md diff --git a/docs/reference/release-notes.md b/guide/reference/release-notes.md similarity index 100% rename from docs/reference/release-notes.md rename to guide/reference/release-notes.md diff --git a/docs/reference/support.md b/guide/reference/support.md similarity index 100% rename from docs/reference/support.md rename to guide/reference/support.md diff --git a/docs/reference/versioning.md b/guide/reference/versioning.md similarity index 100% rename from docs/reference/versioning.md rename to guide/reference/versioning.md diff --git a/docs/studio/assets.md b/guide/studio/assets.md similarity index 100% rename from docs/studio/assets.md rename to guide/studio/assets.md diff --git a/docs/studio/code.md b/guide/studio/code.md similarity index 100% rename from docs/studio/code.md rename to guide/studio/code.md diff --git a/docs/studio/designer.md b/guide/studio/designer.md similarity index 100% rename from docs/studio/designer.md rename to guide/studio/designer.md diff --git a/docs/studio/faq.md b/guide/studio/faq.md similarity index 100% rename from docs/studio/faq.md rename to guide/studio/faq.md diff --git a/docs/studio/guides/routing-and-navigation.md b/guide/studio/guides/routing-and-navigation.md similarity index 100% rename from docs/studio/guides/routing-and-navigation.md rename to guide/studio/guides/routing-and-navigation.md diff --git a/docs/studio/guides/using-native-functionality.md b/guide/studio/guides/using-native-functionality.md similarity index 100% rename from docs/studio/guides/using-native-functionality.md rename to guide/studio/guides/using-native-functionality.md diff --git a/docs/studio/running.md b/guide/studio/running.md similarity index 100% rename from docs/studio/running.md rename to guide/studio/running.md diff --git a/docs/studio/settings.md b/guide/studio/settings.md similarity index 100% rename from docs/studio/settings.md rename to guide/studio/settings.md diff --git a/docs/studio/setup/installation.md b/guide/studio/setup/installation.md similarity index 100% rename from docs/studio/setup/installation.md rename to guide/studio/setup/installation.md diff --git a/docs/studio/setup/native.md b/guide/studio/setup/native.md similarity index 100% rename from docs/studio/setup/native.md rename to guide/studio/setup/native.md diff --git a/docs/studio/start.md b/guide/studio/start.md similarity index 100% rename from docs/studio/start.md rename to guide/studio/start.md diff --git a/docs/studio/support.md b/guide/studio/support.md similarity index 100% rename from docs/studio/support.md rename to guide/studio/support.md diff --git a/docs/studio/terminal.md b/guide/studio/terminal.md similarity index 100% rename from docs/studio/terminal.md rename to guide/studio/terminal.md diff --git a/docs/studio/theming.md b/guide/studio/theming.md similarity index 100% rename from docs/studio/theming.md rename to guide/studio/theming.md diff --git a/docs/techniques/security.md b/guide/techniques/security.md similarity index 100% rename from docs/techniques/security.md rename to guide/techniques/security.md diff --git a/docs/test/page1.md b/guide/test/page1.md similarity index 100% rename from docs/test/page1.md rename to guide/test/page1.md diff --git a/docs/test/page2.md b/guide/test/page2.md similarity index 100% rename from docs/test/page2.md rename to guide/test/page2.md diff --git a/docs/theming/advanced.md b/guide/theming/advanced.md similarity index 100% rename from docs/theming/advanced.md rename to guide/theming/advanced.md diff --git a/docs/theming/basics.md b/guide/theming/basics.md similarity index 100% rename from docs/theming/basics.md rename to guide/theming/basics.md diff --git a/docs/theming/color-generator.md b/guide/theming/color-generator.md similarity index 100% rename from docs/theming/color-generator.md rename to guide/theming/color-generator.md diff --git a/docs/theming/colors.md b/guide/theming/colors.md similarity index 100% rename from docs/theming/colors.md rename to guide/theming/colors.md diff --git a/docs/theming/css-shadow-parts.md b/guide/theming/css-shadow-parts.md similarity index 100% rename from docs/theming/css-shadow-parts.md rename to guide/theming/css-shadow-parts.md diff --git a/docs/theming/css-variables.md b/guide/theming/css-variables.md similarity index 100% rename from docs/theming/css-variables.md rename to guide/theming/css-variables.md diff --git a/docs/theming/dark-mode.md b/guide/theming/dark-mode.md similarity index 100% rename from docs/theming/dark-mode.md rename to guide/theming/dark-mode.md diff --git a/docs/theming/platform-styles.md b/guide/theming/platform-styles.md similarity index 100% rename from docs/theming/platform-styles.md rename to guide/theming/platform-styles.md diff --git a/docs/theming/themes.md b/guide/theming/themes.md similarity index 100% rename from docs/theming/themes.md rename to guide/theming/themes.md diff --git a/docs/troubleshooting/build.md b/guide/troubleshooting/build.md similarity index 100% rename from docs/troubleshooting/build.md rename to guide/troubleshooting/build.md diff --git a/docs/troubleshooting/cors.md b/guide/troubleshooting/cors.md similarity index 100% rename from docs/troubleshooting/cors.md rename to guide/troubleshooting/cors.md diff --git a/docs/troubleshooting/debugging.md b/guide/troubleshooting/debugging.md similarity index 100% rename from docs/troubleshooting/debugging.md rename to guide/troubleshooting/debugging.md diff --git a/docs/troubleshooting/native.md b/guide/troubleshooting/native.md similarity index 100% rename from docs/troubleshooting/native.md rename to guide/troubleshooting/native.md diff --git a/docs/troubleshooting/runtime.md b/guide/troubleshooting/runtime.md similarity index 100% rename from docs/troubleshooting/runtime.md rename to guide/troubleshooting/runtime.md diff --git a/docs/updating/4-0.md b/guide/updating/4-0.md similarity index 100% rename from docs/updating/4-0.md rename to guide/updating/4-0.md diff --git a/docs/updating/5-0.md b/guide/updating/5-0.md similarity index 100% rename from docs/updating/5-0.md rename to guide/updating/5-0.md diff --git a/docs/updating/6-0.md b/guide/updating/6-0.md similarity index 100% rename from docs/updating/6-0.md rename to guide/updating/6-0.md diff --git a/docs/updating/7-0.md b/guide/updating/7-0.md similarity index 100% rename from docs/updating/7-0.md rename to guide/updating/7-0.md diff --git a/docs/utilities/animations.md b/guide/utilities/animations.md similarity index 100% rename from docs/utilities/animations.md rename to guide/utilities/animations.md diff --git a/docs/utilities/gestures.md b/guide/utilities/gestures.md similarity index 100% rename from docs/utilities/gestures.md rename to guide/utilities/gestures.md diff --git a/docs/vue/lifecycle.md b/guide/vue/lifecycle.md similarity index 100% rename from docs/vue/lifecycle.md rename to guide/vue/lifecycle.md diff --git a/docs/vue/navigation.md b/guide/vue/navigation.md similarity index 100% rename from docs/vue/navigation.md rename to guide/vue/navigation.md diff --git a/docs/vue/overview.md b/guide/vue/overview.md similarity index 100% rename from docs/vue/overview.md rename to guide/vue/overview.md diff --git a/docs/vue/performance.md b/guide/vue/performance.md similarity index 100% rename from docs/vue/performance.md rename to guide/vue/performance.md diff --git a/docs/vue/platform.md b/guide/vue/platform.md similarity index 100% rename from docs/vue/platform.md rename to guide/vue/platform.md diff --git a/docs/vue/pwa.md b/guide/vue/pwa.md similarity index 100% rename from docs/vue/pwa.md rename to guide/vue/pwa.md diff --git a/docs/vue/quickstart.md b/guide/vue/quickstart.md similarity index 100% rename from docs/vue/quickstart.md rename to guide/vue/quickstart.md diff --git a/docs/vue/slides.md b/guide/vue/slides.md similarity index 100% rename from docs/vue/slides.md rename to guide/vue/slides.md diff --git a/docs/vue/storage.md b/guide/vue/storage.md similarity index 100% rename from docs/vue/storage.md rename to guide/vue/storage.md diff --git a/docs/vue/testing.md b/guide/vue/testing.md similarity index 100% rename from docs/vue/testing.md rename to guide/vue/testing.md diff --git a/docs/vue/troubleshooting.md b/guide/vue/troubleshooting.md similarity index 100% rename from docs/vue/troubleshooting.md rename to guide/vue/troubleshooting.md diff --git a/docs/vue/utility-functions.md b/guide/vue/utility-functions.md similarity index 100% rename from docs/vue/utility-functions.md rename to guide/vue/utility-functions.md diff --git a/docs/vue/virtual-scroll.md b/guide/vue/virtual-scroll.md similarity index 100% rename from docs/vue/virtual-scroll.md rename to guide/vue/virtual-scroll.md diff --git a/docs/vue/your-first-app.md b/guide/vue/your-first-app.md similarity index 100% rename from docs/vue/your-first-app.md rename to guide/vue/your-first-app.md diff --git a/docs/vue/your-first-app/2-taking-photos.md b/guide/vue/your-first-app/2-taking-photos.md similarity index 100% rename from docs/vue/your-first-app/2-taking-photos.md rename to guide/vue/your-first-app/2-taking-photos.md diff --git a/docs/vue/your-first-app/3-saving-photos.md b/guide/vue/your-first-app/3-saving-photos.md similarity index 100% rename from docs/vue/your-first-app/3-saving-photos.md rename to guide/vue/your-first-app/3-saving-photos.md diff --git a/docs/vue/your-first-app/4-loading-photos.md b/guide/vue/your-first-app/4-loading-photos.md similarity index 100% rename from docs/vue/your-first-app/4-loading-photos.md rename to guide/vue/your-first-app/4-loading-photos.md diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/guide/vue/your-first-app/5-adding-mobile.md similarity index 100% rename from docs/vue/your-first-app/5-adding-mobile.md rename to guide/vue/your-first-app/5-adding-mobile.md diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/guide/vue/your-first-app/6-deploying-mobile.md similarity index 100% rename from docs/vue/your-first-app/6-deploying-mobile.md rename to guide/vue/your-first-app/6-deploying-mobile.md diff --git a/docs/vue/your-first-app/7-live-reload.md b/guide/vue/your-first-app/7-live-reload.md similarity index 100% rename from docs/vue/your-first-app/7-live-reload.md rename to guide/vue/your-first-app/7-live-reload.md diff --git a/docs/vue/your-first-app/8-distribute.md b/guide/vue/your-first-app/8-distribute.md similarity index 100% rename from docs/vue/your-first-app/8-distribute.md rename to guide/vue/your-first-app/8-distribute.md diff --git a/sidebars-guide.js b/sidebars-guide.js new file mode 100644 index 00000000000..bf196e100e3 --- /dev/null +++ b/sidebars-guide.js @@ -0,0 +1,236 @@ +module.exports = { + guide: [ + { + type: 'category', + label: 'Getting Started', + collapsed: false, + items: ['index', 'intro/environment', 'intro/cli', 'intro/cdn', 'intro/vscode-extension', 'intro/next'], + }, + { + type: 'category', + label: 'Upgrade Guides', + collapsed: false, + items: [ + 'updating/7-0', + 'updating/6-0', + 'updating/5-0', + 'updating/4-0' + ] + }, + { + type: 'category', + label: 'Developing', + collapsed: false, + items: [ + 'developing/starting', + 'developing/previewing', + 'developing/scaffolding', + 'developing/ios', + 'developing/android', + 'developing/tips', + 'developing/hardware-back-button', + 'developing/keyboard', + 'developing/config' + ], + }, + { + type: 'category', + label: 'Layout', + collapsed: false, + items: [ + 'layout/structure', + { + type: 'link', + label: 'Responsive Grid', + href: '/docs/api/grid', + }, + 'layout/global-stylesheets', + 'layout/css-utilities' + ], + }, + { + type: 'category', + label: 'Theming', + collapsed: false, + items: [ + 'theming/basics', + 'theming/platform-styles', + 'theming/css-variables', + 'theming/css-shadow-parts', + 'theming/colors', + 'theming/themes', + 'theming/dark-mode', + 'theming/advanced', + 'theming/color-generator', + ], + }, + { + type: 'category', + label: 'Angular', + collapsed: false, + items: [ + 'angular/overview', + { + type: 'category', + label: 'Build Your First App', + items: [ + 'angular/your-first-app', + 'angular/your-first-app/taking-photos', + 'angular/your-first-app/saving-photos', + 'angular/your-first-app/loading-photos', + 'angular/your-first-app/adding-mobile', + 'angular/your-first-app/deploying-mobile', + 'angular/your-first-app/live-reload', + 'angular/your-first-app/distribute', + ], + }, + 'angular/lifecycle', + 'angular/navigation', + 'angular/virtual-scroll', + 'angular/slides', + 'angular/platform', + 'angular/testing', + 'angular/storage', + 'angular/performance', + 'angular/pwa', + ], + }, + { + type: 'category', + label: 'React', + collapsed: false, + items: [ + 'react', + 'react/quickstart', + { + type: 'category', + label: 'Build Your First App', + items: [ + 'react/your-first-app', + 'react/your-first-app/taking-photos', + 'react/your-first-app/saving-photos', + 'react/your-first-app/loading-photos', + 'react/your-first-app/adding-mobile', + 'react/your-first-app/deploying-mobile', + 'react/your-first-app/live-reload', + 'react/your-first-app/distribute', + ], + }, + 'react/adding-ionic-react-to-an-existing-react-project', + 'react/lifecycle', + 'react/navigation', + 'react/virtual-scroll', + 'react/slides', + 'react/platform', + 'react/pwa', + 'react/overlays', + 'react/storage', + 'react/testing', + 'react/performance', + ], + }, + { + type: 'category', + label: 'Vue', + collapsed: false, + items: [ + 'vue/overview', + 'vue/quickstart', + { + type: 'category', + label: 'Build Your First App', + items: [ + 'vue/your-first-app', + 'vue/your-first-app/taking-photos', + 'vue/your-first-app/saving-photos', + 'vue/your-first-app/loading-photos', + 'vue/your-first-app/adding-mobile', + 'vue/your-first-app/deploying-mobile', + 'vue/your-first-app/live-reload', + 'vue/your-first-app/distribute', + ], + }, + 'vue/lifecycle', + 'vue/navigation', + 'vue/virtual-scroll', + 'vue/slides', + 'vue/utility-functions', + 'vue/platform', + 'vue/pwa', + 'vue/storage', + 'vue/testing', + 'vue/troubleshooting', + 'vue/performance', + ], + }, + { + type: 'category', + label: 'Utilities', + collapsed: false, + items: ['utilities/animations', 'utilities/gestures'], + }, + { + type: 'category', + label: 'Deployment', + collapsed: false, + items: [ + 'deployment/app-store', + 'deployment/play-store', + 'deployment/progressive-web-app', + 'deployment/desktop-app', + ], + }, + { + type: 'category', + label: 'Techniques', + collapsed: false, + items: ['techniques/security'], + }, + { + type: 'category', + label: 'Troubleshooting', + collapsed: false, + items: [ + 'troubleshooting/debugging', + 'troubleshooting/build', + 'troubleshooting/runtime', + 'troubleshooting/native', + 'troubleshooting/cors', + ], + }, + { + type: 'category', + label: 'Core Concepts', + collapsed: false, + items: [ + 'core-concepts/fundamentals', + 'core-concepts/cross-platform', + 'core-concepts/webview', + 'core-concepts/what-are-progressive-web-apps', + ], + }, + { + type: 'category', + label: 'Contributing', + collapsed: false, + items: ['contributing/how-to-contribute', 'contributing/coc'], + }, + { + type: 'category', + label: 'Reference', + collapsed: false, + items: [ + 'reference/glossary', + 'reference/versioning', + 'reference/release-notes', + { + type: 'link', + label: 'GitHub Changelog', + href: 'https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md', + }, + 'reference/support', + 'reference/browser-support' + ], + }, + ], +} diff --git a/sidebars.js b/sidebars.js index b1bb34bd6de..2da3e64d63e 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1,239 +1,4 @@ module.exports = { - docs: [ - { - type: 'category', - label: 'Getting Started', - collapsed: false, - items: ['index', 'intro/environment', 'intro/cli', 'intro/cdn', 'intro/vscode-extension', 'intro/next'], - }, - { - type: 'category', - label: 'Upgrade Guides', - collapsed: false, - items: [ - 'updating/7-0', - 'updating/6-0', - 'updating/5-0', - 'updating/4-0' - ] - }, - { - type: 'category', - label: 'Developing', - collapsed: false, - items: [ - 'developing/starting', - 'developing/previewing', - 'developing/scaffolding', - 'developing/ios', - 'developing/android', - 'developing/tips', - 'developing/hardware-back-button', - 'developing/keyboard', - 'developing/config' - ], - }, - { - type: 'category', - label: 'Layout', - collapsed: false, - items: [ - 'layout/structure', - { - type: 'link', - label: 'Responsive Grid', - href: '/docs/api/grid', - }, - 'layout/global-stylesheets', - 'layout/css-utilities' - ], - }, - { - type: 'category', - label: 'Theming', - collapsed: false, - items: [ - 'theming/basics', - 'theming/platform-styles', - 'theming/css-variables', - 'theming/css-shadow-parts', - 'theming/colors', - 'theming/themes', - 'theming/dark-mode', - 'theming/advanced', - 'theming/color-generator', - ], - }, - { - type: 'category', - label: 'Angular', - collapsed: false, - items: [ - 'angular/overview', - { - type: 'category', - label: 'Build Your First App', - items: [ - 'angular/your-first-app', - 'angular/your-first-app/taking-photos', - 'angular/your-first-app/saving-photos', - 'angular/your-first-app/loading-photos', - 'angular/your-first-app/adding-mobile', - 'angular/your-first-app/deploying-mobile', - 'angular/your-first-app/live-reload', - 'angular/your-first-app/distribute', - ], - }, - 'angular/lifecycle', - 'angular/navigation', - 'angular/virtual-scroll', - 'angular/slides', - 'angular/platform', - 'angular/testing', - 'angular/storage', - 'angular/performance', - 'angular/pwa', - ], - }, - { - type: 'category', - label: 'React', - collapsed: false, - items: [ - 'react', - 'react/quickstart', - { - type: 'category', - label: 'Build Your First App', - items: [ - 'react/your-first-app', - 'react/your-first-app/taking-photos', - 'react/your-first-app/saving-photos', - 'react/your-first-app/loading-photos', - 'react/your-first-app/adding-mobile', - 'react/your-first-app/deploying-mobile', - 'react/your-first-app/live-reload', - 'react/your-first-app/distribute', - ], - }, - 'react/adding-ionic-react-to-an-existing-react-project', - 'react/lifecycle', - 'react/navigation', - 'react/virtual-scroll', - 'react/slides', - 'react/platform', - 'react/pwa', - 'react/overlays', - 'react/storage', - 'react/testing', - 'react/performance', - ], - }, - { - type: 'category', - label: 'Vue', - collapsed: false, - items: [ - 'vue/overview', - 'vue/quickstart', - { - type: 'category', - label: 'Build Your First App', - items: [ - 'vue/your-first-app', - 'vue/your-first-app/taking-photos', - 'vue/your-first-app/saving-photos', - 'vue/your-first-app/loading-photos', - 'vue/your-first-app/adding-mobile', - 'vue/your-first-app/deploying-mobile', - 'vue/your-first-app/live-reload', - 'vue/your-first-app/distribute', - ], - }, - 'vue/lifecycle', - 'vue/navigation', - 'vue/virtual-scroll', - 'vue/slides', - 'vue/utility-functions', - 'vue/platform', - 'vue/pwa', - 'vue/storage', - 'vue/testing', - 'vue/troubleshooting', - 'vue/performance', - ], - }, - { - type: 'category', - label: 'Utilities', - collapsed: false, - items: ['utilities/animations', 'utilities/gestures'], - }, - { - type: 'category', - label: 'Deployment', - collapsed: false, - items: [ - 'deployment/app-store', - 'deployment/play-store', - 'deployment/progressive-web-app', - 'deployment/desktop-app', - ], - }, - { - type: 'category', - label: 'Techniques', - collapsed: false, - items: ['techniques/security'], - }, - { - type: 'category', - label: 'Troubleshooting', - collapsed: false, - items: [ - 'troubleshooting/debugging', - 'troubleshooting/build', - 'troubleshooting/runtime', - 'troubleshooting/native', - 'troubleshooting/cors', - ], - }, - { - type: 'category', - label: 'Core Concepts', - collapsed: false, - items: [ - 'core-concepts/fundamentals', - 'core-concepts/cross-platform', - 'core-concepts/webview', - 'core-concepts/what-are-progressive-web-apps', - ], - }, - { - type: 'category', - label: 'Contributing', - collapsed: false, - items: ['contributing/how-to-contribute', 'contributing/coc'], - }, - { - type: 'category', - label: 'Reference', - collapsed: false, - items: [ - 'reference/glossary', - 'reference/versioning', - 'reference/release-notes', - { - type: 'link', - label: 'GitHub Changelog', - href: 'https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md', - }, - 'reference/support', - 'reference/browser-support' - ], - }, - ], - api: [ { type: 'category', diff --git a/versioned_docs/version-v5/angular/config.md b/versioned_docs/version-v5/angular/config.md deleted file mode 100644 index 0db21cdf0aa..00000000000 --- a/versioned_docs/version-v5/angular/config.md +++ /dev/null @@ -1,175 +0,0 @@ -# Config - -Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more. - -## Global Config - -To override the initial Ionic config for the app, provide a config in `IonicModule.forRoot` in the `app.module.ts` file. - -```tsx -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - ... - imports: [ - BrowserModule, - IonicModule.forRoot({ - rippleEffect: false, - mode: 'md' - }), - AppRoutingModule - ], - ... -}) -``` - -In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design. - -## Per-Component Config - -Ionic Config is not reactive, so it is recommended to use a component's properties when you want to override its default behavior rather than set its config globally. - -```tsx -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - ... - imports: [ - BrowserModule, - IonicModule.forRoot({ - backButtonText: 'Go Back' - }), - AppRoutingModule - ], - ... -}) -``` - -This will set the default text for `ion-back-button` to `Go Back`. However, if you were to change the value of the `backButtonText` config to `Do Not Go Back`, the `ion-back-button` default text would still default to `Go Back` as the component has already been initialized and rendered. Instead, it is recommended to use the `text` property on `ion-back-button`. - -```html - -``` - -In this example we have used our `ion-back-button` in such a way that the text can be dynamically updated if there were to be a change that warranted it, such as a language or locale change. The `getBackButtonText` method would be responsible for returning the correct text. - -## Per-Platform Config - -Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. - -Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. - -In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values. - -```tsx -import { isPlatform, IonicModule } from '@ionic/angular'; - -@NgModule({ - ... - imports: [ - BrowserModule, - IonicModule.forRoot({ - animated: !isPlatform('mobileweb') - }), - AppRoutingModule - ], - ... -}) -``` - -The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: - -```tsx -import { isPlatform, IonicModule } from '@ionic/angular'; - -const getConfig = () => { - if (isPlatform('hybrid')) { - return { - backButtonText: 'Previous', - tabButtonLayout: 'label-hide' - } - } - - return { - menuIcon: 'ellipsis-vertical' - } -} -@NgModule({ - ... - imports: [ - BrowserModule, - IonicModule.forRoot(getConfig()), - AppRoutingModule - ], - ... -}) -``` - -Finally, this example allows you to accumulate a config object based upon different platform requirements: - -```tsx -import { isPlatform, IonicModule } from '@ionic/angular'; - -const getConfig = () => { - let config = { - animated: false - }; - - if (isPlatform('iphone')) { - config = { - ...config, - backButtonText: 'Previous' - } - } - - return config; -} -@NgModule({ - ... - imports: [ - BrowserModule, - IonicModule.forRoot(getConfig()), - AppRoutingModule - ], - ... -}) -``` - -## Config Options - -Below is a list of config options that Ionic uses. - -| Config | Type | Description | -| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | diff --git a/versioned_docs/version-v5/angular/lifecycle.md b/versioned_docs/version-v5/angular/lifecycle.md deleted file mode 100644 index fc948673727..00000000000 --- a/versioned_docs/version-v5/angular/lifecycle.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -sidebar_label: Lifecycle ---- - -# Ionic Page Life Cycle - -This guide covers how the page life cycle works in an app built with Ionic and Angular. - -![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png) - -## Angular Life Cycle Events - -Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are: - -| Event Name | Description | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ngOnInit` | Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. | -| `ngOnDestroy` | Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. | - -For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks). - -:::note -Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly. -::: - -## Ionic Page Events - -In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use: - -| Event Name | Description | -| ------------------ | ------------------------------------------------------------------ | -| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | -| `ionViewDidEnter` | Fired when the component routing to has finished animating. | -| `ionViewWillLeave` | Fired when the component routing from is about to animate. | -| `ionViewDidLeave` | Fired when the component routing to has finished animating. | - -The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends. - -For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). - -![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif) - -## How Ionic Handles the Life of a Page - -Ionic has its router outlet, called ``. This outlet extends Angular's `` with some additional functionality to enable better experiences for mobile devices. - -When an app is wrapped in ``, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold: - -1. We can maintain the state of the old page (data on the screen, scroll position, etc..) -2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated. - -Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button. - -Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might not fire when you would usually think they should. - -`ngOnInit` will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's `ngOnInit` method once, but not on subsequent visits. `ngOnDestroy` will only fire when a page "popped". - -## Route Guards - -In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill). - -These methods were removed in Ionic 4 in favor of using Angular's Route Guards. - -A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did. - -```tsx -@Injectable() -export class AuthGuard implements CanActivate { - constructor(private authService: AuthService) {} - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { - return this.authService.isAuthenticated(); - } -} -``` - -To use this guard, add it to the appropriate param in the route definition: - -```tsx -{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...', } -``` - -For more info on how to use route guards, go to Angular's [router documentation](https://angular.io/guide/router). - -## Guidance for Each Life Cycle Method - -Below are some tips on use cases for each of the life cycle events. - -- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit. -- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations. -- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete. -- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view. -- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. -- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`. diff --git a/versioned_docs/version-v5/angular/navigation.md b/versioned_docs/version-v5/angular/navigation.md deleted file mode 100644 index 0e5148442b8..00000000000 --- a/versioned_docs/version-v5/angular/navigation.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -sidebar_label: Navigation/Routing ---- - -# Angular Navigation - -This guide covers how routing works in an app built with Ionic and Angular. - -The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's look at the basics of the Angular Router and how we can configure it for Ionic apps. - -## A simple Route - -For most apps, having some sort of route is often required. The most basic configuration looks a bit like this: - -```tsx - -import { RouterModule } from '@angular/router'; - -@NgModule({ - imports: [ - ... - RouterModule.forRoot([ - { path: '', component: LoginComponent }, - { path: 'detail', component: DetailComponent }, - ]) - ], -}) -``` - -The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for `''`, which is essentially our index route. So for this, we load the `LoginComponent`. Fairly straight forward. This pattern of matching paths with a component continues for every entry we have in the router config. But what if we wanted to load a different path on our initial load? - -## Handling Redirects - -For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys. - -```tsx -[ - { path: '', redirectTo: 'login', pathMatch: 'full' }, - { path: 'login', component: LoginComponent }, - { path: 'detail', component: DetailComponent }, -]; -``` - -In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `login` route. The last key of `pathMatch` is required to tell the router how it should look up the path. - -Since we use `full`, we're telling the router that we should compare the full path, even if ends up being something like `/route1/route2/route3`. Meaning that if we have: - -```tsx -{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' }, -{ path: 'login', component: LoginComponent }, -``` - -And load `/route1/route2/route3` we'll redirect. But if we loaded `/route1/route2/route4`, we won't redirect, as the paths don't match fully. - -Alternatively, if we used: - -```tsx -{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' }, -{ path: 'login', component: LoginComponent }, -``` - -Then load both `/route1/route2/route3` and `/route1/route2/route4`, we'll be redirected for both routes. This is because `pathMatch: 'prefix'` will match only part of the path. - -## Navigating to different routes - -Talking about routes is good and all, but how does one actually navigate to said routes? For this, we can use the `routerLink` directive. Let's go back and take our simple router setup from earlier: - -```ts -RouterModule.forRoot([ - { path: '', component: LoginComponent }, - { path: 'detail', component: DetailComponent }, -]); -``` - -Now from the `LoginComponent`, we can use the following HTML to navigate to the detail route. - -```html - - - Login - - - - - Go to detail - -``` - -The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths. - -We also can programmatically navigate in our app by using the router API. - -```tsx -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; - -@Component({ - ... -}) -export class LoginComponent { - - constructor(private router: Router){} - - navigate(){ - this.router.navigate(['/detail']) - } -} -``` - -Both options provide the same navigation mechanism, just fitting different use cases. - -:::note -A note on navigation with relative URLs: Currently, to support multiple navigation stacks, relative URLs are something not supported -::: - -## Lazy loading routes - -Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks. - -```tsx - -import { RouterModule } from '@angular/router'; - -@NgModule({ - imports: [ - ... - RouterModule.forRoot([ - { path: '', redirectTo: 'login', pathMatch: 'full' }, - { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) }, - { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) } - ]) - ], -}) -``` - -While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components. - -```tsx -... -import { RouterModule } from '@angular/router'; -import { LoginComponent } from './login.component'; - -@NgModule({ - imports: [ - ... - RouterModule.forChild([ - { path: '', component: LoginComponent }, - ]) - ], -}) -``` - -:::note -We're excluding some additional content and only including the necessary parts. -::: - -Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component. - -## Live Example - -If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz. - -## Working with Tabs - -With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's look at a simple example. - -```ts -const routes: Routes = [ - { - path: 'tabs', - component: TabsPage, - children: [ - { - path: 'tab1', - children: [ - { - path: '', - loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), - }, - ], - }, - { - path: '', - redirectTo: '/tabs/tab1', - pathMatch: 'full', - }, - ], - }, - { - path: '', - redirectTo: '/tabs/tab1', - pathMatch: 'full', - }, -]; -``` - -Here we have a "tabs" path that we load. In this example we call the path "tabs", but the name of the paths can be changed. They can be called whatever fits your app. In that route object, we can define a child route as well. In this example, the top level child route "tab1" acts as our "outlet", and can load additional child routes. For this example, we have a single sub-child-route, which just loads a new component. The markup for the tab is as followed: - -```html - - - - - Tab One - - - -``` - -If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires ``, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration. diff --git a/versioned_docs/version-v5/angular/overview.md b/versioned_docs/version-v5/angular/overview.md deleted file mode 100644 index 42acc51dd04..00000000000 --- a/versioned_docs/version-v5/angular/overview.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 'Ionic Angular Overview | Angular Version Support and Tooling' -description: '@ionic/angular combines the Ionic experience with the tooling and APIs tailored to Angular Developers. Learn more about version support in our Angular Overview.' -sidebar_label: Overview ---- - -# Ionic Angular Overview - -`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. - -## Angular Version Support - -Ionic supports `Angular 6.0.0 and up`. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state. - -## Angular Tooling - -With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. diff --git a/versioned_docs/version-v5/angular/performance.md b/versioned_docs/version-v5/angular/performance.md deleted file mode 100644 index ba542f38f46..00000000000 --- a/versioned_docs/version-v5/angular/performance.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -sidebar_label: Performance ---- - -# Angular Performance - -## \*ngFor with Ionic Components - -When using `*ngFor` with Ionic components, we recommend using Angular's `trackBy` option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether. - -By using `trackBy` you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use `trackBy`: - -**home.page.html** - -```html - - {{ item.value }} - -``` - -**home.component.ts** - -```tsx - -items = [ - { id: 0, value: 'Item 0' }, - { id: 1, value: 'Item 1' }, - ... -] - -trackItems(index: number, itemObject: any) { - return itemObject.id; -} -``` - -In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element. - -For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation. - -## From the Ionic Team - -[How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/) - -[Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/) - -## From the Angular Team - -[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev - -## From the Community - -[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony - -[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony - -[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony - -[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - -:::note -Do you have a guide you'd like to share? Click the _Edit this page_ button below. -::: diff --git a/versioned_docs/version-v5/angular/platform.md b/versioned_docs/version-v5/angular/platform.md deleted file mode 100644 index 7020ca4e603..00000000000 --- a/versioned_docs/version-v5/angular/platform.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Platform | Ionic Platform to Customize Apps to Fit Any Device -description: Ionic Platform service can be used to get information about your current device. With this information you can completely customize your app to fit any device. -sidebar_label: Platform ---- - -# Platform - -The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the `platforms` method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device. - -## Usage - -```tsx -import { Platform } from '@ionic/angular'; - -@Component({...}) -export class MyPage { - constructor(public platform: Platform) { - - } -} -``` - -## Methods - -### `is(platformName: Platforms) => boolean` - -Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. - -#### Parameters - -| Name | Type | Description | -| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -| `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet | - -#### Platforms - -Below is a table listing all the possible platform values along with corresponding descriptions. - -| Platform Name | Description | -| ------------- | ---------------------------------------- | -| android | a device running Android | -| capacitor | a device running Capacitor | -| cordova | a device running Cordova | -| desktop | a desktop device | -| electron | a desktop device running Electron | -| hybrid | a device running Capacitor or Cordova | -| ios | a device running iOS | -| ipad | an iPad device | -| iphone | an iPhone device | -| mobile | a mobile device | -| mobileweb | a web browser running in a mobile device | -| phablet | a phablet device | -| pwa | a PWA app | -| tablet | a tablet device | - -### `platforms() => string[]` - -Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. - -### `ready() => Promise` - -Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used. - -For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. - -### `isRTL() => boolean` - -Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) - -### `isLandscape() => boolean` - -Returns `true` if the app is in landscape mode. - -### `isPortrait() => boolean` - -Returns `true` if the app is in portrait mode. - -### `width() => number` - -Gets the width of the platform's viewport using `window.innerWidth`. - -### `height() => number` - -Gets the height of the platform's viewport using `window.innerHeight`. - -### `url() => string` - -Get the current url. - -### `testUserAgent(expression: string) => boolean` - -Returns `true` if the expression is included in the user agent string. - -### Parameters - -| Name | Type | Description | -| ---------- | ------ | ------------------------------------- | -| expression | string | The string to check in the user agent | - -## Events - -### `pause` - -The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser. - -#### Usage - -```tsx -this.platform.pause.subscribe(async () => { - alert('Pause event detected'); -}); -``` - -### `resize` - -The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation. - -#### Usage - -```tsx -this.platform.resize.subscribe(async () => { - alert('Resize event detected'); -}); -``` - -### `resume` - -The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser. - -#### Usage - -```tsx -this.platform.resume.subscribe(async () => { - alert('Resume event detected'); -}); -``` diff --git a/versioned_docs/version-v5/angular/pwa.md b/versioned_docs/version-v5/angular/pwa.md deleted file mode 100644 index 45947df209b..00000000000 --- a/versioned_docs/version-v5/angular/pwa.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -sidebar_label: Progressive Web Apps ---- - -# Progressive Web Apps in Angular - -## Making your Angular app a PWA - -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. - -The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. -To add this package to the app, run: - -```shell -ng add @angular/pwa -``` - -Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA. - -:::note -By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons. -::: - -:::note -Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers. -::: - -## Service Worker configuration - -After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided: - -```json -{ - "$schema": "./node_modules/@angular/service-worker/config/schema.json", - "index": "/index.html", - "assetGroups": [ - { - "name": "app", - "installMode": "prefetch", - "resources": { - "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"] - } - }, - { - "name": "assets", - "installMode": "lazy", - "updateMode": "prefetch", - "resources": { - "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"] - } - } - ] -} -``` - -There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config) - -## Deploying - -### Firebase - -Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html). - -First, if not already available, [create the project](https://console.firebase.google.com) in Firebase. - -Next, in a Terminal, install the Firebase CLI: - -```shell -npm install -g firebase-tools -``` - -:::note -If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. -::: - -With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: - -**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites." - -**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. - -**"What do you want to use as your public directory?"** Enter "www". - -:::note -Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app: -::: - -**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". - -**"File www/index.html already exists. Overwrite?"** Enter "No". - -A `firebase.json` config file is generated, configuring the app for deployment. - -The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like: - -```json -{ - "hosting": { - "public": "www", - "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], - "rewrites": [ - { - "source": "**", - "destination": "/index.html" - } - ], - "headers": [ - { - "source": "/build/app/**", - "headers": [ - { - "key": "Cache-Control", - "value": "public, max-age=31536000" - } - ] - }, - { - "source": "ngsw-worker.js", - "headers": [ - { - "key": "Cache-Control", - "value": "no-cache" - } - ] - } - ] - } -} -``` - -For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json). - -Next, build an optimized version of the app by running: - -```shell -ionic build --prod -``` - -Last, deploy the app by running: - -```shell -firebase deploy -``` - -After this completes, the app will be live. diff --git a/versioned_docs/version-v5/angular/storage.md b/versioned_docs/version-v5/angular/storage.md deleted file mode 100644 index ea044c7ccc6..00000000000 --- a/versioned_docs/version-v5/angular/storage.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_label: Storage ---- - -# Data Storage - -There are variety of options available for storing data within an Ionic app. - -Here are two official Ionic options: - -## Ionic Secure Storage - -For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. - -It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web. - -[Learn more](https://ionic.io/products/secure-storage) - -## @ionic/storage - -For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms. - -Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support. - -Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage) diff --git a/versioned_docs/version-v5/angular/testing.md b/versioned_docs/version-v5/angular/testing.md deleted file mode 100644 index ce608728a73..00000000000 --- a/versioned_docs/version-v5/angular/testing.md +++ /dev/null @@ -1,585 +0,0 @@ -# Testing - -When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. - -## Testing Principles - -When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction. - -If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there. - -It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system. - -## Unit Testing - -Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them. - -Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case. - -Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage. - -### Using Mocks - -Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test. - -Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`). - -There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`. - -#### Using `jasmine.createSpy` and `jasmine.createSpyObj` - -`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects. - -`jasmine.createSpy` is similar but it creates a stand-alone mock function. - -#### Using `spyOn()` and `spyOnProperty()` - -`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required. - -`spyOnProperty()` is similar with the difference being that it spies on a property and not a method. - -### General Testing Structure - -Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder. - -The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases. - -The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence. - -For example: - -```tsx -describe('Calculation', () => { - describe('divide', () => { - it('calculates 4 / 2 properly' () => {}); - it('cowardly refuses to divide by zero' () => {}); - ... - }); - - describe('multiply', () => { - ... - }); -}); -``` - -The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero). - -### Pages and Components - -Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. - -Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: - -```tsx -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TabsPage } from './tabs.page'; - -describe('TabsPage', () => { - let component: TabsPage; - let fixture: ComponentFixture; - - beforeEach(async () => { - TestBed.configureTestingModule({ - declarations: [TabsPage], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(TabsPage); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); -``` - -When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM. - -## Services - -Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation. - -### Basic Service Testing - -The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation. - -Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such: - -```tsx -import { PayrollService } from './payroll.service'; - -describe('PayrollService', () => { - let service: PayrollService; - let taxServiceSpy; - - beforeEach(() => { - taxServiceSpy = jasmine.createSpyObj('TaxService', { - federalIncomeTax: 0, - stateIncomeTax: 0, - socialSecurity: 0, - medicare: 0 - }); - service = new PayrollService(taxServiceSpy); - }); - - describe('net pay calculations', () => { - ... - }); -}); -``` - -This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly. - -The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such: - -```tsx -import { TestBed, inject } from '@angular/core/testing'; - -import { PayrollService } from './payroll.service'; -import { TaxService } from './tax.service'; - -describe('PayrolService', () => { - let taxServiceSpy; - - beforeEach(() => { - taxServiceSpy = jasmine.createSpyObj('TaxService', { - federalIncomeTax: 0, - stateIncomeTax: 0, - socialSecurity: 0, - medicare: 0, - }); - TestBed.configureTestingModule({ - providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }], - }); - }); - - it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => { - expect(service).toBeTruthy(); - })); - - it('does some test where it is manually built', () => { - const service = new PayrollService(taxServiceSpy); - expect(service).toBeTruthy(); - }); -}); -``` - -#### Testing HTTP Data Services - -Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's Angular's Testing HTTP requests guide. - -This basic setup for such a test looks like this: - -```tsx -import { HttpBackend, HttpClient } from '@angular/common/http'; -import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'; -import { TestBed, inject } from '@angular/core/testing'; - -import { IssTrackingDataService } from './iss-tracking-data.service'; - -describe('IssTrackingDataService', () => { - let httpClient: HttpClient; - let httpTestingController: HttpTestingController; - let issTrackingDataService: IssTrackingDataService; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [HttpClientTestingModule], - providers: [IssTrackingDataService], - }); - - httpClient = TestBed.get(HttpClient); - httpTestingController = TestBed.get(HttpTestingController); - issTrackingDataService = new IssTrackingDataService(httpClient); - }); - - it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => { - expect(service).toBeTruthy(); - })); - - describe('location', () => { - it('gets the location of the ISS now', () => { - issTrackingDataService.location().subscribe((x) => { - expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 }); - }); - const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json'); - expect(req.request.method).toEqual('GET'); - req.flush({ - iss_position: { longitude: '-138.1719', latitude: '44.4423' }, - timestamp: 1525950644, - message: 'success', - }); - httpTestingController.verify(); - }); - }); -}); -``` - -### Pipes - -A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results. - -As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this: - -```tsx -import { NamePipe } from './name.pipe'; - -import { Person } from '../../models/person'; - -describe('NamePipe', () => { - let pipe: NamePipe; - let testPerson: Person; - - beforeEach(() => { - pipe = new NamePipe(); - testPerson = { - id: 42, - firstName: 'Douglas', - lastName: 'Adams', - middleInitial: 'N', - }; - }); - - it('exists', () => { - expect(pipe).toBeTruthy(); - }); - - it('formats a full name properly', () => { - expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.'); - }); - - it('handles having no middle initial', () => { - delete testPerson.middleInitial; - expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas'); - }); - - it('handles having no first name', () => { - delete testPerson.firstName; - expect(pipe.transform(testPerson)).toBeEqual('Adams N.'); - }); - - it('handles having no last name', () => { - delete testPerson.lastName; - expect(pipe.transform(testPerson)).toBeEqual('Douglas N.'); - }); -}); -``` - -It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe. - -## End-to-end Testing - -End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application. - -Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions. - -### Test Structure - -When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files: - -- `protractor.conf.js` - the Protractor configuration file -- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application -- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and maninpulate elements on the page -- `src/app.e2e-spec.ts` - a testing script - -#### Page Objects - -End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain. - -Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests. - -##### Base Page Object - -A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects. - -Here is an example that implements a few basic methods that all page objects will need to support. - -```tsx -import { browser, by, element, ExpectedConditions } from 'protractor'; - -export class PageObjectBase { - private path: string; - protected tag: string; - - constructor(tag: string, path: string) { - this.tag = tag; - this.path = path; - } - - load() { - return browser.get(this.path); - } - - rootElement() { - return element(by.css(this.tag)); - } - - waitUntilInvisible() { - browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000); - } - - waitUntilPresent() { - browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000); - } - - waitUntilNotPresent() { - browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000); - } - - waitUntilVisible() { - browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000); - } - - getTitle() { - return element(by.css(`${this.tag} ion-title`)).getText(); - } - - protected enterInputText(sel: string, text: string) { - const el = element(by.css(`${this.tag} ${sel}`)); - const inp = el.element(by.css('input')); - inp.sendKeys(text); - } - - protected enterTextareaText(sel: string, text: string) { - const el = element(by.css(`${this.tag} ${sel}`)); - const inp = el.element(by.css('textarea')); - inp.sendKeys(text); - } - - protected clickButton(sel: string) { - const el = element(by.css(`${this.tag} ${sel}`)); - browser.wait(ExpectedConditions.elementToBeClickable(el)); - el.click(); - } -} -``` - -##### Per-Page Abstractions - -Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required. - -Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work. - -```tsx -import { browser, by, element, ExpectedConditions } from 'protractor'; -import { PageObjectBase } from './base.po'; - -export class LoginPage extends PageObjectBase { - constructor() { - super('app-login', '/login'); - } - - waitForError() { - browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000); - } - - getErrorMessage() { - return element(by.css('.error')).getText(); - } - - enterEMail(email: string) { - this.enterInputText('#email-input', email); - } - - enterPassword(password: string) { - this.enterInputText('#password-input', password); - } - - clickSignIn() { - this.clickButton('#signin-button'); - } -} -``` - -#### Testing Scripts - -Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario. - -Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case. - -Here is a sample end-to-end test script that exercises some typical login scenarios. - -```tsx -import { AppPage } from '../page-objects/pages/app.po'; -import { AboutPage } from '../page-objects/pages/about.po'; -import { CustomersPage } from '../page-objects/pages/customers.po'; -import { LoginPage } from '../page-objects/pages/login.po'; -import { MenuPage } from '../page-objects/pages/menu.po'; -import { TasksPage } from '../page-objects/pages/tasks.po'; - -describe('Login', () => { - const about = new AboutPage(); - const app = new AppPage(); - const customers = new CustomersPage(); - const login = new LoginPage(); - const menu = new MenuPage(); - const tasks = new TasksPage(); - - beforeEach(() => { - app.load(); - }); - - describe('before logged in', () => { - it('displays the login screen', () => { - expect(login.rootElement().isDisplayed()).toEqual(true); - }); - - it('allows in-app navigation to about', () => { - menu.clickAbout(); - about.waitUntilVisible(); - login.waitUntilInvisible(); - }); - - it('does not allow in-app navigation to tasks', () => { - menu.clickTasks(); - app.waitForPageNavigation(); - expect(login.rootElement().isDisplayed()).toEqual(true); - }); - - it('does not allow in-app navigation to customers', () => { - menu.clickCustomers(); - app.waitForPageNavigation(); - expect(login.rootElement().isDisplayed()).toEqual(true); - }); - - it('displays an error message if the login fails', () => { - login.enterEMail('test@test.com'); - login.enterPassword('bogus'); - login.clickSignIn(); - login.waitForError(); - expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.'); - }); - - it('navigates to the tasks page if the login succeeds', () => { - login.enterEMail('test@test.com'); - login.enterPassword('testtest'); - login.clickSignIn(); - tasks.waitUntilVisible(); - }); - }); - - describe('once logged in', () => { - beforeEach(() => { - tasks.waitUntilVisible(); - }); - - it('allows navigation to the customers page', () => { - menu.clickCustomers(); - customers.waitUntilVisible(); - tasks.waitUntilInvisible(); - }); - - it('allows navigation to the about page', () => { - menu.clickAbout(); - about.waitUntilVisible(); - tasks.waitUntilInvisible(); - }); - - it('allows navigation back to the tasks page', () => { - menu.clickAbout(); - tasks.waitUntilInvisible(); - menu.clickTasks(); - tasks.waitUntilVisible(); - }); - }); -}); -``` - -### Configuration - -The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration. - -#### Testing Environment - -Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment. - -##### Create the `environment.e2e.ts` File - -The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example: - -```tsx -export const environment = { - production: false, - databaseURL: 'https://e2e-test-api.my-great-app.com', - projectId: 'my-great-app-e2e', -}; -``` - -##### Modify the `angular.json` File - -The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required. - -Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement: - -```json - "test": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.e2e.ts" - } - ] - } -``` - -Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above. - -```json - "test": { - "browserTarget": "app:build:test" - } -``` - -Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above. - -```json - "test": { - "devServerTarget": "app:serve:test" - } -``` - -##### Modify the `package.json` File - -Modify the `package.json` file so that `npm run e2e` uses the `test` configuration. - -```json - "scripts": { - "e2e": "ng e2e --configuration=test", - "lint": "ng lint", - "ng": "ng", - "start": "ng serve", - "test": "ng test", - "test:dev": "ng test --browsers=ChromeHeadlessCI", - "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI" - }, -``` - -#### Test Cleanup - -If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to: - -1. Create an endpoint that performs the cleanup. -1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file. - -Here is an example: - -```javascript - onCleanUp() { - const axios = require('axios'); - return axios - .post( - 'https://e2e-test-api.my-great-app.com/purgeDatabase', - {} - ) - .then(res => { - console.log(res.data); - }) - .catch(err => console.log(err)); - } -``` diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md deleted file mode 100644 index a44f9cab7dc..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -sidebar_label: Build Your First App ---- - -# Your First Ionic App: Angular - -The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. - -Here’s the finished app running on all 3 platforms: - - - -:::note -Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md) -::: - -## What We'll Build - -We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. - -Highlights include: - -- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). -- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs. - -Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng). - -## Download Required Tools - -Download and install these right away to ensure an optimal Ionic development experience: - -- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/). -- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). -- **Command-line interface/terminal (CLI)**: - - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell - CLI, running in Administrator mode. - - **Mac/Linux** users, virtually any terminal will work. - -## Install Ionic Tooling - -Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens: - -:::note -To open a terminal in Visual Studio Code, go to Terminal -> New Terminal. -::: - -```shell -npm install -g @ionic/cli native-run cordova-res -``` - -:::note -The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. - -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. -::: - -## Create an App - -Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality: - -```shell -ionic start photo-gallery tabs --type=angular --capacitor -``` - -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! - -Next, change into the app folder: - -```shell -cd photo-gallery -``` - -Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: - -```shell -npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem -``` - -### PWA Elements - -Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements). - -It's a separate dependency, so install it next: - -```shell -npm install @ionic/pwa-elements -``` - -Next, import `@ionic/pwa-elements` by editing `src/main.ts`. - -```tsx -import { defineCustomElements } from '@ionic/pwa-elements/loader'; - -// Call the element loader after the platform has been bootstrapped -defineCustomElements(window); -``` - -That’s it! Now for the fun part - let’s see the app in action. - -## Run the App - -Run this command next: - -```shell -ionic serve -``` - -And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed. - -## Photo Gallery!!! - -There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! - -![Before and after going through this tutorial](/img/guides/first-app-cap-ng/email-photogallery.gif) - -Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: - -```html - - - Tab 2 - - - - - - - Tab 2 - - - -``` - -`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to: - -```html -Photo Gallery -``` - -We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon. - -```html - - - - - - - -``` - -Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and the icon name to “images”: - -```html - - - Photos - -``` - -Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android. diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md deleted file mode 100644 index 70f6ed01e3f..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -sidebar_label: Taking Photos ---- - -# Taking Photos with the Camera - -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). - -## Photo Service - -All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command: - -```shell -ionic g service services/photo -``` - -Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins: - -```tsx -import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; -import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Preferences } from '@capacitor/preferences'; -``` - -Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera: - -```tsx -public async addNewToGallery() { - // Take a photo - const capturedPhoto = await Camera.getPhoto({ - resultType: CameraResultType.Uri, - source: CameraSource.Camera, - quality: 100 - }); -} -``` - -Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos. - -Next, open up `tab2.page.ts` and import the PhotoService class and add a method that calls the `addNewToGallery` method on the imported service: - -```tsx -import { PhotoService } from '../services/photo.service'; - -constructor(public photoService: PhotoService) { } - -addPhotoToGallery() { - this.photoService.addNewToGallery(); -} -``` - -Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the FAB is tapped/clicked: - -```html - - - - - - - -``` - -Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! - -![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png) - -_(Your selfie is probably much better than mine)_ - -After taking a photo, it disappears right away. We need to display it within our app and save it for future access. - -## Displaying Photos - -Outside of the `PhotoService` class definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata: - -```tsx -export interface UserPhoto { - filepath: string; - webviewPath: string; -} -``` - -Back at the top of the file, define an array of Photos, which will contain a reference to each photo captured with the Camera. - -```tsx -export class PhotoService { - public photos: UserPhoto[] = []; - - // other code -} -``` - -Over in the `addNewToGallery` function, add the newly captured photo to the beginning of the Photos array. - -```tsx - const capturedPhoto = await Camera.getPhoto({ - resultType: CameraResultType.Uri, - source: CameraSource.Camera, - quality: 100 - }); - - this.photos.unshift({ - filepath: "soon...", - webviewPath: capturedPhoto.webPath - }); -} -``` - -Next, move over to `tab2.page.html` so we can display the image on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the `PhotoServices`'s Photos array, adding an Image component (``) for each. Point the `src` (source) at the photo’s path: - -```html - - - - - - - - - - - -``` - -Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery! - -Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time. diff --git a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md deleted file mode 100644 index f6a0874aca8..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -sidebar_label: Saving Photos ---- - -# Saving Photos to the Filesystem - -We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted. - -## Filesystem API - -Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class (`src/app/services/photo.service.ts`). We pass in the `photo` object, which represents the newly captured device photo: - -```tsx -private async savePicture(photo: Photo) { } -``` - -We can use this new method immediately in `addNewToGallery()`: - -```tsx -public async addNewToGallery() { - // Take a photo - const capturedPhoto = await Camera.getPhoto({ - resultType: CameraResultType.Uri, // file-based data; provides best performance - source: CameraSource.Camera, // automatically take a new photo with the camera - quality: 100 // highest quality (0 to 100) - }); - - // Save the picture and add it to photo collection - const savedImageFile = await this.savePicture(capturedPhoto); - this.photos.unshift(savedImageFile); -} -``` - -We’ll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function. As you’ll recall, we display each photo on the screen by setting each image’s source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object. - -```tsx -private async savePicture(photo: Photo) { - // Convert photo to base64 format, required by Filesystem API to save - const base64Data = await this.readAsBase64(photo); - - // Write the file to the data directory - const fileName = new Date().getTime() + '.jpeg'; - const savedFile = await Filesystem.writeFile({ - path: fileName, - data: base64Data, - directory: Directory.Data - }); - - // Use webPath to display the new image instead of base64 since it's - // already loaded into memory - return { - filepath: fileName, - webviewPath: photo.webPath - }; -} -``` - -`readAsBase64()` is a helper function we’ll define next. It's useful to organize via a separate method since it requires a small amount of platform-specific (web vs. mobile) logic - more on that in a bit. For now, implement the logic for running on the web: - -```tsx -private async readAsBase64(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - - return await this.convertBlobToBase64(blob) as string; -} - -convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onerror = reject; - reader.onload = () => { - resolve(reader.result); - }; - reader.readAsDataURL(blob); -}); -``` - -Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64. - -There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem. diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md deleted file mode 100644 index 1e6896557cf..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -sidebar_label: Loading Photos ---- - -# Loading Photos from the Filesystem - -We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. - -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store. - -## Preferences API - -Begin by defining a constant variable that will act as the key for the store: - -```tsx -export class PhotoService { - public photos: UserPhoto[] = []; - private PHOTO_STORAGE: string = 'photos'; - - // other code -} -``` - -Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. - -```tsx -Preferences.set({ - key: this.PHOTO_STORAGE, - value: JSON.stringify(this.photos), -}); -``` - -With the photo array data saved, create a function called `loadSaved()` that can retrieve that data. We use the same key to retrieve the photos array in JSON format, then parse it into an array: - -```tsx -public async loadSaved() { - // Retrieve cached photo array data - const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = JSON.parse(photoList.value) || []; - - // more to come... -} -``` - -On mobile (coming up next!), we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, using a new `base64` property on the `Photo` object. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Below is the code you need to add in the `loadSaved()` function you just added: - -```tsx -// Display the photo by reading into base64 format -for (let photo of this.photos) { - // Read each saved photo's data from the Filesystem - const readFile = await Filesystem.readFile({ - path: photo.filepath, - directory: Directory.Data, - }); - - // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; -} -``` - -After, call this new method in `tab2.page.ts` so that when the user first navigates to Tab 2 (the Photo Gallery), all photos are loaded and displayed on the screen. - -```tsx -async ngOnInit() { - await this.photoService.loadSaved(); -} -``` - -That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md deleted file mode 100644 index 72ef3429132..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -strip_number_prefixes: false ---- - -# Adding Mobile - -Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go! - -## Import Platform API - -Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device. - -Import the Ionic [Platform API](https://ionicframework.com/docs/angular/platform) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile): - -```tsx -import { Platform } from '@ionic/angular'; - -export class PhotoService { - public photos: UserPhoto[] = []; - private PHOTO_STORAGE: string = 'photos'; - private platform: Platform; - - constructor(platform: Platform) { - this.platform = platform; - } - - // other code -} -``` - -## Platform-specific Logic - -First, we’ll update the photo saving functionality to support mobile. In the `readAsBase64()` function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, two native runtimes), then read the photo file into base64 format using the Filesystem `readFile()` method. Otherwise, use the same logic as before when running the app on the web: - -```tsx -private async readAsBase64(photo: Photo) { - // "hybrid" will detect Cordova or Capacitor - if (this.platform.is('hybrid')) { - // Read the file into base64 format - const file = await Filesystem.readFile({ - path: photo.path - }); - - return file.data; - } - else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath); - const blob = await response.blob(); - - return await this.convertBlobToBase64(blob) as string; - } -} -``` - -Next, update the `savePicture()` method. When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details here](https://ionicframework.com/docs/core-concepts/webview#file-protocol)). - -```tsx -// Save picture to file on device - private async savePicture(photo: Photo) { - // Convert photo to base64 format, required by Filesystem API to save - const base64Data = await this.readAsBase64(photo); - - // Write the file to the data directory - const fileName = new Date().getTime() + '.jpeg'; - const savedFile = await Filesystem.writeFile({ - path: fileName, - data: base64Data, - directory: Directory.Data - }); - - if (this.platform.is('hybrid')) { - // Display the new image by rewriting the 'file://' path to HTTP - // Details: https://ionicframework.com/docs/building/webview#file-protocol - return { - filepath: savedFile.uri, - webviewPath: Capacitor.convertFileSrc(savedFile.uri), - }; - } - else { - // Use webPath to display the new image instead of base64 since it's - // already loaded into memory - return { - filepath: fileName, - webviewPath: photo.webPath - }; - } - } -``` - -Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code: - -```tsx -public async loadSaved() { - // Retrieve cached photo array data - const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = JSON.parse(photoList.value) || []; - - // Easiest way to detect when running on the web: - // “when the platform is NOT hybrid, do this” - if (!this.platform.is('hybrid')) { - // Display the photo by reading into base64 format - for (let photo of this.photos) { - // Read each saved photo's data from the Filesystem - const readFile = await Filesystem.readFile({ - path: photo.filepath, - directory: Directory.Data - }); - - // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; - } - } -} -``` - -Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device. diff --git a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md deleted file mode 100644 index 790e83ef828..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_label: Deploying Mobile ---- - -# Deploying to iOS and Android - -Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng). - -## Capacitor Setup - -Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova). - -If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports: - -```shell -ionic build -``` - -Next, create both the iOS and Android projects: - -```shell -$ ionic cap add ios -$ ionic cap add android -``` - -Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.). - -Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `www`), you'll need to copy those changes into your native projects: - -```shell -ionic cap copy -``` - -Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command: - -```shell -ionic cap sync -``` - -## iOS Deployment - -:::note -To build an iOS app, you’ll need a Mac computer. -::: - -Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete. - -First, run the Capacitor `open` command, which opens the native iOS project in Xcode: - -```shell -ionic cap open ios -``` - -In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." - -![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png) - -Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." - -Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens. - -Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`. - -Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. - -![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png) - -With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: - -![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png) - -Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! - -![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png) - -## Android Deployment - -Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete. - -First, run the Capacitor `open` command, which opens the native Android project in Android Studio: - -```shell -ionic cap open android -``` - -Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. - -![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png) - -Scroll to the `Permissions` section and ensure these entries are included: - -```xml - - -``` - -Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. - -![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png) - -Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. - -![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png) - -Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 - -In the final portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature. diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md deleted file mode 100644 index fdce9ac6848..00000000000 --- a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -sidebar_label: Live Reload ---- - -# Rapid App Development with Live Reload - -So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster? - -We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. - -## Live Reload - -Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly. - -We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed. - -Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform: - -```shell -$ ionic cap run ios -l --external - -$ ionic cap run android -l --external -``` - -The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device. - -## Deleting Photos - -With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog. - -```html - - - -``` - -Over in `tab2.page.ts`, import Action Sheet and add it to the constructor: - -```tsx -import { ActionSheetController } from '@ionic/angular'; - -constructor(public photoService: PhotoService, - public actionSheetController: ActionSheetController) {} -``` - -Add `UserPhoto` to the import statement. - -```tsx -import { PhotoService, UserPhoto } from '../services/photo.service'; -``` - -Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoService’s `deletePicture()` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet: - -```tsx -public async showActionSheet(photo: UserPhoto, position: number) { - const actionSheet = await this.actionSheetController.create({ - header: 'Photos', - buttons: [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - handler: () => { - this.photoService.deletePicture(photo, position); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - // Nothing to do, action sheet is automatically closed - } - }] - }); - await actionSheet.present(); -} -``` - -Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor. - -In `src/app/services/photo.service.ts`, add the `deletePicture()` function: - -```tsx -public async deletePicture(photo: UserPhoto, position: number) { - // Remove this photo from the Photos reference data array - this.photos.splice(position, 1); - - // Update photos array cache by overwriting the existing photo array - Preferences.set({ - key: this.PHOTO_STORAGE, - value: JSON.stringify(this.photos) - }); - - // delete photo file from filesystem - const filename = photo.filepath - .substr(photo.filepath.lastIndexOf('/') + 1); - - await Filesystem.deleteFile({ - path: filename, - directory: Directory.Data - }); -} -``` - -The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API. - -Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪 - -## What’s Next? - -Congratulations! You built a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. - -Happy app building! 💙 diff --git a/versioned_docs/version-v5/contributing/coc.md b/versioned_docs/version-v5/contributing/coc.md deleted file mode 100644 index b347ee6e9b0..00000000000 --- a/versioned_docs/version-v5/contributing/coc.md +++ /dev/null @@ -1,13 +0,0 @@ -# Code of Conduct - -As contributors and maintainers of the Ionic project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities. - -Communication through any of Ionic's channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. - -We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Ionic project to do the same. - -If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate. - -If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at devrel@ionic.io. - -Please click here to review to Ionic's full code of conduct. diff --git a/versioned_docs/version-v5/contributing/how-to-contribute.md b/versioned_docs/version-v5/contributing/how-to-contribute.md deleted file mode 100644 index 76372852bff..00000000000 --- a/versioned_docs/version-v5/contributing/how-to-contribute.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -sidebar_label: How to Contribute ---- - -# Contributing to Ionic - -Thanks for the interest in contributing to Ionic Framework! - -## Contributing Etiquette - -Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct. - -## Creating an Issue - -- If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](https://ionicworldwide.herokuapp.com/) group. - -- It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable. - -- The issue list of the [Ionic](https://github.com/ionic-team/ionic) repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately. - -- Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 14 days, it will be closed. - -- If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution. - -- Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue. - -## Creating a Good Code Reproduction - -### What is a Code Reproduction? - -A code reproduction is a small application that is built to demonstrate a particular issue. The code reproduction should contain the minimum amount of code needed to recreate the issue and should focus on a single issue. - -### Why Should You Create a Reproduction? - -A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed! - -Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. In other words, creating a code reproduction of the issue helps us help you. - -### How to Create a Reproduction - -- Create a new Ionic application using one of our starter templates. The `blank` starter application is a great choice for this. You can create one using the following Ionic CLI command: `ionic start myApp blank` -- Add the minimum amount of code needed to recreate the issue you are experiencing. Do not include anything that is not required to reproduce the issue. This includes any 3rd party plugins you have installed. -- Publish the application on GitHub and include a link to it when [creating an issue](#creating-an-issue). -- Be sure to include steps to reproduce the issue. These steps should be clear and easy to follow. - -### Benefits of Creating a Reproduction - -- **Uses the latest version of Ionic:** By creating a new Ionic application, you are ensuring that you are testing against the latest version of the framework. Sometimes the issues you are experiencing have already been resolved in a newer version of the framework! -- **Minimal surface area:** By removing code that is not needed in order to reproduce the issue, it makes it easier to identify the cause of the issue. -- **No secret code needed:** Creating a minimal reproduction of the issue prevents you from having to publish any proprietary code used in your project. -- **Get help fixing the issue:** If we can reliably reproduce an issue, there is a good chance we will be able to address it. - -## Creating a Pull Request - -- We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. - -- Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label! - -### Setup - -1. [Download the installer](https://nodejs.org/) for the LTS version of Node.js. This is the best way to also [install npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm#_=_). -2. Fork the [Ionic](https://github.com/ionic-team/ionic) repository. -3. Clone your fork. -4. Create a new branch from master for your change. -5. Navigate into the directory of the package you wish to modify (core, angular, etc.). -6. Run `npm install` to install dependencies for this package. -7. Follow the steps for the specific package below. - -### Core - -#### Modifying Components - -1. Locate the component(s) to modify inside `/core/src/components/`. -2. Take a look at the [Stencil Documentation](https://stenciljs.com/docs/introduction/) and other components to understand the implementation of these components. -3. Make your changes to the component. If the change is overly complex or out of the ordinary, add comments so we can understand the changes. -4. [Preview your changes](#preview-changes) locally. -5. [Modify the documentation](#modifying-documentation) if needed. -6. [Run lint](#lint-changes) on the directory and make sure there are no errors. -7. [Build the project](#building-changes). -8. After the build is finished, commit the changes. Please follow the [commit message format](#commit-message-format) for every commit. -9. [Submit a Pull Request](#submit-pull-request) of your changes. - -#### Preview Changes - -1. Run `npm start` from within the `core` directory. -2. A browser should open at `http://localhost:3333/`. -3. From here, navigate to one of the component's tests to preview your changes. -4. If a test showing your change doesn't exist, [add a new test or update an existing one](#modifying-tests). -5. To test in RTL mode, once you are in the desired component's test, add `?rtl=true` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?rtl=true`. - -#### Lint Changes - -1. Run `npm run lint` to lint the TypeScript and Sass. -2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not. -3. To lint and fix only TypeScript errors, run `npm run lint.ts` and `npm run lint.ts.fix`, respectively. -4. To lint and fix only Sass errors, run `npm run lint.sass` and `npm run lint.sass.fix`, respectively. - -#### Modifying Documentation - -1. Locate the `readme.md` file in the component's directory. -2. Modify the documentation **above** the line that says `` in this file. -3. To update any of the auto generated documentation below that line, make the relevant changes in the following places: - -- `Usage`: update the component's usage examples in the component's `usage/` directory -- `Properties`, `Events`, or `Methods`: update the component's TypeScript file (`*.tsx`) -- `CSS Custom Properties`: update the component's main Sass file (`*.scss`) - -#### Modifying Tests - -1. Locate the test to modify inside the `test/` folder in the component's directory. -2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added. -3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file). -4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test. - -##### Screenshot Tests - -1. If the test exists in screenshot, there will be a file named `e2e.ts` in the directory of the test. -2. A screenshot test can be added by including this file and adding one or more `test()` calls that include a call to `page.compareScreenshot()`. See [Stencil end-to-end testing](https://stenciljs.com/docs/end-to-end-testing) and existing tests in `core/` for examples. -3. **Important:** each `test()` should have only one screenshot (`page.compareScreenshot()`) call **or** it should check the expect at the end of each test. If there is a mismatch it will fail the test which will prevent the rest of the test from running, i.e. if the first screenshot fails the remaining screenshot calls would not be called _unless_ they are in a separate test or all of the expects are called at the end. -4. To run screenshot locally, use the following command: `npm run test.screenshot`. - - To run screenshot for a specific test, pass the path to the test or a string to search for. - - For example, running all `alert` tests: `npm run test.screenshot alert`. - - Or, running the basic `alert` tests: `npm run test.screenshot src/components/alert/test/basic/e2e.ts`. - -#### Building Changes - -1. Once all changes have been made and the documentation has been updated, run `npm run build` inside of the `core` directory. This will add your changes to any auto-generated files, if necessary. -2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes. -3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed. -4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request). - -### Submit Pull Request - -1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `master` branch as the `base`. You may need to click on `compare across forks` to find your changes. -2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information. -3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related. - -## Commit Message Guidelines - -We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit). - -### Commit Message Format - -We follow the [Conventional Commits specification](https://www.conventionalcommits.org/). A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: - -``` -(): - - - -