After four long months, my latest Pluralsight course, Building Progressive Web Apps with Ionic, is now live and available on the site. This post provides an overview of the course, and also a link that will let you watch it free of charge.
As a software developer, you want your apps to reach as many people as possible, right? But it seems that everyone uses a different platform: Android, iOS, desktop, web. It can be frustrating. Which platform should you target to reach the most users possible? How about all of them! Progressive Web Apps, or PWAs, let you do just that.
Throughout the course, I will show you how to get a new Progressive Web Application off the ground with the Ionic Framework, which will make it easy for us to target the web, iOS, Android, and even desktop apps if you want. By the end of this course, you should have all the know-how and confidence you need to stand up a PWA that all of your potential users can enjoy.
Creating Your First PWA
Starting a new application is never easy, but Ionic makes getting up and running quick and painless. In this module we will put together a brand new application using the Ionic CLI. This application will become the basis of “Notify,” the demo app that we build throughout the course.
Adding Pages and Functionality
No web app is complete without some pages and functionality to go with the UI. In this module, we will add some common Ionic components to the home page to display the emergency call data, and a details page that lets us drill down and see more information.
Hosting Your App
All web apps need to be hosted somewhere, and PWAs are no exception. Now that we have a basic app, we will find a place to host it and see how it scores as a PWA.
Improving PWA Performance
Using a framework makes it easy to get a project off the ground quickly, though it may not always provide the most optimized solution possible. As you will see in this module, the application provided by Ionic’s scaffolding gets us about half way there, which is a very good start. To complete the other half, there are some tools and techniques we can use to help measure and improve the performance of our app.
Service Workers and Offline Mode
One of the key features of Progressive Web Applications is the ability for them to function without a network connection. Service Workers enable that ability and more. In this module we will continue with the service worker that was added for us in the last module, and add some additional functionality.
Installing the App on a Mobile Device
Apple and Google have both added support for installing web apps to the home screen with a native icon, just like the native app’s we’re used to. All you need is a properly configured web manifest file and some special assets, and you are on your way. In this module we will talk about what is required to get a PWA installed the home screen on both iOS and Android devices, and then complete the process with the demo application.
By the end of the course, you will have enough information to go and implement your own PWA and share them with me and the world. There are a few other considerations I want to share with you. Consider it food for thought, and maybe some next steps you can take.
Trusted Web Activities
Did you know that Google is starting to allow PWAs to be packaged for the Play Store? Called a Trusted Web Activity, it is a way to wrap your PWA in an Android app. Granted, if you are using Ionic already, it probably makes more sense to use Cordova and let that do the heavy lifting for you. That said, it is good to know there are options.
Another way to enhance your PWA with native capabilities is to use Capacitor, a cross-platform bridge from the folks who brought us Ionic. If you need native functionality that is not otherwise available, Capacitor can probably get you what you need, with a lower learning curve than Cordova.
AppScope PWA Registry
When you are ready to show off your PWA to the world, you can add it to the growing list of amazing PWAs at Appscope.
As you continue working with PWAs, do not forget to check your app with Lighthouse. If you want more information on using it, visit the lighthouse page at developers.google.com.
Watch Free with a Trial Subscription to Pluralsight
I hope that the information herein piqued your interest enough to want to watch the full course. As promised, this link will allow you watch for free. All you need to do is sign up for a free trial subscription.
If you have any questions or feedback, please follow me and comment on Twitter. I’m @walkingriver.