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

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.

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.

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.

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.

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.

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.

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.