How to Choose a Progressive Web App Framework: Top 7 Tools

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.

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 offers 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.

Angular PWA Framework

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.

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 front-end 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.

Vue PWA Framework

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.

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.

The instrument will assess whether the website supports PWA features and build a custom Manifest and several versions of Service Workers. 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.

Ionic PWA Framework

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 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 cleaner 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 metadata 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.

Webpack Module Bundler

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.

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.

Frequently Asked Questions

A lot of people don't appreciate the moment until it’s passed. I'm not trying my hardest, and I'm not trying to do