This post was written by community member Masahiko Sakakibara. He is a Web Native App Developer and organizer of the Ionic Japan User Group, and maintainer of @capacitor-community/admob and @capacitor-community/facebook-login

• Follow Masahiko on Twitter
• Follow Ionic Japan User Group

Description

• NativeScript for Capacitor provides direct JavaScript access to the device Native API
• Instead of having to write in Swift or Java, you can access those api's directly from JavaScript
• A new additional plugin built for use with NativeScript for Capacitor is available now with:

@nativescript-community/capacitor-plugins

1. What is NativeScript for Capacitor?

An exciting new world has become available. A library for modern hybrid development (Mobile Apps using WebView) "Capacitor", giving JavaScript "direct" access to the Native API.

Yes, with "NativeScript for Capacitor"!

https://capacitor.nativescript.org/

What we are able to do

NativeScript for Capacitor provides a way to call the native API methods of the device directly from JavaScript.

An example.

On iOS, in order to set the brightness of a device, the value must be placed in the object brightness of the main screen object mainScreen() in the device object UIScreen.

Swift Code:

UIScreen.mainScreen().brightness = 1

NativeScript for Capacitor has corresponding UIScreen, mainScreen, and brightness, so you can write it in JavaScript like this:

NativeScript for Capacitor code:

UIScreen.mainScreen.brightness = 1

NativeScript provides typings to give you strong type checking against these api's

On Android (SDK > 24/canWrite), using Java, you need to set the Settings.System.putInt object to set the device brightness as follows:

Java Code:

Settings.System.putInt(
  contentResolver, 
  Settings.System.SCREEN_BRIGHTNESS,
  100
);

In NativeScript for Capacitor, we have a Settings object under android.provider (the fully qualified Java package namespace which you can see right from Android docs here: https://developer.android.com/reference/android/provider/Settings), so we can write:

NativeScript for Capacitor code:

android.provider.Settings.System.putInt(
  context.getContentResolver(),
  android.provider.Settings.System.SCREEN_BRIGHTNESS,
  100
);

So the code that works on both iOS and Android looks like this:

NativeScript for Capacitor code:

if (native.isIOS) {
  UIScreen.mainScreen.brightness = 1
} else {
  android.provider.Settings.System.putInt(
    context.getContentResolver(),
    android.provider.Settings.System.SCREEN_BRIGHTNESS,
    100
  );
}

With NativeScript for Capacitor, we can now access device Native API directly from JavaScript via the Capacitor WebView.

We couldn't before?

Capacitor provides "Capacitor Plugin" as a mechanism for accessing the Native API (The Cordova plugin is also available, but the structure is the same, so I'll skip it). Those approaches have to use Native API to access the device's Native API. So, the Capacitor Plugin needed Swift and Java code

The Plugin mechanism was the interface for accessing the code from JavaScript and receiving events.

Plugin.java (Your work) - JavascriptInterface - JavaScript(Your work)
Plugin.swift(Your work) - WKUserScript - JavaScript(Your work)

NativeScript for Capcacitor, on the other hand, provides a Native API interface for each device, so you can write only in JavaScript.

NativeScript of iOS     - JavaScript(Your work only!)
NativeScript of Android - JavaScript(Your work only!)

This is the biggest difference.

Footnote: If you use a third-party library, you need to create a Capacitor Plugin. For example, @capacitor-community/admob uses Google-Mobile-Ads-SDK for iOS and com.google.android.gms: play-services-ads for Java. Using NativeScript for Capacitor, you could actually code against those libraries directly in JavaScript assuming the native SDK's were included in your Capacitor project which both of those @capacitor-community plugins provide.

2. Making Code Reusable with @nativescript-community/capacitor-plugins

NativeScript for Capacitor is powerful, but we can make it even more reusable. Out of the box, you can write all sorts of custom NativeScript in a dedicated file src/nativescript/index.ts within your project. You can grab examples from other projects, stack overflow, etc., but if you copy and paste it, it lives directly in your project meaning you can't seamlessly share NativeScript code across projects.

Masahiko created @nativescript-community/capacitor-plugins to solve this problem. This Plugin provides additional support for projects that use NativeScript for Capacitor.

Getting started is easy.

% npm --save @nativescript-community/capacitor-plugins

and rewrite src/nativescript/index.ts as follows:

  import '@nativescript/capacitor/bridge';
+ import * as Plugins from '@nativescript-community/capacitor-plugins';

+ native = Object.assign(native, Plugins);
...

Similarly, rewrite src/native-custom.d.ts.

+ import type { pluginsGlobal } from '@nativescript-community/capacitor-plugins/src/interfaces';

  declare module '@nativescript/capacitor' {
    export interface customNativeAPI extends nativeCustom {}
  }

  /**
   * Define your own custom strongly typed native helpers here.
   */
- export interface nativeCustom {
+ export interface nativeCustom extends pluginsGlobal {

This is all you need to do to make use of the methods provided by this plugin. See here for more information.

Help contribution

This brand new plugin attempts to increase reusability across Capacitor projects. Right now it has a method to adjust brightness. However it can be expanded with tons of additional features and useful utilities.

You can contribute to this plugin here.

There's also a fun contest with free swag to the first 10 developers that create solutions using NativeScript for Capacitor:

https://capacitor.nativescript.org/swag-contest.html

We hope everyone has fun with this and creates solutions that help all sorts of interesting use cases.

Result

With Capacitor, you can use Web technology to create applications that have great usability like native applications written in Swift or Java. But with the advent of NativeScript for Capacitor, this capability has become even more powerful.

In addition, @nativescript-community/capacitor-plugins makes it possible to reuse and distribute JavaScript code that uses NativeScript.

It's amazing how far our beloved Web technology can go.