PWA: how to create a progressive web app?

PWAs are web applications developed using specific technologies that allow them to make the most of both the “classic” web features and those of native apps.

For example, websites are easier to find: it’s much quicker and simpler to view a website than to install an app, and those websites can be shared via a hyperlink.

On the other hand, native apps integrate better with the operating system and often provide a smoother user experience. You can install a native app so it works offline, and you probably prefer opening your favorite apps from icons on your phone’s home screen rather than accessing them through the browser.

PWAs give us the ability to create web applications that benefit from the same advantages.

This isn’t a new concept: in the past, ideas like this have appeared many times on the web with different approaches. Progressive enhancement and responsive design already allow us to create websites that are more accessible on phones. Working offline and installing apps was even possible within the Firefox OS environment a few years ago.

PWAs, however, go even further, without abandoning the features that make the web powerful…

What is a Progressive Web Application (PWA)?

Progressive websites are rapidly gaining popularity because they are the way to create apps with JavaScript, CSS and HTML that deliver performance and usability almost identical to native apps.

Although there are many “Introduction to Progressive Web Apps” tutorials on the web, we will dig a little deeper and offer tools and JavaScript libraries that you can use to start developing PWAs at a faster pace and with minimal complexity.

There are “critical” points that separate a Progressive Web Site from a more traditional site. Progressive Web Apps must be able to do the following:

The advantages of a PWA

Using a Progressive Web App (PWA) offers several advantages:

1. Web and app characteristics

A PWA can be used as both an app and a website: this means the browser and device features on which the PWA is accessed can be used.

For example, the camera, push notifications (Android only) or the GPS.

2. No installation required

PWAs are available via the browser and therefore do not need to be installed through an app store. It also means you are not dependent on those app stores' acceptance rules…

Users can open the PWA directly via its URL, for example through an SMS, an email, or a WhatsApp message. This has a positive effect on new-user conversion rates.

3. A wider reach

A PWA's reach is greater than that of a native app because it is accessible via the browser on desktops, smartphones, and tablets.

4. The PWA visible as an app icon

A PWA can be added (as an app icon) to the user's phone home screen.

5. No app updates required

Because the PWA is connected to the web, no app update is necessary. This ensures that the user (if connected to the Internet) is always using the most recent version of the app.

6. High performance

A PWA requires virtually no storage space and uses fewer resources than a native app, while its performance is comparable.

7. Offline use

PWAs can be used (in part) offline. This has a positive effect on the user experience, since users do not have to load the entire app every time.

8. PWAs support SEO

Unlike native apps, Progressive Web Apps support SEO (Search Engine Optimization).

For example, websites can be read by Google's crawlers, so the PWA's content can be found in search engine results.

9. Often more affordable

Developing a Progressive Web App is often more affordable than developing native apps, because it takes less time to build.

10. A solid foundation for further development

A PWA can serve as a basis for later development. With a PWA, it is possible to integrate revenue-generating “web games” into a mobile app, which are then available in the various app stores.

Another advantage is that you can also integrate native features via a native “wrapper”, for example push notifications on iOS.

The drawbacks of a PWA

Of course there are drawbacks:

1. No access to app stores

The drawback is that users must visit the website themselves before they can add the app to their phone’s home screen.

2. Fewer features

Not all mobile device features can be accessed (for example, you cannot access contacts, the calendar, Bluetooth, or NFC).

When your app needs heavy use of device hardware, it is often more sensible to build a native app rather than a PWA. For example, solutions that use Bluetooth are in most cases developed natively.

3. Still in development

PWAs and their compatibility with (mobile) browsers and operating systems are still a work in progress.

For example, Apple does not support all PWA features, so the user experience will in some cases be more limited. At present, it is not possible to use Siri, send push notifications, or use Face ID or Touch ID.

4. Performance

Yes, it’s on both lists… With a PWA, you can achieve good performance compared with a traditional website, but native apps still outperform PWAs.

When you enter a competitive market where you need to win over the end user, it may be wiser to choose a native app rather than a PWA.

How to build a PWA?

Register a "service worker"

