Progressive Web Apps - Are We There, Yet?
The German "Onlinezugangsgesetz" (online access act) requires the municipal, state and federal governments to offer their services to citizens digitally via portals by the end of 2022. Paired with the increasing usage of mobile phones to access websites and online services, this poses big challenges to IT companies that used to develop solutions for governments.
Recently, we consulted a client on choosing a framework for developing a mobile application. The end-users will use this application to scan receipts to be reimbursed for expenses they've had to buy medication or receive treatment. Our client's client is a branch of a German federal state government which poses some additional challenges in terms of data usage and privacy. The project itself should serve as a prototype for applications covering a much wider range of use cases and users.
By walking through this initial consulting, this article will hopefully explain the terms Progressive Web App (PWA) and Hybrid App, what the differences are and how they compare to native apps, and also whether progressive web apps are finally ready to replace mobile apps.
Overview of Mobile Application Frameworks
Initially, "going native" was the only option to create apps for mobile devices. Native apps are written for one target system (Android, iOS or Windows), using that system's native runtime environment, SDK and libraries. The device platforms differ greatly, though, and writing a separate app for each platform requires specialized developers and is costly. Separate codebase needs to be maintained if you intend to target multiple systems. To some degree, this is offset by the ability to use the most effective tools and libraries available for the respective platform.
A web app is an application that runs in a web browser and is developed using web technologies, meaning HTML5, CSS, and Javascript. These apps can already provide great user experiences and are used to deliver anything from web-shops to spread-sheets. Because the Web offers almost full platform independence, developers soon started looking into ways to write one mobile app and run it on multiple platforms.
A hybrid app is a native application that allows developers to write code using web technologies to some degree. Usually, a framework takes care of the native parts like initialization, user input, device features and lets the developer focus on the application logic written in Javascript.
Let's look at the two most widely spread approaches for building hybrid apps.
Hybrid Web Apps vs. Hybrid Native Apps
A hybrid web app runs a traditional web application in a native UI component called a Web View. This allows web developers to transfer their expertise to mobile app development. Also, these apps can share a large amount of code for all platforms. Access to native device features is managed over an abstraction layer and bindings between Javascript and native code. Ionic is the best-known example of a hybrid web app. It used to be built upon the Apache Cordova project to interface with the device's operating system and to render the web view. Starting with version 4, Ionic switched from Cordova to a newly developed system, called Capacitor.
A hybrid native app creates a bridge between your application's Javascript code and the platform's native code. Through this bridge, your application will, in essence, pass JSON messages to the native code. This can be used to tell the platform to create native UI components or to access the native platform APIs. This model provides application developers with cross-platform APIs to access device features and the opportunity to use familiar technologies while maintaining good performance. The two main contenders in this field are React Native and NativeScript.
Progressive Web Apps (PWA) as a New Alternative
Nowadays, web browsers provide web applications access to a wide array of mobile device features, like offline storage, access to the camera and sensor data and background push notifications. Both Apple and Google have improved support for web applications in their operating systems and now even allow a certain subset of web applications to be added to and launched from the home screen. Google employees coined the term Progressive Web App (PWA) to describe applications that provide native-like experiences to users but can run in a standards-compliant web browser. Progressive Web Apps share the following characteristics:
- provide a Web App Manifest (
manifest.json) which is required to display the app like a real native app and to add it to the home screen. - uses Service Workers to enable offline capabilities. Service workers can provide a cached version of an online resource if the phone happens to be offline while trying to access the resource.
- serve all content over HTTPS
- is responsive and works well on all screen sizes
- loads quickly even on a low-bandwidth network
- can access native device features, like the camera, storage, geo-location, and others through well defined APIs.
Native device features need to be implemented in web browsers and have to become part of the web standards before they can be safely used in production apps.
Evaluating Different Frameworks
The client chose the scope of the minimum viable product (MVP) so that it is small enough but also covers the foreseeable technical challenges.
- Users should be able to create and fill in a new form.
- Receipts or other documents can be scanned by taking a picture.
- They should be able to automatically detect, rotate and crop the document.
- All data is stored on the phone encrypted until the form is uploaded.
- The clerks can send the form back to the user with requests for changes or comments.
- Push notifications will notify users about updates on the status of their request.
We collected these requirements and more into a table and compared how the different frameworks can fulfill them. Below is a compacted version of this table that includes the core set of features and requirements. We also added potential risks and other common criteria that were useful in the decision-making process which are found below the table.
| Requirements | PWA | React Native | Ionic | Native |
|---|---|---|---|---|
| Create and send forms |  |
|
|
|
| Scan and manage documents for a form |  |
|
|
|
| Receive notifications | |
|
|
|
| Encrypt forms on the phone and for uploading | |
|
|
|
| Storage is offline and persistent | |
|
|
|
| The app can be installed from App Stores | |
|
|
|
| The application is accessible | |
|
|
|
| Optional: the Windows Platform is supported | |
 |
