Cordova or Adobe PhoneGap • Easy to convert your application to Native App • iOS / Android / Electron / and PWA • Access the native API from JavaScript
cross-platform friendly UI components • Capacitor helps us to access the device native API. • Capacitor build application for the native and web. • Single codebase, running everywhere :)
provides an installable, app-like experience via the web • PWA can make a multi-device support web application • Many API can use from JavaScript (Web push / Camera / etc..) • But, still not able to access several native APIs. • If we want to access these APIs, we need to create a Native App
Bluetooth • Web MIDI API • Magnetometer API • Web NFC API - • Device Memory API • Network Information API - • Battery Status API • • Serial API • Web USB Geolocation Sensor (background geolocation) • User Idle Detection • Proximity Sensor Web Bluetooth Scanning • Ambient Light Sensor - • WebHID https://www.zdnet.com/article/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns/
for PWA and native • Single Capacitor API, calling optimized API • And Ionic provides a device optimized UI component • Build PWA and Native App by JavaScript
"@capacitor-community" https://www.npmjs.com/search?q=%40capacitor-community • Common plugin: Search by ”capacitor plugin” https://www.npmjs.com/search?q=capacitor%20plugin
@capacitor/core # Initialize $ npx cap init - ? App name YOUR_APPLICATION_NAME - ? App Package ID com.example.app - ? Which npm client would you like to use? › npm yarn Your Capacitor project is ready to go! Simplest setup for existing app
Skipping: already installed ✔ Adding native xcode project in: /Users/development/ionic-react/ios in 17.76ms ✔ add in 19.83ms ✔ Copying web assets from public to ios/App/public in 4.21ms ✔ Copying native bridge in 2.36ms ✔ Copying capacitor.config.json in 1.12ms ✔ copy in 23.29ms ✔ Updating iOS plugins in 4.67ms Found 0 Capacitor plugins for ios: ✔ Updating iOS native dependencies with "pod install" (may take several minutes) in 7.46s ✔ update ios in 7.48s Now you can run npx cap open ios to launch Xcode % npx cap add android % npx cap add electron % npx cap add web Add Supported Platform
Capacitor % npx cap sync ✔ Copying web assets from public to android/app/src/main/assets/public in 9.31ms ✔ Copying native bridge in 1.01ms ✔ Copying capacitor.config.json in 766.90μp ✔ copy in 23.18ms ✔ Updating Android plugins in 3.58ms Found 0 Capacitor plugins for android: ✔ update android in 19.35ms ✔ Copying web assets from public to ios/App/public in 4.78ms ✔ Copying native bridge in 912.98μp ✔ Copying capacitor.config.json in 671.34μp ✔ copy in 14.16ms ✔ Updating iOS plugins in 2.32ms Found 0 Capacitor plugins for ios: ✔ Updating iOS native dependencies with "pod install" (may take several minutes) in 6.33s ✔ update ios in 6.34s ✔ copy in 237.76μp ✔ update web in 5.83μp Sync finished in 6.415s Update & Sync
a g e = J u s t c o m p i l e • Capacitor converts your SPA to a Native App • We can publish Native apps just using build artifacts by Capacitor • iOS app: /ios • Android app: /android • Electron app: /electron
defineCustomElements } from '@ionic/pwa-elements/loader'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); // Call the element loader after the app has been rendered the first time defineCustomElements(window); Add element loader after render function
from 'react'; import ReactDOM from 'react-dom'; import { defineCustomElements } from '@ionic/pwa-elements/loader'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); // Call the element loader after the app has been rendered the first time defineCustomElements(window);
calling between Native and web • Ionic unifies the UI style too • Single codebase (Use JavaScript / TypeScript) multi build • We can provide our own content from many approaches
and web • Ionic unifies the UI style too • Single codebase (Use JavaScript / TypeScript) multi build • We can provide our own content from many approaches Blog post about Ionic & Capacitor https://bit.ly/323kv6y Shifter https://getshifter.io Twitter @motchi0214 GitHub https://github.com/hideokamoto/