Capacitor: from PWA to native app in 5 minutes

Capacitor : from PWA to native app in 5 minutes Horacio Gonzalez @LostInBrittany NG Rome MMXIX 2019-10-07 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Who am I? Introducing myself and introducing OVH @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

OVH: A Global Leader on Cloud 250k Private cloud VMs running 1 Dedicated IaaS Europe 30 Datacenters Own 20Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed Netwok with 35 PoPs

1.3M Customers in 138 Countries @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

OVH: Our solutions Cloud Web Hosting Mobile Hosting Telecom VPS Containers ▪ Dedicated Server Domain names VoIP Public Cloud Compute ▪ Data Storage Email SMS/Fax Private Cloud ▪ Network and Database CDN Virtual desktop Serveur dédié Security Object Storage Web hosting Cloud HubiC Over theBox ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Capacitor The Native Bridge for Cross-Platform Web Apps @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

What’s Capacitor? Cross-platform app runtime making it easy to build web apps that run natively on iOS, Android and web @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Spiritual heir to Apache Cordova Evolution, not revolution @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Spiritual heir to Apache Cordova Support for many Cordova plugins @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Not opinionated Easy to use in any framework Easy to integrate in any dev toolchain @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Extensible and evolutif ● Close to web-standards ● Plugin API ○ Swift on iOS ○ Java on Android ○ JavaScript for the web @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Developer Friendly Easy to get started Works on any framework @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

You still need the platform tools Android Studio and/or Xcode to build the native packages @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Weren’t you a PWA advocate? And you are also championing Flutter! Where is the coherence, guy? @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Well, I am a PWA advocate indeed I rooted for PWA before it was fancy… @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

And I know the numbers… Apps drive engagement, web drive visitors… 20 biggest apps account for 80% of user time @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

An engineer role is to choose The right tool for the right problem @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

If you need super fancy UX 60 FPS, slick animations An experience more than an app Then go full native And BTW, do it in Flutter believe me, you will thank me! @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

For more normal needs A well done PWA is simply enough @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

But if you need to be in the store? For many reasons, not all objective… @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Hybrid PWA apps The best of two worlds @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Capacitor take your PWA to the store In a simple, quick and painless way @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

First steps testing Capacitor Adding Capacitor to an existing app @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

From web to native Giving superpowers to you webapp @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Testing with a real webapp Warp 10 Photon - IDE for Warp 10 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Step 1 - Add Capacitor to the app ● Install Capacitor cd my-app npm install —save @capacitor/core @capacitor/cli ● Init Capacitor npx cap init ● Add Android and/or iOS and/or Electron support npx cap add android @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Step 2 - Copy to Android ● Edit capacitor.config.json to choose the built folder ● Copy the built resources to Android npx cap copy ● Launch Android Studio npx cap open android @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Step 3 - Test And our webapp is now a native app @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

What about Angular schematics? Yesterday at Speakers’ Dinner, I got a question I couldn’t answer… And now I can happily do it: yes, you can also use Angular schematics: ng add @capacitor/angular @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

First test: successful! Capacitor 1 - Scepticism 0 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

The Capacitor example app Nice to explore Capacitor @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Made by the Ionic team To replace Cordova in Ionic 4 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Official example built on Ionic Showcasing Ionic 4 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Let’s try the official example @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Using directly the Capacitor repository Custom built project, not a production app @capacitor/core and native libs loaded from local directory @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Let’s build the Android version Some pre-building and building needed… @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

We now have an Android project @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Easy and painless Android app @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

And in PWA mode? Some elements haven’t web implementation (yet?) @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

But it still works! It fails gracefully for unsupported plugins @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Second test: successful! Capacitor 2 - Scepticism 0 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Let’s try something harder How about using native capabilities in my app? @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Capacitor without Ionic I want to use it Capacitor with my own toolset @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Let’s begin with a simple example A Camera app, working well on web mode Using standard Media Capture and Streams API @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Let’s charge it with Capacitor We want the same behavior But now in Android, iOS, Electron AND web @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

And does it work? Yes it does… in native mode only! @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

But not in PWA mode :( And a big question: why? @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Well, let’s spot the differences… Searching on the example code hmmmm, @ionic/pwa-elements, what’s that? @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

@ionic/pwa-elements Web-based alternatives for some Capacitor plugins @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Adding @ionic/pwa-elements Simply install them: npm install @ionic/pwa-elements And then import them: import ‘@ionic/pwa-elements’; @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

And then… It’s a kind of magic! @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

On Android and Web @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Second test: successful! Capacitor 3 - Scepticism 0 @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

And in Real Life? Because examples are examples… @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Use case 1: Putting PWA into store It simply works, easy and painless! @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Use case 2: Progressive enhancing Giving your PWA an extra P when going native @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

And Capacitor already works A true winner @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Conclusions Capacitor or not? @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Still fairly recent There are small glitches Doc could be more detailed, with more examples @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Easy to use Friendlier than Cordova @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Yet extensible You can use existing Cordova plugins @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Not opinionated Easy to use in any framework Easy to integrate in any dev toolchain @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX

Thank you! @LostInBrittany #Capacitor @NgRomeConf NG Rome MMXIX