Capacitor Workflow in an Ionic Application

Capacitor Workflow in an Ionic Application

Capacitor was built as an alternative to Cordova, and although much is similar in terms of its methodology, the workflow and commands you will use in a Capacitor application will look quite different to Cordova. In this tutorial, we start out with a simple Ionic application and walk through how to integrate Capacitor and how to use the basic commands. Although the video is specifically about Ionic, you do not need to use Ionic in order to use Capacitor. If you are using… continue reading.

Dealing with CORS (Cross-Origin Resource Sharing) in Ionic Applications

Dealing with CORS (Cross-Origin Resource Sharing) in Ionic Applications

Almost everybody who is developing Ionic applications will at some point or another run into a fun little error that looks something like this: The error you see here is the result of the browser’s implementation of CORS (Cross-Origin Resource Sharing). This is an exceedingly common error, but it is also something that is also widely misunderstood. This is an issue I’ve seen popping up on forums more and more frequently lately (likely due to people upgrading from UIWebView… continue reading.

Navigation Basics & Passing Data Between Pages in Ionic & Angular

Navigation Basics & Passing Data Between Pages in Ionic & Angular

With the introduction of Ionic 4, we have seen a shift in responsibility for navigation from Ionic itself to whatever the underlying framework being used is. That means that if we are using Angular to build an Ionic application, then we should rely on Angular’s own concepts for navigation (even though it is still technically possible to use Ionic’s own component). In this video tutorial, we will cover the basic concepts for navigation when building an Ionic/Angular… continue reading.

Production/Development Environment Variables in Ionic & Angular

Production/Development Environment Variables in Ionic & Angular

Often, our production environments are quite different to our development environments. Whilst your application is in development you might just want to make requests to a database running locally on your machine. When you are deploying the application to production you would want the requests to be made to the production database that lives on a remote server somewhere. Perhaps you have a set of public API keys that you want to use in a development environment and a… continue reading.

Styling a Shadow DOM in Ionic 4

Styling a Shadow DOM in Ionic 4

Since the release of Ionic 4, many of Ionic’s components now make use of a Shadow DOM. I’ve written about what exactly this means in another article , but the basic idea is that a Shadow DOM provides a component with its own isolated world to operate it – free from interference from the parent document. The parent document will not be able to override styles of the component, and styles from the component will not leak out into the parent document. This isolation between… continue reading.

Anatomy of an Ionic 4 Project

Anatomy of an Ionic 4 Project

A long time ago I recorded a video that covered the “anatomy” of an Ionic project, and now I have recorded a video in the same style to cover the anatomy of an Ionic 4 and Angular project. An intimidating number of files and folders are generated when you create a new Ionic project – all the files and folders play some kind of role, but there isn’t that many that you need to actively be concerned about (most of the time). The goal of this video is to explore the project… continue reading.

Shadow DOM Usage in Ionic Web Components

Shadow DOM Usage in Ionic Web Components

Beginning with Ionic 4, all of Ionic’s components will be web components . Unlike previous iterations of the framework where the components were built using Angular, the move to web components means Ionic can now be used just about anywhere . One aspect of web components is the ability to define custom HTML elements, which basically means that the Ionic team can create their own element that the browser will recognise and support as a web component. Another aspect of web… continue reading.

Creating Custom Form Input Components with Ionic & Angular

Creating Custom Form Input Components with Ionic & Angular

A while ago I wrote a tutorial on building a custom input component for an Ionic application. It used an HTML5 and a gesture listener to create a rating/satisfaction input component that looks like this: It was just a bit of a silly/fun component to serve as an example for learning about custom components, using gesture listeners, and interacting with a canvas in an Ionic application. Something like this could legitimately be used as part of a form, or some other custom… continue reading.

Creating a Custom Scroll Vanish Directive with Ionic Web Components

Creating a Custom Scroll Vanish Directive with Ionic Web Components

As I was scrolling through Twitter’s PWA (I assume this would be the same in their native application as well), I noticed that when you scroll down on a screen that has a “double toolbar” in the header: The top “toolbar” will animate off of the screen, leaving only the tab bar: This leaves more screen real estate for viewing the content by removing interface elements that are not immediately needed. The top toolbar will then reappear when the user begins to scroll up again. I… continue reading.

The Ionic 4 Migration Survival Guide

The Ionic 4 Migration Survival Guide

The Ionic Framework 4.0.0 Beta is officially available! Make sure to check out the official documentation , but I’ve also got a whole lot of content for you to check out below as well. Although the alpha has technically been available for some time now for those who wanted to jump on board early, the official beta release is when a lot more people will want to start switching over. The beta release comes with official documentation and guidance from the Ionic team, and it… continue reading.

Sending Push Notifications with the Phonegap Push Plugin in Capacitor

Sending Push Notifications with the Phonegap Push Plugin in Capacitor

When it comes to accessing native functionality in Capacitor , we are generally able to use any of the thousands of existing plugins for Cordova. However, whilst most Cordova plugins will work fine without modification in Capacitor, not all of them will. One particularly popular Cordova plugin is Phonegap Plugin Push which allows you to register for and receive push notifications in your application. Unfortunately, this is one particular case of a plugin that will not… continue reading.

Augmented Reality in an Ionic/Angular PWA

Augmented Reality in an Ionic/Angular PWA

Recently, I published a tutorial on using ThreeJS with Ionic to embed virtual reality content into a mobile application using WebVR . This tutorial is going to be somewhat similar, we will still be making use of ThreeJS and WebGL, but we will be creating an augmented reality experience in an Ionic/Angular application. If you are unfamiliar with technologies like WebGL (which uses the GPU of a device to render 3D graphics on the web) and ThreeJS (a framework that makes… continue reading.

Using BehaviorSubject to Handle Asynchronous Loading in Ionic

Using BehaviorSubject to Handle Asynchronous Loading in Ionic

It is common in Ionic applications (and Angular applications more broadly) to create some kind of service to handle loading data from some source. This might be from a local JSON file, local storage, a remote database, or some other kind of data store. The idea is that the service handles any of the complexities required to fetch the data, and from anywhere else in your application you can just make a call to the service to retrieve the data. However you are storing your data… continue reading.

Understanding How Slots are Used in Ionic 4

Understanding How Slots are Used in Ionic 4

As you may know by now, the big change in Ionic 4 is that all of Ionic’s components are becoming web components . Since web components are a feature of browsers, and not of specific frameworks, this will allow Ionic to work with any framework or no framework at all . The basic idea behind Ionic’s components are not changing – you just plop a custom element into your template: and you get a smooth scrolling list formatted for mobile out of the box. Although the changes the… continue reading.

Converting Ionic 3 Push/Pop Navigation to Angular Routing in Ionic 4

Converting Ionic 3 Push/Pop Navigation to Angular Routing in Ionic 4

Most of the changes required for upgrading from Ionic 3 to Ionic 4 are going to be simple find and replace style changes – things like changing to and to . Although it will look slightly different, the code that you are using in Ionic 3 will more or less look the same in Ionic 4. The most significant change, and one that may require a little more thought is the move to Angular routing . The recommended approach moving forward for Ionic/Angular applications will be… continue reading.

Creating a WebVR Experience in an Ionic/Angular Application

Creating a WebVR Experience in an Ionic/Angular Application

I’ve become absolutely fascinated with WebVR recently. The fact that you can access an immersive virtual reality experience powered by a web browser on your mobile phone just blows my mind. I picked up a Google Pixel 2 XL and a Google Daydream headset to experience and develop for WebVR, which provides a nice and comfortable experience, but you can also get started way cheaper by using something like Google Cardboard and a lower end mobile device. In this tutorial, we… continue reading.

Creating a Theme Switcher Service in Ionic Using CSS4 Variables

Creating a Theme Switcher Service in Ionic Using CSS4 Variables

A couple of weeks ago I released an article about how CSS4 variables would be used in Ionic 4 . In that article, I discussed how using CSS4 variables for theming allows you to modify these variables at runtime because unlike SASS variables which need to be compiled, CSS4 variables are supported natively by the browser. This means that you can pull up the debugging window and mess around with the variables to your heart’s content, and it also means you can change the values… continue reading.

Create a PWA with Angular Service Workers in Ionic 4

Create a PWA with Angular Service Workers in Ionic 4

I have written several articles on the topic of Progressive Web Applications (PWA) in Ionic before, including this one which provides a basic overview of the concept of PWAs and how to create one with Ionic. I would recommend reading that article if you need a little more background on what PWAs and service workers are. The method that the tutorial I linked discusses for implementing a service worker to create a PWA in Ionic is no longer available in Ionic 4. Previously… continue reading.

My Method for Upgrading from Ionic 3 to Ionic 4

My Method for Upgrading from Ionic 3 to Ionic 4

For a major version upgrade, the transition from Ionic 3 to Ionic 4 is going to be relatively minor. Most of your code will be able to remain as is, with some minor syntax changes due to the upgrade to Angular 6 and the web component approach in Ionic 4. However, this doesn’t mean that the upgrade process is going to be as quick and simple as updating a few dependencies and tweaking a few things here and there. I’ve been playing around with the Ionic 4 alpha for a while now… continue reading.

Custom SVG Icons in Ionic with Ionicons

Custom SVG Icons in Ionic with Ionicons

Like the rest of Ionic in Ionic 4, Ionicons has recently received the web components treatment. If you’ve used Ionic in the past, then you have likely used Ionicons which provides all of Ionic’s icons. Adding a range of well-designed and platform consistent icons is as simple as dropping the following into your project: Ionicons is built into Ionic, but you can also use Ionicons as a standalone library in non-Ionic projects if you want to. The Ionic team has just released… continue reading.