I recently had the opportunity to author several new whitepapers for the folks at Ionic. They cover some very familiar topics for me. Enjoy!
What is Apache Cordova?
What is Cross-Platform App Development?
What is a UI Component Library?
What is Hybrid App Development?
Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. I just released a lesson on egghead.io will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.
Recently someone asked how to use PhoneGap Build and Ionic together. Being slightly familiar with both, I thought a short post on this would be in order. If you are not familiar with PhoneGap Build, it is a service from Adobe that allows you to compile your PhoneGap apps in the cloud. If you have a Creative Cloud account, you have access to this service. The service is fairly straightforward, take your web app, an associated config.xml file, and the app’s icons & splash screens, zip them up, then upload that file to PhoneGap Build. After a bit of work, you have native iOS and Android apps ready to be installed (providing you have your signing keys in order).
Using PhoneGap Build with Ionic based applications requires a few extra steps. First, we need to generate a production-ready version of our application. Normally, the Ionic build scripts that are run by the Ionic CLI handle this for use. But we are not building locally so this won’t help us. Instead, you need to make that call yourself. The command to generate a production ready app is
$ ionic build --prod –release
The Ionic CLI will run a set of commands generating your app in its production-ready state. This output is located in the www folder.
Now, we need to assemble the rest of the items that PhoneGap Build requires. In new folder, first copy over all the assets within that www folder. Next, copy over the config.xml file. If you are not familiar with this file, this is what PhoneGap/Cordova uses to define most of your app’s properties (icons, splash screens, plugins, etc). Speaking of icons and splash screens, we need to copy over the resources directory as well. In the end, you should have a folder that looks like this:
With all our required elements in place, simply zip this directory and upload it to PhoneGap Build. If you need more help understanding PhoneGap Build, you can check out my Lynda.com course.
Now, alternatively, you can use Ionic’s own Ionic Pro service to do the same thing, with a more integrated workflow.
Hope this helps!
Living in San Diego, we are surrounded by over 140 craft breweries. Once a year, Stone Brewing hosts an annual celebration, where they invite a bunch of their brewery friends to town and showcase their brews. I have been attending for a number of years, and one of the challenges in attending was having to find the beer on Untappd and check-in. So this year I thought I would whip up a quick Progressive Web App (PWA), that would allow me to quickly locate my beer and check in. Here is a link to the working Stone Fest 21 app.
After assembling the data set of the breweries, the beers, their logos (thanks, Untappd!), I generated the actual Ionic application. Since my buddies were on both iOS and Android, I knew the web was my only publishing option. But before I uploaded the code from Ionic to my server, there were some additional steps required to improve the performance of the PWA. Here is a list of the changes I made to project:
By default, my Dreamhost account that I hosted Stone Fest 21 on did not have this enabled. So, I had to create a .htaccess file and enable it on the server.
# BEGIN GZIP
< ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
< /ifmodule>
# END GZIP
Since PWA support on iOS is not on par with Android was to include some Apple specific meta tags in the head of the index.html file:
< meta name="apple-mobile-web-app-capable" content="yes"> < meta name="apple-mobile-web-app-status-bar-style" content="black"> < meta name="apple-mobile-web-app-title" content="Stone Fest 21">
For more on these tags, see the Apple documentation.
Although the manifest.json defines our app icon, not all platform understand this. So as a backup, I add this snippet in the index.html file to assist with that issue:
< link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
< link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
< link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
< link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
< link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
< link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
< link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
< link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
< link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">I used the $ ionic cordova resources command to generate them, then renamed the manually. Since the $ ionic build command will wipe out the www directory, I added them directly to the server.
One of the items that the Lighthouse test measures is “First Meaningful Paint”. For those who don’t know this term, First Meaningful Paint is the time when page’s primary content appeared on the screen. I added inline CSS to the body tag, so that the browser would render something while the app was starting.
< body style="background-color: #1c1b17; background-image: url('assets/imgs/logo.jpg'); background-position: center; background-repeat: no-repeat;">Lighthouse also checks what you do if JavaScript was disabled by the user. Remember, this is a Progressive web app. In my case, there was not a lot you can do without JavaScript, but I included this tag to meet the requirement:
< noscript>
< h1>Stone Fest 21 requires JavaScript< /h1>
< /noscript>When you generate an Ionic application, Cordova plugins are automatically integrated, specifically the Splash Screen and Status Bar plugins. Since we are deploying to the web, we can remove Cordova and these plugins from our project. Using $ npm uninstall @ionic-native/splash-screen and $ npm uninstall @ionic-native/status-bar
Edit the app.module.ts to remove the import statements for these two plugins and remove them from the providers array.
In the app.component.ts file also remove the imports. Also, you will remove the injected imports from the arguments in the constructor, as well as the two references to the plugins in the platform.ready check.
If you generated your Ionic application with Cordova integration, there are other plugins and modules that you should remove as well. If you open your package.json file you will several references to cordova-* items. Go ahead and use npm to uninstall them:
Depending on what platforms you may have installed, you might also have these modules:
Remove them as well.
Finally, we can also remove @ionic-native/core, as we have now scrubbed our Ionic application of any Ionic Native code.
As I checked my Lighthouse score, I noticed that it was flagging how my brewery logos were being called, as well as an accessibility issue around them. To quickly solve this, I adjusted the img tag to reference the full path to the logo and added the alt attribute
< img src="https://aj-software.com/apps/stone/assets/breweries/{{brewery.logo}}" alt="Company Logo">By default, this code block is commented out in the index.html. Uncomment this block of code and you have a nicely configured service worker ready to go.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}The last tweak is updating some of the items in the default manifest.json file.
{
"name": "Stone Fest 21",
"short_name": "Stone Fest",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.jpg",
"sizes": "512x512",
"type": "image/jpg"
}],
"background_color": "#1c1b17",
"theme_color": "#1c1b17",
"orientation": "portrait"
}
After implementing these steps, the Stone Fest 21 app received the following Lighthouse score:
Hopefully, these guidelines can help you create better PWA using Ionic. Until stencil.js is ready, this is about a good as I can make an Ionic-Angular’s performance. I will be porting this application to stencil shortly and will update this post with the results. The source code is available on my GitHub account.
I had the good pleasure of presenting to a full room at the recent SoCal Code Camp on the Ionic Framework. Here are my slides from the talk.
The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.
My Ionic book has just been published by O’Reilly!
Mobile App Development with Ionic 2 Cross-Platform Apps with Ionic, Angular, and Cordova
Learn how to build app store-ready hybrid apps with the Ionic 2/3, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This practical guide shows you how to use Ionic’s tools and services to develop apps with HTML, CSS, and TypeScript, rather than rely on platform-specific solutions found in Android, iOS, and Windows Phone.
The book takes you step-by-step through Ionic’s powerful collection of UI component and then helps you use it to build three cross-platform mobile apps. Whether you’re new to this framework or have been working with Ionic 1, this book is ideal for beginning, intermediate, and advanced web developers.
The digital version is available now, and the print edition will be out soon. Amazon, Barnes & Noble, or O’Reilly.
When you create a new Ionic application, six plugins are automatically installed. This post will take a brief look at them and how they are used within your Ionic app.
A plugin is a bit of add-on code that provides JavaScript interface to native components. They allow your app to use native device capabilities beyond what is available to pure web apps.
If your application is going to run on Android, this plugin is critical if you want to interact with any external resources. The Navigation, Intent and Network Request whitelists are defined within the config.xml file.
This plugin allows you to customize the Android and iOS statusbar. Starting with iOS 7, the webview that would contain our Ionic application would have the statusbar overlaid with the web content. In the default app initialization code, this plugin is called to reset the positioning.
Ionic uses this plugin as part of its platform method. This allows it to resolve the actual device type our application is running on.
To enable better development logging while running on device, this plugin is installed for us. As a reminder, you should remove this plugin before making a production build.
The other plugin used during the app initialization code is the Splashscreen plugin. It is used to hide your splash screen image once the app is ready.
The final pre-installed plugin is the Ionic keyboard plugin. One issue with working with the device’s native keyboard was how the content in the webview responded. This plugin gives you more control in interacting with the keyboard. Notably, the ability to show and hide it programmatically, hide the Accessory Bar and disable scrolling of the content.
As you can see from these brief descriptions, these six plugins provide some of the common interface adjustments almost all Ionic developers would perform on their applications. Now, you should have a better idea of why they are pre-bundled for us.
If you want to learn more about developing Ionic applications, you can get a copy of Mobile App Development with Ionic 2 from your favorite bookseller.
We have released our second paid app, Hiking Guide: Joshua Tree! It is available for both iOS and Android for $0.99. The app contains over 20 hikes in the Joshua Tree National Park. You can find a wide range of hikes; from easy to hard, from short to long, the perfect hike is a few taps away.
The app contains USGS topographic maps that outline each trail’s route, as well as providing descriptions of the trail and directions to the trail head.
We hope you enjoy the app and use it explore the many hikes in Joshua Tree National Park.
I am excited to announce the early access release of my new book, Hybrid Mobile Apps with Ionic 2! For anyone looking to learn about this powerful mobile framework, this book aims to get you up and running. Here is overview:
The book itself provides a solid overview of hybrid mobile development before diving in and walking you through building 3 different applications. In it, I also cover Angular 2, TypeScript and Apache Cordova.
The core of the book focuses on building three applications, each that showcase different aspects of the Ionic Framework; the Ionic CLI, their starter templates, its component library and more.
Now, this is an early release version of the book, meaning there might be an error or two. Plus, Ionic 2 is not quite done yet, so something might break. I will keep a careful eye on its progress and flag anything that might arise. In the meantime, I will be pushing forward on the rest of the book as its technical dependencies allow.
You can pick up your digital copy from O’Reilly’s website now! I hope you enjoy reading it.
PhoneGap and its open-source sister Apache Cordova simplify cross-platform app development. You can code an app once, and then compile it to run anywhere: iOS, Android, or Windows Phone. PhoneGap Build is the cloud-based version, which allows you to take apps built with HTML, CSS, and JavaScript and compile them into native, store-ready mobile apps. All without any SDKs.
In this course, Chris Griffith introduces the PhoneGap ecosystem and the basics of PhoneGap Build. He shows how to set up an account for development and create, configure, and compile your first project with PhoneGap Build. Once you’ve mastered these fundamentals, Chris shows how to extend your app plugins, debug your app, and then prep it for release in the App Store, Google Play store, or Windows Store.
Duration: 1 hr, 24 minutes
Prototype A 
You must be logged in to post a comment.