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.

A Primer on CSS 4 Variables for Ionic 4

A Primer on CSS 4 Variables for Ionic 4

Apparently, good things come in 4’s (sorry, that was the best I could do). Another significant addition to Ionic 4 is going to be support for CSS4 variables, which will now play the primary role in Ionic’s theming approach. In this article, we are going to take a brief look at what CSS4 variables are and how we will be using them in Ionic applications. In previous versions of Ionic, the theming and styling of Ionic relied mostly on using SASS , where we would define files… continue reading.

Adding Icons & Splash Screens (Launch Images) to Capacitor Projects

Adding Icons & Splash Screens (Launch Images) to Capacitor Projects

Generating icons and splash screen images ends up being a much more difficult task than you might anticipate before doing it for the first time. The difficulty stems from the fact that there are a bunch of different devices that your application could be running on, a lot of which will have different resolutions/pixel density. Both iOS and Android applications have systems in place to pull in images of the correct resolution for the particular device the application is… continue reading.

Faster Boot Times with Lazy Loaded Web Components in Ionic 4

Faster Boot Times with Lazy Loaded Web Components in Ionic 4

In this article, we are going to take a look at a feature introduced in Ionic 4 that will reduce the initial load times of our applications. Before we get into discussing that, though, I want to highlight that when it comes to performance we can’t just rely on the framework. I published an article earlier this week that discusses this. The main point of the article is that improvements to the performance of the framework are not all that important if you haven’t already… continue reading.

Ionic Framework Is Fast (But Your Code Might Not Be)

Ionic Framework Is Fast (But Your Code Might Not Be)

I don’t want this article to come across as a self-righteous rant, or that I’m attacking people who have made statements like the ones I will use as examples in this article. The last thing I want to do is sound elitist or fan the flames of framework wars. So, I will precede this article with a little disclaimer: I’m not making any claims that Ionic is the best framework, or that Ionic is better than native apps, or that you should use Ionic for everything. I’m also not… continue reading.

Deploying Capacitor Applications to Android (Development & Distribution)

Deploying Capacitor Applications to Android (Development & Distribution)

Earlier this week, I released a guide to deploying Capacitor applications to iOS . In this tutorial, we are going to be doing the exact same thing, except we will be deploying an Android application built with Capacitor to Google Play. As was the case for the last tutorial, we are going to do this starting from a completely blank slate to demonstrate how to set up the appropriate environment from scratch. For this tutorial, I created a separate profile on a new computer so… continue reading.

Deploying Capacitor Applications to iOS (Development & Distribution)

Deploying Capacitor Applications to iOS (Development & Distribution)

In this tutorial, we are going to walk through how to use Capacitor to deploy iOS applications. We will be covering how to get a Capacitor application running on an iOS device for development, all the way through to creating a build for distribution on the App Store. We are going to do this starting from a completely blank slate to demonstrate how to set up the appropriate environment from scratch. For this tutorial, I created a separate profile on a new computer so that… continue reading.

Creating a Tabs Layout with Angular Routing and Ionic 4

Creating a Tabs Layout with Angular Routing and Ionic 4

Recently, I published a tutorial that talked through how to use Angular routing in an Ionic/Angular application when Ionic 4.x is released. Although using Angular style routing is not required if you want to upgrade to Ionic 4, there are a lot of benefits to doing so (and some features that were available with standard Ionic navigation in Ionic 3.x will only be available through Angular routing with Ionic 4.x). We discussed the basics of routing, and I also published… continue reading.

Using Cordova Plugins that Require Install Variables with Capacitor

Using Cordova Plugins that Require Install Variables with Capacitor

Since Cordova is such a hugely popular framework with a massive ecosystem of plugins to access various native functionality, Capacitor is aiming to have backward compatibility with existing Cordova plugins. This means that if you are using Capacitor, you should be able to use any existing Cordova plugin with it. All you need to do is: and Once you have done this, you can just use the plugin as you would in any normal Cordova project (you can also still use Ionic Native if… continue reading.

Prevent Access to Pages in Ionic with Angular Route Guards

Prevent Access to Pages in Ionic with Angular Route Guards

In a previous tutorial, I covered how we would implement Angular routing in an Ionic 4.x application . When Ionic 4 is released, there will be more of a focus on using the baked in Angular routing, rather than Ionic’s own push/pop style routing (this style of navigation will still be available, though). In this tutorial, we are going to cover how to use route guards with Angular routing to prevent access to certain routes if certain conditions have not been met. A common… continue reading.

Using the Capacitor Filesystem API to Store Photos

Using the Capacitor Filesystem API to Store Photos

When we take a photo on an iOS device, the resulting file is stored inside of a temporary folder called . If we use the Camera API to retrieve a photo, the resulting URI will look like this: If we are interested in long-term storage then this isn’t the best solution. The way you approach this will depend on what it is your application is trying to achieve. You might want to send this photo to a server, or maybe you want to store the data that is returned, in which case it… continue reading.

Implementing a Master Detail Pattern in Ionic 4 with Angular Routing

Implementing a Master Detail Pattern in Ionic 4 with Angular Routing

Earlier this week, I published an article that discussed how and why you should use Angular routing with Ionic 4.x . To summarise, the main points from that article were that: Angular routing primarily relies on defining a bunch of routes that link to specific components/pages, and then using the current URL to determine which route should be activated Push/pop navigation will still be available for those who want to use it There are big benefits to switching to using… continue reading.