Ionic

7 Notes
+ Ionic Capacitor vs Apache Cordova (Nov. 1, 2019, 9:45 p.m.)

Ionic Capacitor is an open-source framework innovation to help you build Progressive Native Web, Mobile, and Desktop apps. On the other side Apache Cordova formerly PhoneGap does the same for accessing native features of the device from mobile WebView. ---------------------------------------------------------------- Using Cordova to build a mobile hybrid native app, you use Cordova plugin libraries, which behind the scene builds your app using Android SDK or iOS within the Cordova framework (cordova.js/phonegap.js). With Ionic Capacitor, you create the app, without using any Cordova imports, not even cordova.js, instead Capacitor’s own native plugin repository imported as @capacitor/core. Capacitor can also be used without the Ionic framework and it’s backward compatible with Cordova. ---------------------------------------------------------------- In spirit, Capacitor and Cordova are very similar. Both manage a Web View and provide a structured way of exposing native functionality to your web code. Both provide common core plugins out of the box for accessing services like Camera and the Filesystem. In fact, one of the design goals with Capacitor is to support Cordova plugins out of the box! While Capacitor doesn’t support every plugin (some are simply incompatible), it generally supports most plugins from the Cordova ecosystem. ---------------------------------------------------------------- Capacitor generally expects you to commit your native app project (Xcode, Android Studio, etc.) as a source artifact. This means it’s easy to add custom native code (for example, to integrate an SDK that requires modifying AppDelegate on iOS), build “plugins” to expose native functionality to your web app without having to actually build a standalone plugin, and also debug and manage your app in the way that embraces the best tooling for that platform. ---------------------------------------------------------------- No more deviceready! Capacitor kills the deviceready event by loading all plugin JavaScript before your page loads, making every API available immediately. Also unlike Cordova, plugin methods are exposed directly as opposed to being called through an exec() function. That means no more wondering why your app isn’t working and why deviceready hasn’t fired. ---------------------------------------------------------------- Embracing NPM & Easier Plugin Development Capacitor embraces NPM for every dependency in your project, including plugins and platforms. That means you never capacitor install plugin-x, you just npm install plugin-x and then when you sync your project Capacitor will detect and automatically link in any plugins you’ve installed. ---------------------------------------------------------------- First-class Electron and PWA support Capacitor embraces Electron for desktop functionality, along with adding first-class support for web apps and Progressive Web Apps. ----------------------------------------------------------------

+ Storage (Oct. 27, 2019, 6:13 p.m.)

Installation: ionic cordova plugin add cordova-plugin-nativestorage npm install @ionic-native/native-storage -------------------------------------------------------------------- Usage: import { NativeStorage } from '@ionic-native/native-storage/ngx'; constructor(private nativeStorage: NativeStorage) { } this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'}) .then( () => console.log('Stored item!'), error => console.error('Error storing item', error) ); this.nativeStorage.getItem('myitem') .then( data => console.log(data), error => console.error(error) ); --------------------------------------------------------------------

+ Capacitor - Installation (Oct. 15, 2019, 8:46 p.m.)

To add Capacitor to your web app, run the following commands: npm install --save @capacitor/cli @capacitor/core Then, initialize Capacitor with your app information. npx cap init tiptong ir.tiptong.www Next, install any of the desired native platforms: npx cap add android npx cap add ios npx cap add electron

+ Capacitor - Description (Oct. 15, 2019, 8:44 p.m.)

Capacitor is an open-source native container (similar to Cordova) built by the Ionic team that you can use to build web/mobile apps that run on iOS, Android, Electron (Desktop), and as Progressive Web Apps with the same code base. It allows you to access the full native SDK on each platform, and easily deploy to App Stores or create a PWA version of your application. Capacitor can be used with Ionic or any preferred frontend framework and can be extended with plugins. It has a rich set of official plugins and you can also use it with Cordova plugins. --------------------------------------------------------------------- The Capacitor is a Native layer for Cross-platform Web Application development, which makes it possible to use hardware features like Geolocation, Camera, Vibrations, Network, Storage, Filesystem and many more. The catch is there no need to install any plugin to use such Native feature like we used to do by installing Cordova Plugin. ---------------------------------------------------------------------

+ PWA (Oct. 15, 2019, 8:24 p.m.)

Start an app: npx create-stencil tiptong-pwa

+ CLI Commands (June 28, 2019, 9:54 p.m.)

Generate a new project: ionic start ionic start myApp tabs ionic serve npm uninstall @ionic-native/splash-screen ng add @angular/pwa ionic build --prod ionic generate module auth ionic generate module auth --flat ionic g m auth --flat List installed plugins: cordova plugins cordova plugin ls

+ Installation (June 27, 2019, 10:41 p.m.)

1- Install the latest version of Node.js and npm 2- sudo npm install -g ionic