Slide 1
Slide 1 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Electron, Capacitor, PWA
Was, wann, wie und warum
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Intro
Progressive
Web Apps
Electron Capacitor Summary
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 4
Slide 4 text
Electron, Capacitor, PWA
Was, wann, wie und warum
»Cross-platform and cross-device development will
become the norm in the next few years.«
Christian Weyer
Slide 5
Slide 5 text
In 2021, the cross-platform story still works out
– and it’s better than ever!
Electron, Capacitor, PWA
Was, wann, wie und warum
Today
One team One codebase Maximum reach
Slide 6
Slide 6 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 7
Slide 7 text
Intro
Progressive
Web Apps
Electron Capacitor Summary
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 8
Slide 8 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive
Slide 9
Slide 9 text
Architecture Overview & Deployment
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Browser
Internet
Single-Page
Application
Cache
fetch
JS
HTML
CSS
Server
Service
Worker
Slide 10
Slide 10 text
Install Experience
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Slide 11
Slide 11 text
Web Native
Web App Gap
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Web App Gap
Slide 12
Slide 12 text
Project Fugu
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 13
Slide 13 text
Project Fugu
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Contacts
Picker
Screen Wake
Lock API
Picture in
picture
File System
Access API
Capability missing?
http://bit.ly/new-fugu-request
Slide 14
Slide 14 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Project Fugu
https://fugu-tracker.web.app/
Slide 15
Slide 15 text
Fugu Example: File System Access API
if ('showOpenFilePicker' in window) {
const handle = await window.showOpenFilePicker();
const file = await handle.getFile();
// do something with the file
} else {
// use fallback API or disable feature in app
}
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Feature Detection
Browser takes care of
calling OS-level APIs
Slide 16
Slide 16 text
Browser
Cross-Platform Web APIs
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
window.showOpenFilePicker();
Intent.ACTION_GET_CONTENT IFileDialog
…
NSOpenPanel
Slide 17
Slide 17 text
https://paint.js.org
Electron, Capacitor, PWA
Was, wann, wie und warum
LIVE DEMO
Slide 18
Slide 18 text
Store Deployments (Simplified)
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
https://example.com
.appx
.apk
Server
Microsoft
Store
Play
Store
Source
Files
Slide 19
Slide 19 text
Advantages
- One single codebase, maximum reach
- No app store, installation, third-party software, … required
- No app store approvals required
- Super easy deployment (SFTP is enough, no redeployment via MSI, …)
- Latest app version is always available
- App Store support for Microsoft Store, Google Play Store (Trusted
Web Activity, TWA), Samsung Galaxy Store (currently US only)
- Fully backwards compatible
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Slide 20
Slide 20 text
Disadvantages
- No Apple App Store support (uploading PWAs is discouraged)
- Web App Gap
- not all native APIs are available on the web platform
- expected to get smaller thanks to Project Fugu
- not all web APIs are available in every browser
- No control over execution environment
- Requires an up-to-date browser
If that’s an issue, web apps are still an option!
Electron, Capacitor, PWA
Was, wann, wie und warum
Progressive Web Apps
Slide 21
Slide 21 text
Deployment
Electron, Capacitor, PWA
Was, wann, wie und warum
Electron/Capacitor
JS
HTML
CSS
.ipa
.exe .app ELF
.apk
Single-Page
Application
Capacitor
Electron
Slide 22
Slide 22 text
Intro
Progressive
Web Apps
Electron Capactior Summary
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 23
Slide 23 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 24
Slide 24 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Electron Architecture
Desktop OS
Electron Renderer Process
(Chromium)
Electron Main Process
(Node.js)
macOS Windows Linux
Single-Page
Application
Electron API
Custom Node.js
Modules
IPC
Remote
Node.js
Electron-
App
Slide 25
Slide 25 text
Advantages
- Many desktop target platforms
- Windows 7+, macOS 10.10+, Ubuntu, Debian, Fedora
- macOS App Store, Microsoft Store, Snapcraft
- Access to all native APIs
- Well-defined runtime environment (Chromium and Node.js)
- Integration scenarios with native applications
Electron, Capacitor, PWA
Was, wann, wie und warum
Electron
Slide 26
Slide 26 text
Disadvantages
- Wrapper is large in size (“hello world” starts with ~100 MB)
- Outdated Node.js & Chromium versions may pose security risks to
users – developers have to take care of regular updates of the
wrapper
- Each Electron instance leads to RAM overhead (e.g. Slack)
Electron, Capacitor, PWA
Was, wann, wie und warum
Electron
Slide 27
Slide 27 text
Intro
Progressive
Web Apps
Electron Capacitor Summary
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 28
Slide 28 text
– Provided by Ionic
– Native projects are source
assets (instead of build
assets)
– Backwards-compatible with
Cordova (and many of its
plug-ins)
Electron, Capacitor, PWA
Was, wann, wie und warum
Capacitor
Slide 29
Slide 29 text
Electron, Capacitor, PWA
Was, wann, wie und warum
https://appfigures.com/top-sdks/development/all
Slide 30
Slide 30 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Cordova Architecture
Cordova Application
Single-Page Application
HTML JS CSS Assets
Cordova Plugins
Geolocation
Notifications
Media
Camera
Custom Plugins
HTML Rendering Engine (WebView)
Cordova Native APIs
Cordova APIs
HTML APIs
Mobile OS
Android iOS Windows 10 UWP and more…
OS APIs
OS APIs
Slide 31
Slide 31 text
Advantages
- Supports app development for iOS, Android
- Access to all native APIs
- Official App Store deployments
Electron, Capacitor, PWA
Was, wann, wie und warum
Capacitor
Slide 32
Slide 32 text
Disadvantages
- Plug-ins are often outdated
- App store membership required
- Dependent on guidelines and goodwill of platform provider
- App/update validation can take several hours or days
Electron, Capacitor, PWA
Was, wann, wie und warum
Capacitor
Slide 33
Slide 33 text
Electron, Capacitor, PWA
Was, wann, wie und warum
https://www.heise.de/news/Epic-Games-CEO-wirft-Apple-Monopolpraktiken-vor-6035278.html (04.05.2021)
Slide 34
Slide 34 text
Intro
Progressive
Web Apps
Electron Capacitor Summary
Electron, Capacitor, PWA
Was, wann, wie und warum
Slide 35
Slide 35 text
Electron, Capacitor, PWA
Was, wann, wie und warum
Target Platforms
PROGRESSIVE WEB APPS
CAPACITOR
ELECTRON
+ cars, smart fridges, …
Slide 36
Slide 36 text
- Developers should aim for Progressive Web Apps
- If required, web apps can be (additionally) wrapped in a Capacitor or
Electron container à your web app investment always pays off!
- Consider Capacitor and Electron as “uber-polyfills” that might
become increasingly irrelevant in the future
- Feature-detect modern web APIs and use them, fall back to
Electron/Capacitor APIs or alternatives if unavailable
- Report your use cases and missing web capabilities to browser
vendors
Electron, Capacitor, PWA
Was, wann, wie und warum
Recap
Slide 37
Slide 37 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]
PWA/Electron/Cordova
Cheat Sheet