How to Choose a Progressive Web App Framework
As mobile phones have gained a strong foothold in the lives of millions, more and more people are discovering the convenience of surfing the web without being anchored to a PC. According to Statista, the worldwide rate of mobile internet usage has been growing steadily over the last five years, reaching a 63% share of the total internet usage last year.
This tendency has raised the bar of what users expect from websites, which includes lightning-speed loading and frictionless browsing on their devices, whatever their brand, size or capacities. While a mobile application may be a viable option for global ecommerce brands, other rank-and-file businesses are left to figure out the solution.
And the solution there is. Progressive web applications, recently emerged within the area of web app development, fit the bill for users who demand responsive native experience without having to install an app and website owners who strive to win visitors without spending a fortune.
Progressive Web Applications: A Refresher
What’s a PWA?
The term progressive web application (PWA) describes web applications that are ‘enhanced’ with certain features to deliver a native app-like experience.
PWAs make it possible to install websites as apps to a mobile device’s home screen and app drawer. The technology also provides for fast loading, offline accessibility, push notifications, background updates, access to the device camera, microphone, storage, and so on.
What Are the Pros and Cons of PWAs?
- Driving engagement and conversions. Compared to regular websites, PWAs show higher engagement and conversion rates thanks to their app-like appearance, behavior and UX.
- Media giants’ buy-in. PWAs are used by Instagram, Twitter, Microsoft Office, Uber, Forbes, Alibaba, New York Times, Pinterest, and other leading companies as their sole or additional applications for a variety of platforms.
- Endorsement by major platforms. Google and Microsoft have embraced PWAs for Android and Windows and promote it actively. Google provides various development tools, frameworks, and the perpetually growing list of Chrome-compliant enhancements, as well as fully accepts PWAs in the Google Play store. From Microsoft’s side, the support is shown through welcoming PWAs to Microsoft Store, as well as through automatic search, evaluation, and addition of high-quality progressive apps to the marketplace.
- Technical advantages. Compared to native mobile and desktop apps, PWAs are lightweight and can be quickly installed, loaded (especially after initial loading), and updated through Google Play, App Store, and Microsoft Store or directly from browsers, bypassing marketplaces altogether. Apart from this, PWAs are adaptive and responsive, and, thanks to the HTTPS protocol requirement, are secure from the get-go.
The major point against progressive web apps is that Apple isn’t keen on allowing PWAs on iPhones despite the seemingly complete macOS support. Though recognized as viable options for iPhone app development ever since the release of iOS 11 in 2017, PWAs are still limited in certain ways:
- On iOS, every web app is based on Safari, yet Safari itself can’t support all that PWAs have to offer. For example, there’s still no notification support for PWAs in the background mode. Also, Safari only allows storing up to 50Mb in the device memory. Thus, a PWA would be unfit for a media streaming iOS app or any other app considerably dependent on offline storage.
- The App Store guidelines recommend delivering dynamic apps in Safari instead of publishing them to the App Store. Since the marketplace routinely undergoes massive “purges,” removing non-compliant apps, putting your PWA there might be a risky venture.
- iOS does not allow installing native apps that can’t be found in the official App Store. This is how the vast majority of iPhone users won’t even realize there’s an option of installing progressive apps from the browser, and those who do won’t be willing to put extra effort into installing them.
Top Progressive Web App Frameworks and Tools in 2020
Popularity, documentation, backing, performance, and specifics of the development process—all of this plays a part in considering which frameworks and tools are best for PWA development. Employing a well-suited framework should accelerate rendering and development, while the bloated size of some frameworks and libraries can be detrimental to the project pace.
Below, we surveyed the most notable PWA frameworks and tools and emphasized the benefits and drawbacks of each.
React PWA Library
React has excellent backing, documentation, a vast online community, and several high-profile projects under its belt, including Facebook, Instagram, WhatsApp, and Twitter Light. Closely related to React Native (also backed by Facebook), React is a part of the tandem of frameworks used to provide seamless multi-device and cross-platform user experience, be it with web, progressive or near-native apps.
Angular PWA Framework
Released in 2017, Angular 5 was the first version to support PWA with the dedicated Angular Service Worker script, provided by the @angular/service-worker module. The script allows creating a PWA via JSON configuration instead of building the application from scratch.
Angular used to be notorious for its inability to sustain complex dynamic applications, yet this fault was corrected in the latest versions. As of today, applications created with Angular are not inferior to apps built with other leading frameworks in terms of performance.
What’s more, Angular is renowned for its considerable community of developers and ongoing maintenance by Google. On the downside, the framework is tangibly more complicated than its rivals and requires high expertise to work with.
Ionic PWA Framework
Ionic has a very flexible tech stack and allows for utilizing competing frameworks (React, Angular, or Vue) to build applications. Due to this, developers with other skills can effortlessly build an Ionic app. The framework also offers a library of over 250 pre-built plugins for adding native device functionality to the solutions.
Ionic comes in two editions: Community and Enterprise. The editions share core functionality, but the former is aimed at independent developers, while the latter has the corporate app development focus. Thus, the Enterprise edition comes with the advisory and support services from Ionic experts in such matters as team training, version migration, and maintenance.
The framework offers a rich PWA toolkit that includes pre-built routing, UI components, and unit tests, as well as a detailed step-by-step guide on Ionic development when it comes to PWAs.
Ionic app performance is a fly in the ointment, though. Because Ionic renders graphic elements via the browser, in media-heavy apps it can drastically defer the moment a full image shows on the screen.
Svelte PWA Framework
Svelte is a relatively new component-based framework. In many ways similar to Vue and React, it’s also fundamentally different, as Svelte’s founding team positions itself as a “truly reactive framework.” Svelte’s originator, Rich Harris, created it in response to the shortcomings of React, namely the “verboseness” of its code and how the tracking of changes and states adds overhead, increases the bundle size, and exhausts the project budget.
Tags: behavior and UX, UI components, unit tests