Top frameworks for building your Progressive Web Apps (PWA)

The hype and rise of progressive web apps are tremendous. A PWA is basically a web application that feels like a native application to the user. By making your app a PWA, not only do you acquire new users, but you can also retain them for longer. Here’s a quick rundown of all things good about a PWA.

Reliable: Loads instantly even under poor network conditions.

Lighting fast and app-like: Responds to the user’s actions with speed and with a smooth interaction.

Engaging and responsive: Gives the feeling that it was made specifically for that device, but it should be able to work across all platforms.

Protected and secure: Served over HTTPS to make sure the contents of the app are not messed with.

If you’re not already developing your next app as a PWA, here are 5 reasons why you should do that asap. And if you’re confused about choosing the best framework for developing your PWA, here are the top 3 frameworks available to make your next app a PWA.

Ionic

Ionic is one of the most popular frameworks for building a progressive web app. Let’s look at a few reasons why you should choose Ionic as your PWA framework

Free and open-source: Ionic is open source, and licensed under MIT. Open-source means developers can manage the code structure easily, saving time, money and efforts. They also have a worldwide community forum to connect with other Ionic developers, ask questions, and help out others.

Cross-platform and one-codebase: Ionic allows seamless building of apps across popular operating systems, such as Android, iOS and Windows. It has a one codebase feature. This means apps are deployed through Apache Cordova with a single code base, and the application adapts automatically to the device it is functioning in.

Rich UI: Ionic is equipped with pre-built components that are used to customize design themes and elements. It is based on SASS UI, with rich features to create fast, robust, interactive, native-like applications.

Powerful functionality: Ionic is supported by Angular. The component API of Angular helps developers create interactive hybrid and web apps. Ionic is equipped with Cordova Plugins for accessing various native features, like Camera, GPS, and so on. It also features a powerful CLI for building, testing and deploying apps across multiple platforms.

Read our Hybrid Mobile Development with Ionic to build a complete, professional-quality, hybrid mobile application with Ionic. You can also checkout Hybrid Mobile apps: What you need to know, for a quick rundown of all that is to know about a Hybrid mobile app.

Polymer

Google’s Polymer App Toolbox is another contender for the development of PWAs. It is a collection of web components, tools, and templates for building Progressive Web Apps.

Blends PWAs with Web components

Polymer allows developers to architect a component-based web app using Polymer and Web Components.

Web components can form encapsulated and reusable custom HTML elements. They are independent of the frameworks because they are made of pure HTML/CSS/JS, unlike framework-dependent UI components in React/Angular. The web components are provided through a light-weight Polymer Library for creating framework-independent, custom components.

More features include:

Responsive design using the app layout components.

Modular routing using the <app-route> elements.

Localization with <app-localize-behavior>.

Turnkey support for local storage with app storage elements.

Offline caching as a progressive enhancement, using service workers.

Build tooling to support serving the app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1.

Each component whether used separately or together can be used to build a full-featured Progressive web app. Most importantly, each component is additive. For a simple app one only needs the app-layout. As it gets more complicated, developers can add routing, offline caching, and a high-performance server as required.

Read our Getting Started with Polymer book to create responsive web apps using Polymer.

Angular

Angular, probably the most popular front-end web application platform, can also be used to make robust, reliable, and responsive PWAs. Before the release of version 5, supporting progressive web apps in Angular required a lot of expertise on the developers’ part.Version 5 comes equipped with a new version of the Angular Service Worker for built-in PWA support. Angular 6 (released a few days back) has two new CLI commands. Both these versions make it very simple to make web application downloadable and installable, just like a native mobile application.

Service Worker Updates

With Angular 5 the development of Service Workers is becoming significantly easier. By using Angular CLI developers can choose to add Service Worker functionality by default.

The Angular Service Worker functionality is provided by the module @angular/service-worker.

Service worker can power up an application by only providing some JSON configuration instead of writing the code manually.

The key difference with other service worker generators (like Workbox, sw-precache) is the fact, that you do not re-generate the service worker file itself, you only update its control file.

New CLI commands

Angular 6, also introduces two new commands apart from the service worker updates. The first, ng update, is a CLI command for updating dependencies and code.

The second command, ng add, supports turning applications into progressive web apps, which support offline web pages.

Apart from these frameworks, React is also a good alternative. Backed by Facebook, it has a Create-React-App generator which is the official scaffolding tool to generate a Reactjs App. Get started with Scott Domes's Progressive Web Apps with React as your first step for building PWA applications.

Yet another popular choice, would be Webpack. Webpack plugins can generate the service worker and manifest required for a PWA to be registered. It uses a Google project called Workbox which provides tools that help make offline support for web apps easier to set up.

The bottom line is that the frameworks for building progressive web apps are growing and expanding at a rapid rate with regular updates every couple of months. Choosing a particular framework thus doesn’t make much difference to the app behavior. It only depends on the developer’s area of interest and expertise.

Windows launches progressive web apps… that don't yet work on mobile
How to Secure and Deploy an Android App
How Android app developers can convert iPhone apps