GeezerVison is showing capacitorjs.com — Capacitor by Ionic - Cross-platform apps with web technology A cross-platform native runtime for web apps.Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Migrate from Cordova →
Get started easily.01 Drop Capacitor into any existing web app.npm install @capacitor/cli @capacitor/core npx cap init
02 Install the native platforms you want to target.npm install @capacitor/ios @capacitor/android npx cap add ios npx cap add android
03 Access core Native APIs or extend with your own.Capacitor’s native plugin APIs make it extremely easy to access and invoke common device functionality across multiple platforms. import { LocalNotifications } from '@capacitor/local-notifications';
LocalNotifications.schedule({ notifications: [ { title: "On sale", body: "Widgets are 10% off. Act fast!", id: 1, schedule: { at: new Date(Date.now() + 1000 * 5) }, sound: null, attachments: null, actionTypeId: "", extra: null } ] });
import { Geolocation } from '@capacitor/geolocation';
// get the users current position const position = await Geolocation.getCurrentPosition();
// grab latitude & longitude const latitude = position.coords.latitude; const longitude = position.coords.longitude;
import { Camera, CameraResultType } from '@capacitor/camera';
// Take a picture or video, or load from the library const picture = await Camera.getPicture({ resultType: CameraResultType.Uri });
import Foundation import Capacitor
// Custom platform code, easily exposed to your web app // through Capacitor plugin APIs. Build APIs that work // across iOS, Android, and the web! @objc(MyAwesomePlugin) public class MyAwesomePlugin: CAPPlugin {
@objc public func doNative(_ call: CAPPluginCall) { let alert = UIAlertController(title: "Title", message: "Please Select an Option", preferredStyle: .actionSheet)
// .... } }
Building Cross-platform Apps with CapacitorShip cross-platform mobile apps 10X faster. We wrote a free guide on when and why to use Capacitor to build cross-platform apps. Connect web apps to native functionality.
Universal appsBuild web-based applications that run equally well across iOS, Android, and as Progressive Web Apps.
Native accessAccess the full Native SDKs on each platform, and easily deploy to the App Stores (and the web).
Native PWAsAdd custom native functionality with a simple Plugin API, or use existing Cordova plugins with our compatibility layer.
CameraCapture images, save photos, and configure hardware parameters like saturation and color balance.
File SystemSave and read documents, assets, and other content your users need to access via native file systems.
GeolocationGather critical information about a user’s device location, such as latitude and longitude.
AccelerometerAccess the device accelerometer sensors to measures changes in velocity of a device motion.
NotificationsSchedule local notifications on the device or handle push notifications sent from a server.
NetworkMonitor for network connectivity and capability changes to build resilient offline apps.
HapticsAdd physical feedback through haptic features available on modern devices.
Your Own PluginWrite your own custom plugins to access specialty features and easily integrate any 3rd-party SDK. Bring your own web framework.Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. What people are saying about Capacitor.I’m reallllyyyy digging capacitor 👀 Did you know @capacitorjs shows how to give your #Angular app access to mobile APIs and a presence in app stores? scriptkitty@thr0wsException I'm pretty hyped to be honest, from what I've seen so far this will be another major step for establishing web technology as the go-to method for developing cross platform apps ♥ Adeniyi Tolulope@tolutronics @capacitorjs has been a great companion this year... with realtime updates. Amazing that this is @vercel Next.js + @tailwindcss + @capacitorjs 🤯 Carlos Martinez@cmartineztech Yes, It works 😱 deep linking and google native authentication in iOS @capacitorjs One of the nice things about Capacitor is that you don’t have to use Ionic. I personally love Ionic and use it for UI components. But it isn’t required for Capacitor 😊 We blogged about how we use Capacitor to build our 4 Children’s apps at the @BBC I still can't believe how easy is to turn an @Ionicframework app into a native iOS app using @capacitorjs 🤯 I've tried React Native but coming from web dev the DX is such a step down. Give @capacitorjs a go if you're building apps 👀 I am asking myself, how did I not hear about @capacitorjs until recently. Very nice. Daniel Rodrigues@inspire_rd Tried out @capacitorjs soon after it went stable - amazing! Simple & straight forward. 👋 The Capacitor Community is growing. Connect with us and say Hello. |