Category
Mobile
Web

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.

Mobile phone internet usage worldwide, 2014-2019

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.

Want to start with PWA development?
Ask Iflexion’s consultants now.

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?

Pros

  • 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.
Android vs iOS vs PWA app size
  • Short time to market. PWAs take less time to develop, especially if the developers leverage existing web apps' code and content and share the codebase across platforms. PWAs can also be created using ‘plain’ JavaScript or certain tools that can speed up the process even more.

Cons

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.
#PWA offers benefits for global brands and smaller businesses alike. Discover the top solutions to build a capable PWA.
Tweet

Top Progressive Web App Frameworks and Tools in 2020

There are multiple JavaScript frameworks and instruments to build a progressive web app with, and each of them offer different capacities and capabilities.

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 PWA Library

Created and released by Facebook in 2013, React is a JavaScript library for interface design. Currently one of the dominant libraries for frontend web development, React can be used to create both multipage apps and single-page applications (SPA) with content dynamically loading and changing within a single page.

Using additional JavaScript libraries such as NextJS and GatsbyJS allows generating server-side and static (client-side) rendered pages, API interactions, and routing.

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

Angular

One of the oldest JavaScript frameworks, Angular was created in 2010 by Google. It is considered the most mature and ‘full-packed’ among the frameworks on this list.

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

Vue.js

Along with React and Angular, Vue is one of the most popular progressive JavaScript frameworks for building PWAs. Unlike Angular and React which are in large part driven by Google and Facebook, Vue was created by a single person. It is open-source (distributed under the MIT license) and driven mostly by its community.

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

Ionic is a framework for hybrid mobile apps as well as web applications created with HTML, CSS, and JavaScript. From its beginnings in 2013 and up until recently, it was connected to and dependent on Angular components; without them, it was only suited for rather basic apps. Thankfully, this changed with Ionic 4 released in 2019.

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

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

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.

PWA Builder

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.

React, Ionic, Vue, Angular or other #PWA frameworks? Here’s the guide to choosing a development tool for your business.
Tweet

Webpack Module Bundler

Webpack

One of the distinctive features of progressive web apps is that they can function offline. Webpack, an open-source module bundler for JavaScript, is the best tool for adding offline experience to a PWA.

Webpack serves to create dependency graphs between non-code JavaScript files, such as fonts, images, and CSS elements. Such graphs eliminate the need for dependency management, thus reducing the volume of server calls and allowing the static elements to load faster.

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

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.

Lighthouse run on Twitter

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.

Mobile internet usage reached 63% in 2019. Is your brand ready? Learn how to build a PWA that drives native web and mobile experience.
Tweet
Content type
Blog
Native apps, PWA, or both?
Our team will help you pick the right option.

WANT TO START A PROJECT?

It’s simple!

Attach file
Up to 5 attachments. File must be less than 5 MB.
By submitting this form I give my consent for Iflexion to process my personal data pursuant to Iflexion Privacy and Cookies Policy.