Progressive Web Applications

Building Progressive Web Apps: Bringing The Power of Native to the Web by Tal Ater

I was interested in reading this book because I’d been hearing a lot about service workers and wanted to understand what they were about. The whole Progressive Web Application has been something that Google has been pushing, and it has taken a while for other browser vendors like Microsoft and Apple to declare their support. However, with Microsoft’s recent inclusion of service workers in the latest developer release of Edge, this seems to be a technology that is going to be big – there will be talks on PWAs at //BUILD, and there are rumours that PWAs may replace UWP as one of the implementation mechanisms behind applications in the Windows Store.

The book is a really good introduction to PWAs.

The author’s github repository contains a lot of related material, but for the book he has chapter oriented versions of a web application, Gotham Imperial Hotel, which he converts into a progressive web application  (see the branches corresponding to the various chapters). This is a really good learning mechanism, and it is nice to be able to try and step through the code to see what is happening. Google Chrome, for example, lets you fake internet disconnection so that you can try out the service worker code that handles the offline state.

After a brief introduction to service workers, the first chapter of the book takes us through service workers as a proxy and how they can intercept HTTP requests and hence act as a caching mechanism. Most importantly, the service worker still runs even if the browser is offline, and given that the service can determine that it is running offline, it can return different HTML and hence give the user an experience even in this case.

The next chapter deals with the installation of a service worker. Service workers are queued for installation, and are only actually installed when there are no tabs in the browser visiting the target site  – it would obviously be confusing if different versions of a service worker were running in the different tabs targeting a particular site.  The chapter explains the lifecycle, which includes a state where the service worker can cache resources without it being expected to handle any request interception. If the worker can’t get the data it needs, it can set its state to say that it shouldn’t be used, and we should continue with the existing worker. All of this state transition code is asynchronous, and will use Promises to avoid blocking.

The next chapter demonstrates how service workers let us write offline first applications. It this model we are really using PWAs as a deployment model. The chapter covers various patterns of caching – for example, you might try to pre-cache pages, or might instead cache on first access, but then you might also check for updates when the cache is hit and refresh the cache with the new version of the page. The author talks through the various patterns.

The next chapter looks at IndexDB. This is a local database, implemented in the browser, that allows you to store JSON objects, and offers a cursor to walk through the various tables and indexes. There are various patterns you may use to update the database between versions of the service worker.

The service worker isn’t just a proxy for intercepting web requests. The next chapter covers background sync. If our application has been working offline, when we next go back online we’d like to resync with the application’s web site. The service worker is able to receive callbacks from a sync manager, implemented in the browser, which can take care of tracking the synchronisation steps that need to be carried out and maintain the list of pending synchronisations. This service will take care of starting up our service worker if it isn’t running, and will do so at a time where we are online.

The service is acting as a proxy between a site and the many possible tabs in the browser talking to that site.  You might therefore expect there to be a mechanism for the various tabs to talk to each other (so that they can coordinate between themselves over state), and this is what the next chapter covers. Messages can be posted, and message handlers can be registered.

Installation of a PWA, to give it a more permanent presence in the browser, is covered in the next chapter. Many web sites these days, nag you to install the mobile application version of their web site via interstitials, and this chapter talks about the heuristic driven way a browser allows you to install a PWA. In Chrome, for example, there are a number of things that trigger installation – regular use of the site for example.

Once your PWA is installed as an application, you might need a way for the site to notify you of interesting things that have happened. The next chapter covers the two different push notification mechanisms that you can can use. There appears to be more standardisation work required in this area,

The book finishes with a couple of chapters of UX for Progressive Web Applications and where PWAs are going in the future.

The author has done a good job of breaking down the material into the various chapter sized chunks, and having a github application that can show you the changes related to each chapter is a really good learning mechanism. PWAs seem to have many uses, from pseudo-applications that are easy to install, to a richer way to allow web applications to run offline.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s