Getting ready to kick off your next mobile application project and not sure whether to build a native mobile app or a Progressive Web App? This guide is for you!
At Ionic, we are fans of both traditional mobile apps (the kind you download from the app stores and install on your device) and Progressive Web Apps (PWAs). And, we have the tools you need to build either, or both, types of apps. To help you decide which is better for your next project, we’re going to take a practical look at some of the top considerations for each one. We’ll break it down into four categories: Device reach, app-like look and feel, device integrations, and distribution. Let’s dive in!
The first factor you want to think about when considering a PWA is device reach. Some important questions might be: What devices does your app need to run on? Is it meant for the mobile user, the desktop user, or both? Do the web browsers you’re targeting provide support for PWAs?
Since the theme of this post is mobile development, it’s safe to say you’re likely thinking of targeting mobile devices, which, today, mainly means iOS and Android. But do you also need to reach users who are on their desktop computers as well? With user preferences evolving to expect a company’s digital experiences to be available on any and all devices—Chances are, you do.
If you were to go native, it could mean that up to three apps need to be built, each with their own codebase.
Alternatively, PWAs are built with web technology and the web has the furthest reach of any other platform, running just about everywhere. Meaning, with a PWA, an app can be built once with the same codebase and is able to reach all your target devices.
However, there are still a few more questions to consider when thinking about PWAs and device reach, such as browser support. Do the web browsers you need to support run PWAs? Most browsers today support the majority of PWA features, but what if we have a browser that does not?
And, even if a browser isn’t supported, is it okay if a user has a downgraded experience in case a particular feature is not available to them? Additionally, is it important that all users have the same experience, or is it better to provide an optimal experience to those users who have the latest supported browsers, but still provide a graceful fallback to those that do not?
If you opt for a PWA, using progressive enhancement techniques can help provide optimal experiences for all users.
However, if a particular device feature, or the exact same UX, is something that’s required to be successful, but not all user browsers support it yet, then building a native app might be the way to go.
Usually, when people say “app-like,” it often comes down to the following qualities:
- Native look-and-feel: Does your app look and behave like it should on the device it is being used? Can users easily navigate on the app, with natural movements, to find what they are looking for?
- Speed & Performance: Does your app load quickly and feel responsive when a user interacts with it? Does it launch quickly?
- Offline Support: Does your app still have a useable experience (even if limited) when there is little to no network connection?
- Installable: Can users launch your app from an icon on their home screen?
- Native Functionality: Can your app do things often found in native apps, like receive push notifications or access device hardware like the camera and sensors?
Just a few years ago, a mobile website was not a viable option as a replacement for native mobile apps. A mobile site just didn’t “feel right” running inside a browser, even if it did mimic the UI of a native device.
Progressive Web Apps, however, fix the shortcomings of mobile websites by addressing all of the above app-like concerns. Additionally, a mobile UI framework, like Ionic, can give a mobile app the look and feel it needs, while recent web standards give PWAs the offline support and device integrations necessary to make it feel like an app. Once installed, users will probably never notice (or care), if the app is a PWA or downloaded from a store.
Next among considerations between choosing a native app or PWA is what type of device integration your app needs.
Devices are equipped with various sensors and capabilities that native apps, naturally, have full access to. However, this doesn’t necessarily mean you need a native app to access these features. However, what does matter is which device features are important to your app, and what level of control is needed when working with these features.
Fortunately, the web platform provides web-based APIs to access many of these features. There are APIs to access device hardware like cameras, GPS, accelerometers, biometric sensors, and more.
Despite this, the web APIs available might not provide the specific access you need, or a particular feature may not be available, yet, in all browsers. If this is the case, it might be a legitimate reason to choose a native app over a PWA.
When it comes to device integration, you must evaluate what type of accessibility and functionality is needed before choosing which approach is best. For a majority of apps, PWAs will be a good option, but for those that just need access to certain features, then going native will be required.
The web platform is constantly improving, though, and more device APIs are popping up all the time, so it is likely that something that is not currently available might be coming soon.
The last question to consider when choosing a development approach for a mobile app is: How will the app be distributed and published?
PWAs enjoy the same distribution story as normal websites. Once pushed to a server, PWAs are available to everyone. Here are some advantages of PWA distribution:
- Updates are quick with no need to go through app store approval processes
- The content of a PWA can still be indexed by search engines, meaning an app is still searchable and linkable
- If you are building apps for an enterprise, and it is internal only, then distributing the app as a PWA might be a lot simpler than going through an enterprise app store
There are still some benefits to the traditional app store model. Here are a few:
- Apps in the store can be more easily monetized (though that money is split with the store in hefty chunks)
- The app stores can promote your app. And, apps lucky enough to be featured can have a huge boon to their downloads
- The app stores provide metrics and error reporting for apps, automatically
- The app stores provide the bandwidth and infrastructure for your app downloads
- Native apps get full hardware API access (as discussed above)
There might be some good reasons to put your app in the app stores. However, this doesn’t necessarily mean a PWA still is not a good choice, as a relatively new trend is starting where a few stores are accepting submissions from PWAs!
For example, Microsoft has let developers submit PWAs to its store for some time now. Some advantages gained using this method are discoverability in the store, monetization through the store (like in-app purchases), and access to device hardware APIs. The best part is, PWAs are still distributed as a normal website, and the store basically just links to the PWA’s site, so you still enjoy the same distribution benefits as a normal PWA.
APIs have surfaced in the latest Chrome update that shows Google is also preparing for PWAs to be a first-class citizens in its store as well. While there is no official documentation on this (as of when this post was written), expect to hear some more about these exciting developments from us soon.
Why Not Both?
So, after reviewing all these considerations you may have discovered that having a native app in the stores is needed. But, you may also still find PWAs intriguing because they have their own merits and are worth pursuing for a number of reasons. If you feel this way, that’s ok! Because, my next question is: Why not have both a PWA and native app with the same codebase?
This is where Ionic comes in. Traditionally, Ionic has been used to build mobile apps with web technology by utilizing the hybrid capability of Cordova to package those web assets into native packages that you can distribute directly to the app stores. These apps still get native API access (through Cordova plugins), and the additional benefits we mentioned from having an app in the store.
While providing hybrid technology for building native-like mobile apps is still our main focus, we have also put substantial effort into our latest version of the Framework, Ionic 4, to make it the platform of choice for building progressive web apps.
In our latest developer survey, 42 percent of developers stated that the PWAs they are building are companion apps to their native counterparts and that 35 percent are thinking about deploying their Ionic apps to the stores as well. PWAs can be a great way to get to market quickly and then rope users into a deeper native experience.
With Ionic, an app can be built for iOS, Android, and as a PWA, all with one codebase—Saving you time, effort, and cost by giving you three platforms for the price of one. To learn more about PWAs and how to get started, check out our resource page with use cases and best practices for progressive web apps.