Introduction to Progressive Web App

Overview

As web developers, we develop amazing web apps of all kinds, but until recently there has been a divide between what a web app can do versus what a native app can do. A new class of apps called Progressive Web Apps (PWAs) is helping to bridge that divide by enabling native-like capabilities, reliability, and installability in our web apps. A PWA is a web application that takes advantage of native app features while retaining all of the features of a web app.

In this chapter, we will learn what defines a PWA, as well as how to create a PWA by adding a manifest file and a service worker to an existing web application.

The project that we create in this chapter will be a local 5-day weather forecast application that can be installed and run as a native application on Windows, Macs, iPhones, Android phones, and so on and can be distributed through the various app stores. We will use JavaScript’s Geolocation API to obtain the location of the device and use the OpenWeather One Call API to fetch the weather forecast for that location. We will convert the application into a PWA by adding a manifest file and a service worker. The service worker will use the CacheStorage API to cache information so that the PWA can work offline.

In this chapter, we will cover the following topics:

• Understanding PWAs
• Working with manifest files
• Working with service workers
• Using the CacheStorage API
• Using the Geolocation API
• Using the OpenWeather One Call API
• Creating a PWA