Skip to main content

Posts

Showing posts with the label cordova

Ionic 4 HTTP CORS Issue

Ionic 4 is a major upgrade to previous version of Ionic . One of the primary differences between Ionic 4 and its previous incarnations is that Ionic 4 uses web components , which are custom HTML elements written using web standards (as opposed to using a slap-on framework such as Angular). Ionic 4 also makes a fundamental change in how the created app is rendered (I use rendered as apps are essentially HTML which is rendered using the native WebView control of the device's UI framework) in a device. While earlier versions used to refer to the top level index.html using file:// URI scheme, Ionic 4 internally spins up an HTTP server on localhost (yes for each app) and then loads the index.html through a standard HTTP request such as http://localhost:port/index.html. Problem I'm not sure what necessitated this change, but I reckon it probably had something to do with native API restrictions, which in turn was prompted by need for improved security. This, however, introduc...

Downloading & opening a file in an Ionic app

If you search the Internet for examples to achieve the above, you'll get a number of resources that suggest using the cordova-file-transfer plugin. However, with Ionic 3+ and its native API, you can do this directly using a mix of Angular and Ionic  File API. Essentially, you need to use Angular HttpClient to download a URL as a Blob using the responseType option and then save the resultant Blob to a file on the device using the File API. Finally, open the saved file using the Ionic native FileOpener API. Here's the method in a provider that is used to download files from a website. Note that  this.http is an instance of HttpClient . /** * Download a file from the given url. * * Params: * url - the URL to download the file from * Returns: * A promise which upon resolution returns a dictionary * { * fileEntry: FileEntry, * type: The content-type string for the file * } */ download(url): Promise<{ fileEntry: F...

Cordova build errors

Had this unusual errors crop up when building a cordova app for android. This started appearing after I installed cordova-plugin-file-opener2. ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:fontVariationSettings ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:ttcIndex Going through platforms/android/project.properties file, I realized that there was something quite odd about it. cordova.system.library.1=com.android.support:support-v13:26.+ cordova.system.library.2=me.leolin:ShortcutBadger:1.1.17@aar cordova.system.library.3=com.google.firebase:firebase-messaging:11.0.1 cordova.system.library.4=com.android.support:support-v4:27.1.0 cordova.system.library.5=com.android.support:support-v4:24.1.1+ cordova.system.library.6=com.android.support:support-v4:+ There were multiple versions of the same library being defined. I removed the last three lines -- library.4, library.5 & library.6, ensuring that t...

Token Based Authentication in a Cordova App

Any web based service that provides a mobile client requires some form of authentication before the user can access their permitted resources. The simplest approach is to require the user to enter their username and password for every session (or after the session expires). Simple to implement, but not the most friendly approach. User’s are notorious for forgetting their login credentials more so now than ever as more and more services require login ids and their own passwords. A better approach is to use token based authentication whereby user is issued a signed token that they can then use to access their data from the online service. This introduces its own security challenges but this can be mitigated quite nicely with proper server side measures such as serving your entire site in HTTPS only. Of course, token based approach requires that your back-end implements an API that is suitably protected and accessible only through authenticated clients. But that’s a given and I’m not ...