Technologies and tools for PWA

In the previous article on PWA, we presented the advantages and disadvantages of this solution. So it's time to take a closer look at the most popular technologies in which progressive applications are created.

24 April 2019

PWA

Modern websites are created using JavaScript frameworks and libraries such as Angular, React.js or Vue.js. These solutions are also used when building PWAs, so I will briefly describe each of them.

Angular

is an OpenSource framework that facilitates building SPA and PWA applications, supported and developed by Google. This is a popular way to create applications that run in any browser on a mobile device and computer. Angular rewrites the best parts of AngularJS (the original version that was launched in 2009) into TypeScript. It is the most powerful framework, and at the same time, it can be considered too complex if we want to build a simple progressive application.

React.js

is a JavaScript library created and developed by Facebook developers. One of the distinguishing features of React is the JSX (JavaScript XML) language, which is a JavaScript overlay that allows you to embed HTML code in a JavaScript file. React is definitely one of the most popular solutions in the work of a front-end developer.

For creating PWAs, the Gatsby.js static page generator is also recommended. It is a framework built on the basis of React.js and GraphQL. It will be a great tool for developers using React, which will speed up their work. In the production version, Gatsby.js creates pure HTML files, which allows for quick and proper positioning of the page. It has many ready-made solutions and plugins. Turning a static page into an offline PWA application requires only one plug-in and in the basic version it is very simple.

Vue.js

is a JavaScript framework that is gaining more and more popularity. Programmers, especially those who are just learning and getting to know particular technologies, are attracted to this solution by the simplicity and the so-called low entry threshold compared to React or Angular, and the fact that Vue.js will be suitable for both simple and more complex and extensive web applications.

We can also choose:

Polymer

which is a JavaScript library created by Google, built on the basis of Web Components API. It provides a toolkit that aims to create components faster and easier. With regard to PWA, Polymer allows you to quickly create applications and bypass custom configuration. It is often used for prototyping - you can use a template provided by Polymer to set up your project.

Knockout

which is a JavaScript library that is great for handling MVVM bindings between HTML and JavaScript. Its main advantage is that it weighs little and still provides great functionality. It will be a good choice if you need a light but functional PWA application. This library is often used for smaller projects.

Webpack

which is a tool necessary to create custom progressive applications. This is called bundler, which allows you to pack resources so that they will be loaded much faster. Webpack improves dependency management - it catches them and creates static "packages" with the code for them, which are then loaded. Webpack can include various formats, such as JPG, PNG, CSS files, etc., converting them accordingly to be treated as JavaScript objects.

Lighthouse

which is Google's PWA performance monitoring tool. It is a plug-in for Chrome, thanks to which we can conduct tests and investigate issues such as whether the application works offline or with a weak Internet connection, what is the charging speed, is the network connection safe, whether the user is asked to add the application to the home screen.

Regardless of which of the solutions you choose, to create a PWA application, you will also need:

manifest.json

Web App Manifest, i.e. a file that contains information about the application, such as the name, icons (e.g. the icon that will be visible after assigning it to the home screen) or hiding the URL bar and browser navigation buttons.

Service Worker

a mechanism introduced in browsers, intermediating between the application and the browser, thanks to which the website works offline. It allows you to store network requests, update resources on the server and save application files to the cache. This mechanism also allows the implementation of push notifications.

HTTPS

for security reasons, all PWA applications must use HTTPS.

Speaking of PWA, one should also mention the need to pay attention to the responsiveness of the application being built - it is necessary to adapt to the user's screen, regardless of the device he uses. Before starting work on your own PWA application, it is also worth reading the PWA Checklist created by Google, containing all the requirements for applications of this type: https://developers.google.com/web/progressive-web-apps/checklist.

Based on modern technologies and bearing in mind such elements as the manifest file, Service Worker and HTTPS, we can create a progressive application that will meet the expectations of users. From the above tools, we can choose a technology stack tailored to our needs.