To take advantage of all the benefits of a PWA (push notifications, caching, install prompts), you will need a “service worker”.

Add push notifications

“Service workers” allow your users to receive push notifications via the Web Push API. Sending push notifications depends heavily on your backend configuration, so we will not go into that here.

If you start an app from scratch, Google’s Firebase service comes with Firebase Cloud Messaging, for push notifications relatively simple.

Add a web app manifest

To make your application installable, you must include a "manifest.json" file in the application's root directory.

This is a description of your application, similar to what you might submit to the App Store. It includes icons, a splash screen, a name, and a description.

You can also configure how your application looks when launched from the user's home screen:

Note that a manifest.json should include a full range of icon sizes for different devices.

Configure the installation prompt

When a user visits a PWA that has a service worker and a manifest, Chrome will automatically prompt them to install it to their home screen, provided the user visits the site twice and there are five minutes between visits.

The idea here is to wait until the user shows interest in your application, then ask them to install it on their device (which contrasts sharply with the approach of native apps, which request that commitment from the start).

But you may want to show the install prompt in different situations, for example after the user has taken a specific action. This is possible by intercepting the "beforeinstallprompt" event and saving it for later, then showing the prompt at the desired time.

Tools to create a PWA

React

The first step in building a progressive web app is choosing a base framework. There are many frameworks, and I encourage you to review the available options, but I recommend React, for two reasons:

1. It is managed and supported by Facebook, which uses the framework on its sites and thus demonstrates that the framework is rigorously tested with 1.18 billion daily users.
2. React is the basis of React Native, which allows you to easily port applications built with React to native apps.

The appeal of ReactJS lies in its component-centered development approach. Each component is built using JavaScript, and you can easily reuse it. Using JavaScript also has benefits:

1. Many developers already know JavaScript and therefore do not need to learn a new language.
2. Rich data can be quickly passed through the DOM layer.
3. ReactJS supports raw JavaScript and JSX. JSX is an XML-like syntax for writing JavaScript.

The user interface is made up of components. These components can be rendered in the browser, on the server using Node.js, and in apps using React Native. This way, the challenges of delivering applications across many operating systems, browsers, and devices are addressed.

Polymer

You can significantly reduce the time required to set up a progressive web app by using Polymer as a template.

This open-source Google project is frequently updated to stay aligned with the projects the framework builds on.

Polymer projects use the “PRPL” pattern to optimize delivery of the application to the device. Use it to:

You should use a HTTP2 server to provide resources on demand. In addition, the server will cache resources provided by service workers.

Webpack

While Polymer is great for getting started, you may sometimes need to build more customized applications. For that, you can look at Webpack, a bundler for JavaScript applications.

Webpack makes it easy to build dependency graphs. A dependency graph removes the need to manage dependencies manually, meaning you no longer have to add links to all those JS files at the bottom of an HTML web page. Moving to CommonJS or ES6 modules significantly reduces the number of round trips to and from a server, resulting in a faster application.

With Webpack, all non-code assets (images, CSS, fonts, etc.) can be required via JavaScript as objects, which also offers significant speed benefits.

Unfortunately, Webpack isn’t perfect: its learning curve is somewhat steep (but manageable), and the documentation is not very extensive.

AMP

AMP (Accelerated Mobile Pages) is a suite of tools for guiding the image/JS compression to accelerate your website.

Google strongly supports AMP (even highlighting AMP-powered mobile websites in its search results). Google also provides the AMP Cache, which developers can use at no cost.

Lighthouse

Google is the biggest proponent of Progressive Web Apps, which it sees as the future of the web. As such, it provides a handy tool to monitor the development of your PWA.

Lighthouse was once provided as a Chrome extension but, since Chrome 60, it is part of Chrome DevTools under the “Audits” tab. Lighthouse runs your application under different conditions and measures its responsiveness and compliance with PWA guidelines. It then gives a score out of 100 and can also evaluate your app against web best practices.

Lighthouse checks that your PWA:

With this tool, you can ensure your PWA is fully functional.

Find a freelance developer for free on Codeur.com to build your PWA.