Ionic Meetup
#22 Tokyo

新宿駅徒歩圏内の好立地での開催。2022/07/09(土)、東京開催。

DocsPluginsCLI
Stencil

Stencil & Capacitor

Build native mobile apps with web technology and Stencil

01

Install Capacitor.

Add Capacitor to your project and create a config for your app

npm install @capacitor/core @capacitor/cli
npx cap init [name] [id] --web-dir=www
02

Build the Web App.

The compiled web assets will be copied into each Capacitor native platform during the next step.

npm run build
03

Install the native platforms you want to target.

AppleAndroid

Capacitor's native projects exist in their own top-level folders and should be considered part of your app (check them into source control).

npm i @capacitor/ios @capacitor/android
npx cap add android
npx cap add ios
04

Adding calls to Native APIs

With Capacitor installed, adding calls to native device features is as straight forward as calling other JavaScript methods

import { Component, Host, State, h } from '@stencil/core';
import { Geolocation } from '@capacitor/geolocation';

@Component({
  tag: 'geolocation-page',
  shadow: true,
})
export class  GeolocationPage() {

  @State() loc = null;

  async getCurrentPosition() {
    const loc = await Geolocation.getCurrentPosition();
    this.loc = loc;
  }

  render() {
    return (
      <Host>
        <h1>Geolocation</h1>
        <p>Your location is:</p>
        <p>Latitude: {this.loc?.coords.latitude}</p>
        <p>Longitude: {this.loc?.coords.longitude}</p>

        <button onClick={() => this.getCurrentPosition()}>
          Get Current Location
        </button>
      </Host>
    );
  }
}

Continue your Capacitor Journey.

This is only the beginning. Learn more about the Capacitor development workflow or using more native APIs .

The latest updates. Delivered monthly.

Capacitor is getting better every day. Sign up for a monthly email on the latest updates, releases, articles, and news!