npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

awesome-cordova-plugins

v5.40.0

Published

Native plugin wrappers for Cordova and Ionic with TypeScript, ES6+, Promise and Observable support

Downloads

179

Readme

Commitizen friendly

Awesome Cordova Plugins

Awesome Cordova Plugins is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic mobile app easy.

Awesome Cordova Plugins wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

To learn more about the reasons why Ionic Native was renamed to Awesome Cordova Plugins, read the official Ionic blog post by Max Lyncht.

Capacitor Support

In addition to Cordova, Awesome Cordova Plugins also works with Capacitor, Ionic's official native runtime. Basic usage below. For complete details, see the Capacitor documentation.

Installation

Run following command to install Awesome Cordova Plugins in your project.

npm install @awesome-cordova-plugins/core --save

You also need to install the Awesome Cordova Plugins package for each plugin you want to add. Please see the Awesome Cordova Plugins documentation for complete instructions on how to add and use the plugins.

Documentation

For the full Awesome Cordova Plugins documentation, please visit https://ionicframework.com/docs/native/.

Basic Usage

Ionic/Angular apps

To use a plugin, import and add the plugin provider to your @NgModule, and then inject it where you wish to use it. Make sure to import the injectable class from the /ngx directory as shown in the following examples:

// app.module.ts
import { Camera } from '@awesome-cordova-plugins/camera/ngx';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { Platform } from 'ionic-angular';

@Component({ ... })
export class MyComponent {

  constructor(private geolocation: Geolocation, private platform: Platform) {

    this.platform.ready().then(() => {

      // get position
      this.geolocation.getCurrentPosition().then(pos => {
        console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
      });


      // watch position
      const watch = geolocation.watchPosition().subscribe(pos => {
        console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
      });

      // to stop watching
      watch.unsubscribe();
    });

  }

}

Ionic/React apps

React apps must use Capacitor to build native mobile apps. However, Awesome Cordova Plugins (and therefore, Cordova plugins) can still be used.

# Install Core library (once per project)
npm install @awesome-cordova-plugins/core

# Install Awesome Cordova Plugins 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:

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 (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton onClick={openScanner}>Scan barcode</IonButton>
      </IonContent>
    </IonPage>
  );
};

ES2015+/TypeScript

These modules can work in any ES2015+/TypeScript app (including Angular/Ionic apps). To use any plugin, import the class from the appropriate package, and use it's static methods.

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));
});

AngularJS

Awesome Cordova Plugins generates an AngularJS module in runtime and prepares a service for each plugin. To use the plugins in your AngularJS app:

  1. Download the latest bundle from the Github releases page.
  2. Include it in index.html before your app's code.
  3. Inject ionic.native module in your app.
  4. Inject any plugin you would like to use with a $cordova prefix.
angular.module('myApp', ['ionic.native']).controller('MyPageController', function ($cordovaCamera) {
  $cordovaCamera.getPicture().then(
    function (data) {
      console.log('Took a picture!', data);
    },
    function (err) {
      console.log('Error occurred while taking a picture', err);
    }
  );
});

Vanilla JS

To use Awesome Cordova Plugins in any other setup:

  1. Download the latest bundle from the Github releases page.
  2. Include it in index.html before your app's code.
  3. Access any plugin using the global IonicNative variable.
document.addEventListener('deviceready', function () {
  IonicNative.Camera.getPicture().then(
    function (data) {
      console.log('Took a picture!', data);
    },
    function (err) {
      console.log('Error occurred while taking a picture', err);
    }
  );
});

Mocking and Browser Development (Ionic/Angular apps only)

Awesome Cordova Plugins makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in ionic serve.

To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the Camera plugin to return a stock image while in development:

First import the Camera class in your src/app/app.module.ts file:

import { Camera } from '@awesome-cordova-plugins/camera/ngx';

Then create a new class that extends the Camera class with a mock implementation:

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve('BASE_64_ENCODED_DATA_GOES_HERE');
    });
  }
}

Finally, override the previous Camera class in your providers for this module:

providers: [{ provide: Camera, useClass: CameraMock }];

Here's the full example:

import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Camera } from '@awesome-cordova-plugins/camera/ngx';

import { HomePage } from '../pages/home/home';
import { MyApp } from './app.component';

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve('BASE_64_ENCODED_DATA_GOES_HERE');
    });
  }
}

@NgModule({
  declarations: [MyApp, HomePage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    { provide: Camera, useClass: CameraMock },
  ],
})
export class AppModule {}

Runtime Diagnostics

Spent way too long diagnosing an issue only to realize a plugin wasn't firing or installed? Awesome Cordova Plugins lets you know what the issue is and how you can resolve it.

img

Plugin Missing?

Let us know or submit a PR! Take a look at the Developer Guide for more on how to contribute. :heart:

Credits

Ibby Hadeed - @ihadeed

Daniel Sogl - @sogldaniel

Tim Lancina - @timlancina

Mike Hartington - @mhartington

Max Lynch - @maxlynch

Rob Wormald - @robwormald