How to Choose a Progressive Web App Framework: Top 8 Tools
From AngularJS and React to Ionic and Lighthouse—here’s the list of the best PWA frameworks and tools to build progressive apps with in 2020.
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.
Vue PWA Framework
It’s easy to get started with Vue. It comes with multiple official packages—for server-side rendering, routing and state management—which significantly streamlines the development process. As for progressive web apps, another default package, Vue CLI 3, allows for easily building one.
Moreover, Vue’s community can be acknowledged for its clear and detailed documentation that greatly contributes to the framework’s shallow learning curve.
Since Vue enables fast product delivery, it is oftentimes used to build smaller solutions and MVPs. At the same time, the framework offers capacity for dynamic and complex applications.
However, despite the framework’s overall greatness, there are way fewer Vue developers on the market compared to React or Angular ones. So, if a business wants an app built with Vue specifically, it is likely to encounter a problem finding a development team.
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.
Even though Svelte’s stable version was released only at the end of 2019, it has already gained a solid reputation in the development community and got its prominent early adopters, such as GoDaddy and The New York Times. With the release of Svelte 3, the framework is now announced to be moving into the programming language territory.
Thanks to its compiler nature, Svelte provides faster loading, parsing and execution with a leaner code and a smaller bundle size. It also allows using plain CSS as well as various CSS frameworks. Apart from this, the Svelte starter template includes the PWA package with the basic server worker and boilerplates for meta data social sharing.
However, Svelte has its deficiencies. First of all, the framework is very young, and so is its community. Svelte’s documentation is also less developed compared to the likes of Vue and React. The second downside is relative but considerable for many software engineers: the lack of TypeScript support. Despite the framework itself being written in TypeScript and its developer considering the much-requested TypeScript support a priority, Svelte is yet to get it.
PWA Builder is a Microsoft tool for converting websites into progressive web applications with no or little development work. To jumpstart the project, all one needs to do is to enter the URL in the PWA Builder input line.
The instrument will assess whether the website supports PWA features and build a custom Manifest and several versions of Service Workers. One can choose to download the generated PWA package or enhance the application with additional features, or “snippets,” that are pre-built and available at the same website.
All in all, this is a helpful instrument for those who have little experience with progressive app development or simply want to test-drive this format with minimum investment and effort.
Webpack Module Bundler
Unfortunately, Webpack has a rather steep learning curve and not particularly reader-friendly documentation, which makes it an instrument reserved for experienced developers only.
Lighthouse PWA Analytics Tool
Lighthouse is an open-source tool for automated audit of web applications and PWAs, created by Google and available through Chrome DevTools. The instrument accurately evaluates performance, accessibility, progressive enhancements, and search engine optimization levels, which makes it indispensable for both app developers and support specialists.
Lighthouse assigns an evaluation score (a number from 0 to 100) and the list of failed/passed audits for each parameter. The tool also allows for running additional checks manually.
Why Choosing the Right PWA Framework is Critical
As the value of progressive web technology is undisputable, more and more PWA frameworks and tools appear on the market. Framework selection is the crucial first step for any PWA project, and there are several determinant factors to consider to make the right choice.
Since each framework has its capacity, the expected feature sets of future applications, as well as their size, complexity, expected scalability and presence of media or interactive elements all play a significant role in selecting the solution. Another factor to consider is the development team, their expertise and maturity, and whether they would be available to maintain and upgrade the application when needed.
Finally, it should be noted that progressive web technology is not a cure-all, and PWA for the sake of PWA isn’t necessarily a great idea. If the website experience explicitly relies on the standard web navigation, back/forward functions, dynamic network-dependent content, and access to the address bar, then a PWA will be just a worse version of your site and will yield zero value to both owners and users. Therefore, PWA development should be approached mindfully and if possible involve dedicated application development specialists.
Our team will help you pick the right option.
What are the differences between Xamarin.Forms and Xamarin.iOS/Android? Learn about the capabilities of each to choose right for your business app.
Maturity and feature-richness vs. rapid development with a lot of promise. Compare Flutter and Xamarin frameworks from a business perspective: current state, strengths and weaknesses, and future.
There’s a new player in the multiplatform mobile development town: Flutter. Here’s how it stacks up against Facebook’s React Native from a business perspective.
Xamarin in comparison to other platforms and whether it's good for particular kinds of projects. Learn the features that every business executive set on finding the best cross-platform development option should know of.
WANT TO START A PROJECT?