|
|
Comments
The document scanner is doable in a PWA, but with very high effort.
The missing support for truly persistent offline storage is a deal-breaker for this type of application. The Chrome and Firefox browsers have experimental support for persistent storage but Safari has not, which excludes iOS devices.
With Trusted Web Apps, PWAs can now be uploaded to the Google Play Store. Support for the iOS App Store is missing, though.
Support for the Windows platform is available in React Native but can not be recommended to be used at this time. Microsoft is currently rewriting the library in C++ for better performance and alignment with the React Native core.
General Criteria
The different framework options were examined for other characteristics that have nothing to do with this specific use case.
Real-World-References
Many companies start using Progressive Web Apps, but a lot of it experimental. React Native is being widely used for production apps and has several heavy-hitters in their showcase. Ionic cannot boast with the same references as React Native but also have a few well-known apps to prove that the framework is production-ready. While the share of hybrid apps is increasing, most apps in the stores are still native apps.
Future Support
While support for PWAs is growing, a lot of uncertainty remains. The standardization committee ensures stable APIs. Facebook themselves use React Native and the other users as well as the community ensure support for the foreseeable future. As far as we can tell, Ionic will keep maintaining their framework for iOS and Android. Android is supposedly going to be replaced by "Fuchsia", which would add another platform to support in the future.
Installation Size
PWAs aren't installed as such. Assets and application code is cached on the phone. This size can vary a lot but is usually rather small. React Native has to include its runtime in the installation package which adds a big chunk to the installation size. Ionic apps have to be shipped with Cordova or Capacitor which adds to the size of the package. Because no boilerplate libraries are needed, native apps can have a very small installation size.
Performance and Battery Usage
Progressive web apps are executed in the browser and therefore generally offer the worst performance. Since the app also starts a browser, memory usage is higher than native apps. React Native executes the Javascript application in a thread. Memory consumption, CPU usage, and power consumption are generally better than Ionic, but worse than native apps. Because the application runs in a web view, memory consumption is higher than with React Native or native apps. Native apps offer the most room for optimization in terms of performance, memory usage and power consumption.
Building & Shipping
The build and deployment process is simplest for PWAs because only an update of the app has to be uploaded to the server. Third-party services, like Visual Studio App Center, provide good tooling for deployment and testing of React Native apps. Ionic provides enterprise support for builds, tests, and deployments in the cloud. Of course, another third party tooling can be used for Ionic apps, too. Native apps can be built and published through the respective IDEs or using third party tooling.
Recommendation and Conclusion
The table and analysis provided us a way to create a recommendation and a good way for our client to make a decision.
For the hybrid alternatives, neither Ionic nor React Native has a big advantage over the other. React Native is only slightly preferable because
- all requirements can be fully implemented,
- the multi-platform implementation will remain economical and maintainable in the future,
- the future with React Native appears to be the most favorable,
- and it offers slight advantages in performance and power consumption compared to Ionic.
An implementation of native apps is not recommended due to the duplicated efforts, especially since in the future the rules of the different applications are to be implemented in the app.
Progressive Web Apps are very attractive due to their portability and ability for web developers to use their expertise in mobile app development. Many features and device capabilities can be used today and support will become better over time. Due to the lack of persistent offline storage, the inability to install them from the app store, and uncertainty about the document scanner feature, a Progressive Web App was not a suitable approach for an application of this type.