Building a PWA with Ionic and Angular — step by step
Ionic is a step forward for Progressive Web Apps. It’s clear to us at IonicThemes, that the Ionic Framework team is doing a great job positioning themselves as the Framework of choice to build PWAs. 👏👏
This ionic guide is part of the complete tutorial published in IonicThemes blog where you will learn what are Progressive Web Apps, why you should definitely consider them for your next project, and also how easy is to build a feature complete PWA with Ionic 5.
This post is part of the “Mastering Ionic Framework” series which deep dives into Ionic more advanced stuff. Don’t be afraid, if you are new to Ionic , I strongly recommend you to first read our introduction to ionic 5 previous tutorial.
In this series of posts we have already talked about Web Components, Shadow DOM, CSS 4 Variables, and Stencil. To complete the in-depth analysis of the new Ionic 4, besides talking everything about Progressive Web Apps in this post, we will also be addressing the new Ionic Navigation using Angular Router in our third and final post.
At IonicThemes we are big fans of Learning by example, that’s why all our ionic tutorials include a complete and free ionic code example that you can reuse in your ionic projects. We strive to create the best content for Ionic Framework, both tutorials and templates to help the Ionic community succeed.
We work towards empowering developers to achieve a free life through coding. That’s what motivates us at IonicThemes everyday.
Check out our detailed and professional templates crafted with love and dedication to help you create better apps with Ionic Framework and supercharge your productivity.
All in with Progressive Web Apps
What is a Progressive Web App?
Progressive Web Apps are a synergy of the very best between Web and Native worlds.
PWAs are web applications that load like regular web pages or websites but can offer the user functionalities traditionally available only to native mobile applications such as push notifications, working offline, and device hardware access.
PWAs are useful to users from the very first visit in a browser tab as there’s no need to go to the App Store and install the app.
The initial ‘download’ of a PWA is minimal (a few kb’s with just the assets needed for the basic first interaction with the app) in contrast with native apps where you download the full app upfront (quite some MB of assets).
It’s worth mentioning that PWAs aren’t a new framework or technology. They are a set of best practices to make a web application function similar to a desktop or mobile application. The ideal situation would be to have an experience so seamless and uniform that the user is unable to tell the difference between a Progressive Web App and a native mobile app.
PWAs combine the open standards of the web offered by modern browsers to provide rich mobile experiences.
Instant or Progressive Web Apps are known for loading in record time even if the network is spotty since they use cache strategies. To keep customers engaged, they provide push notifications and have icons on the home screen, while still loading as a top level, full-screen experience.
The advantage of this new approach is that it lowers the cost of customer acquisition, while improving the conversion rates. It’s a great tool for on-boarding new customers, since the discoverability of the web makes them perfect for its advertising and social media communication purposes.
Why do we need Progressive Web Apps?
To understand why we need progressive web apps, let’s first talk about some of the biggest challenges we are facing today with native and responsive web apps:
Internet speed: depending on where you live internet may be a nightmare. You may have not realized this, but 60% of the world’s population is still using 2G internet.
Slow website load: Do you know how long a user waits to close a website if it’s too slow? Only three seconds! 53% of users abandon a website if it loads too slow.
High friction: People don’t want to install native apps. An average user installs 0 applications in a month. Contrast this with how many new web sites they visit each month. Also think about how many apps you downloaded and eventually ended up using just once or very few times?
User engagement: Responsive mobile web sites have much more reach than native apps, however they lack basic functionalities like push notifications and offline support. That causes that most of the users of responsive web sites are not actively engaged compared to native apps engagement levels.
PWAs help solving these problems. Let’s go through the main benefits of using progressive web apps.
Main benefits of using PWAs
Benefits first time seen on a web app:
- Web app install banner prompt
- Launch from user’s home screen
- Full screen browser mode
- Push notifications for web app
CONNECTIVITY INDEPENDENT — Enhanced with service workers to work offline or on low-quality networks.
APP LIKE — Feels like an app to the user with app-style interactions and navigation.
FRESH — Always up-to-date thanks to the service worker update process.
DISCOVERABLE — Due to the web nature of Progressive Web Apps, search engines are able to find them! This is super important for SEO purposes.
Re-ENGANGABLE — Makes re-engagement easy through features like push notifications.
INSTALLABLE — Allows users to “keep” apps they find most useful on their home screen without the hassle of an app store middleman.
LINKABLE — Easily shareable via URLs.
Integrated and Engaging User Experience
PWAs feel and behave like native apps. They sit in a user’s home screen, send push notifications like native apps, and have access to some device functionalities like native apps. The experience feels seamless and integrated. Because we can send notifications to a user, we can really drive the engagement up by keeping the user notified and engaged with the app like we do in native apps.
Cheaper and Improved User Acquisition
The open nature and discoverability of the web compared to app stores translates into a more democratic and organic way of finding content, and this translates to both user reach, user experience friction, and user acquisition costs.
Better Performance, Conversion and Engagement
PWAs provide experiences that are consistently fast. From the moment a user downloads an app to the moment they start interacting with it, everything happens really fast. Because they leverage cache, repeated uses of the app don’t have to hit the network resulting in an even faster experience.
Learn more about the benefits of using PWAs and also see some examples of big brands using progressive web apps and their results in https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4#main-benefits-of-using-pwas
The combination of cheaper user acquisition costs, improved conversions and engagement metrics is a no-brainer. Even more if the user experience is guaranteed to be on par with native apps.
If you want to start creating your Ionic Framework app but don’t know how to start, I suggest your to try Ionic 5 Full Starter App. It’s an ionic 5 app that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.
It includes more than 100 carefully designed views and components. It has full support for PWA with Angular. Try it on your phone as a PWA to see the magic!
Embracing Progressive Web Apps with Ionic
Enough talking about the business side, let’s dive in and see how Ionic Framework is the ideal tech to build our Progressive Web App.
As we mentioned above, for a web app to be considered a PWA, it needs to comply with the following principles. Let’s see how Ionic Framework addresses each of them.
Get your PWA up and running with Ionic Framework
When it comes to the implementation, the new Ionic 4 presents two ways of building apps.
In an effort to attract new developers and become framework agnostic while embracing web components standard, Ionic 4 can be used out of the box without any companion framework. The @ionic/core package contains the Web Components that make up the reusable UI building blocks of Ionic Framework. These components are designed to be used in traditional frontend view libraries/frameworks (such as Stencil, React, Angular, or Vue), or on their own through traditional JavaScript in the browser.
On the other hand, honoring the well known Angular relationship with Ionic from the early days of the framework, Ionic has an option to enhance the development experience and use Ionic in combination with the Angular capabilities you already know and love. The @ionic/angular package comes with Angular specific building blocks on top of @ionic/core components.
When it comes to building a Progressive Web App with Ionic, we can choose either way, but we have to take into consideration some details as we will need extra help to handle some details of the implementation (service workers and web manifest).
The new features in modern browsers that allow PWAs to work are web manifest files and service workers.
The web manifest is a simple JSON file that defines the fundamental parameters of the PWA, icons, app name, colors, screen orientation, etc.
Service workers, are the real key to the enhanced experiences that a PWA can offer. Acting essentially as a proxy between the user and the network, they are little javascript helpers that do the cool things that allow PWAs to work, such as caching data (and deciding when and how to use the cached info — for example to overcome a bad network connection), event triggers, taking care of push notifications, organizing updates and so on.
Framework agnostic PWA
Ionic has a PWA Toolkit that has everything you need to build progressive web apps without the dependency on a frontend framework such as Angular, React or Vue.
However under the hood it uses Stencil for compiling and building the app, Workbox to enforce best practices and easing the boilerplate needed when working with service workers and cache strategies (both crucial to build PWA’s), and Ionic Core for routing and all the reusable UI components Ionic is known for.
To be honest I haven’t looked in detail this approach. Although it has a solid foundation and looks promising, with new libraries or frameworks I tend to wait a little bit until they get more mature and stable. Besides that, I really like building Angular apps, so I might be a little bit biased.
Enhancing your PWA with Angular
If we choose this path, besides Ionic and Angular (@ionic/angular package) we will also need the @angular/pwa package to setup and ease the configuration of the service worker and web manifest in our project.
For more information, follow this link on adding service workers to your Angular app.
I have to admit that I feel more comfortable with this approach as Angular provides a solid, future proof framework to build apps. On top of that, adding Ionic with all the cool features it comes ends up in a winner combination.
In conclusion, the framework agnostic approach using the Ionic PWA Toolkit (that comes with Stencil, Workbox and Ionic Core) is really just a starting point for building an app. While following the Angular enhancement approach (which includes the @angular/pwa package) is ideal to add PWA features to an already existing @ionic/angular app.
Note: It’s worth mentioning that you can’t combine the PWA Toolkit with the @ionic/angular package. They use a different set of underlying libraries and are not intended to be used together. You either go with the @ionic/angular + @angular/pwa approach or with the PWA Toolkit (@ionic/core + Stencil + Workbox) approach.
Ionic is a great choice to build a PWA
Embracing the flexibility Ionic provides, either way will get you cover to build a progressive web app.
As I mentioned above, most of the principles that constitute a PWA are already baked into Ionic (Responsive, App-like, Discoverable, Linkable).
The others (Connectivity independent, Fresh, Re-engageable, Installable) relate to service workers and web manifest specification. These are handled both by Workbox or @angular/pwa.
The Progressive principle is intrinsic and refers to the ability to adapt to the features list available in the platform the app is running. For example if you run a PWA in Chrome on iOS, service workers are not available but that doesn’t prevent the PWA from working.
The remaining Safe PWA principle rely on your hosting provider respectively.
Today most browsers do support service workers and the use of HTTPS is well spread.
Probably, the not so well known, and thus more difficult to grasp, are the principles related to service workers and web manifest. Luckily both Workbox and @angular/pwa packages can ease the process of implementing and configuring some of their most hidden details. If you want to learn more about this, follow this awesome guide on service workers configuration using the @angular/pwa package.
Things that need to be polished
Although Ionic has all the PWA principles covered, if you want to go the extra mile regarding user experience and perceived performance you may find some blocks on the road.
There are two issues that I stumbled upon when playing around with @ionic/angular.
One of the issues is regarding server side rendering using Angular Universal in an @ionic/angular app.
And the other issue is about having lazy loadable routes working with the <ion-router-outlet> which at its core uses the Angular <router-outlet>. This issue only happens when you try to lazy load modules under named outlets (for example if you have an app with tabs navigation).
Both issues (server side rendering issue, lazy loading issue) are being handled by the Ionic team and hopefully they get fixed while Ionic 4 becomes more stable towards the release candidate.
Let’s build a Progressive Web App with Ionic
For this example app I will focus on showing you how easy is to go from 0 to 100 in terms of Progressive Web App principles checklist using Ionic Framework.
After we achieve that we will be adding more complex functionalities like push notifications and finally adjusting a little bit the styles to make the ionic app look great.
Go to the original article to see all the steps to build a complete PWA with Ionic 4 and Angular. You can also download for free all the source code that we will use to build our PWA.
As I mentioned before, we do believe PWAs are the future (or should I say the present?). Stay tuned as I will be updating this post as new features become available and more Ionic tutorials so subscribe to our newsletter to keep learning Ionic Framework!
Originally published at ionicthemes.com.
