Progressive Web Application Development by Example

Develop fast, reliable, and engaging user experiences for the web

Chris Love

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781787282346
• Edition: 1
• Topic: Computer Science
• Subtopic: Application Development
• Index: Computer Science

Leverage the full potential of the web to make your web sites better than native applications for every platform.

Key Features

• Explore different models and patterns required to develop progressive web applications
• Create applications requiring shorter runtime for attracting more users
• Study different projects to understand the fundamentals of progressive web applications

Book Description

Are you a developer that wants to create truly cross-platform user experiences with a minimal footprint, free of store restrictions and features customers want? Then you need to get to grips with Progressive Web Applications (PWAs), a perfect amalgamation of web and mobile applications with a blazing-fast response time.

Progressive Web Application Development by Example helps you explore concepts of the PWA development by enabling you to develop three projects, starting with a 2048 game. In this game, you will review parts of a web manifest file and understand how a browser uses properties to define the home screen experience. You will then move on to learning how to develop and use a podcast client and be introduced to service workers. The application will demonstrate how service workers are registered and updated. In addition to this, you will review a caching API so that you have a firm understanding of how to use the cache within a service worker, and you'll discover core caching strategies and how to code them within a service worker.

Finally, you will study how to build a tickets application, wherein you'll apply advanced service worker techniques, such as cache invalidation. Also, you'll learn about tools you can use to validate your applications and scaffold them for quality and consistency. By the end of the book, you will have walked through browser developer tools, node modules, and online tools for creating high-quality PWAs.

What you will learn

• Explore the core principles of PWAs
• Study the three main technical requirements of PWAs
• Discover enhancing requirements to make PWAs transcend native apps and traditional websites
• Create and install PWAs on common websites with a given HTTPS as the core requirement
• Get acquainted with the service worker life cycle
• Define service worker caching patterns
• Apply caching strategies to three different website scenarios
• Implement best practices for web performance

Who this book is for

Progressive Web Application Development by Example is for you if you're a web developer or front-end designer who wants to ensure improved user experiences. If you are an application developer with knowledge of HTML, CSS, and JavaScript, this book will help you enhance your skills in order to develop progressive web applications, the future of app development.

Service Worker Tools

Web development has become complicated today with so many options, steps, and tools. Progressive Web Apps (PWAs) require a new model but that can produce many opportunities for errors to creep into the code. The good news is that there are several tools that you can integrate into your workflow to improve your application code's integrity.

In this chapter, I will review several tools I have found invaluable in helping me ensure that my applications meet a level of consistent quality before I ship them. These include PWABuilder, Lighthouse, Sonar, and WorkBox.

Lighthouse and Sonar are linting tools you can use to audit your web pages to ensure that a minimum criteria is met, including PWA, performance, hosting, and SEO requirements. PWABuilder and Workbox are very helpful in scaffolding important aspects of progressive web apps including the manifest, icons, and service workers.

As a bonus, all of these tools are available as node modules which you can execute as part of a script and from the command line. This means that you can include much of this functionality as part of your automated workflow and build processes.

The following topics will be covered in this chapter:

• Scaffolding PWA assets with PWABuilder
• Auditing web pages using Lighthouse
• Auditing web pages using Sonar
• Making complex service workers with WorkBox

Using PWABuilder to scaffold your PWA

PWABuilder is a progressive web application scaffolding tool built by the Microsoft Edge team and publicly hosted at https://pwabuilder.com. I love this tool because you can quickly scaffold the assets you need to upgrade any website to a progressive web app in less than a minute.

There are three steps to scaffolding the PWA components, which are generating a web manifest file, picking a simple service worker, and downloading the assets:

Let's check each of these steps in detail.

Generating a valid web manifest file

A valid web manifest file is one of the primary PWA requirements, but you would be surprised at how many sites miss this simple step. Most of them just forget an important field or to supply values that don't meet the guidelines, such as a long and short name value.

The biggest mistake is not including the minimum set of icons required by all the different browsers and operating systems.

To use the online tool, you need to supply a public URL, two primary application colors, and a logo or image you want to make application icons:

The wizard will try to parse values to supply properties, such as full name, short name, and description. If your site already has a web manifest file, it will use those properties. Don't worry: you can supply or change any value in the online form, as well as specify display orientation and language, as shown in the following screenshot:

The next step in the PWABuilder wizard is to generate a set of application icons, and there are over 100 at the time of writing this book. You can either supply a URL to a public image or upload a base image. The image generator will create a set of images to meet the criteria of each major platform: iOS, Android, and Windows. It also covers Chrome and FireFox requirements.

My favorite feature is how it includes proper references for each image in the generated web manifest file. I can't emphasize how much time this saves and how it eliminates potential errors. The fact that the service creates a complete set of images also means that you won't miss an important icon size that could keep your PWA from qualifying as a progressive web app on different platforms. Check out the following screenshot:

When you click the Input Image input field, you are greeted with a form so that you can upload an image. You can choose a file on your hard drive:

When the wizard completes, the product is a package containing all the icons and a manifest file with the icons referenced:

Building a service worker

After uploading a source image to make the application icons, the service worker step displays. Here, you are given a selection of premade service workers. These are all basic service workers that can work with most sites so that you can start the progressive web application journey.

There are five starter service worker options:

• Offline page: Initializes the service worker cache with an offline fallback page
• Offline copy of pages: As the user visits pages on your site, they are cached, making return visits fast and offline capable
• Offline copy with a backup of offline pages
• Cache-First Network: Checks the cache for a valid response before hitting the network, which adds network responses to the cache
• Advanced Pre-Caching: Currently under development, but designed to give you more control over site assets that are cached when the service worker is installed

Downloading your site's PWA assets

After selecting a starter service worker, PWABuilder provides links to download packaged versions of your PWA and native apps. You have the option to download just the progressive web app assets, a pre-packaged Windows appx file, and native apps for the Google Play and iOS App stores.

In most cases, the native app versions won't be needed, but can be handy just in case you need access to platform-specific APIs and integrations.

You can click the buttons corresponding to the package you need. PWABuilder will then generate a package, a ZIP file, containing the assets you need. The site also provides instructions for integrating the scaffolded code into your site and submitting the app store packages to the various stores.

This is an example of the generated web manifest file:

Scaffolded PWA images

I think the best part to PWABuilder is how it quickly generates all the application icons as the web manifest file that properly references each image. It generates over 100 images, and I don't know about you, but I don't have the time or patience to create that many variations, much less add the code to my web manifest file.

This is part of the PWABuilder wizard, but you may have already created a valid web manifest file and a service worker and only need a collection of icons.

This is where you can access the image generation service directly at https://www.pwabuilder.com/imageGenerator. You'll see the same form that's included in the wizard interface. The only difference is that once you provide the base image, you can directly click the Download button to get just your PWA icons and the web manifest JSON.

You are not limited to just using the online image generator. The source code is an open source ASP.NET project, https://github.com/pwa-builder/App-Image-Generator. You will need to stand up a web server that's capable of servicing an ASP.NET site, which you could do using Docker. I don't think this version is built on .NET Core, which means you will need an instance of IIS on Windows.

The tool does not modify any files in your site, so you still need to update your pages to register the service worker and web manifest file. You will also need to copy the icons, manifest, and service worker files to your site's folder.

Running PWABuilder locally

If your site is not public, don't worry: you can still take advantage of PWABuilder by running it locally. PWABuilder is actually the second generation of PWA tools produced by Microsoft. In its previous life, it was called Manifold JS, and still uses that engine.

Manifold is a collection of node modules, used by the PWABuilder site, that generate the files needed for your PWA. The Manifold JS components are available both on GitHub (https://github.com/pwa-builder) and npm (https://www.npmjs.com/package/manifoldjs).

You can run PWABuilder directly from the command line. Since it is a node module, you will need Nodejs installed, and so on.

I recommend installing the PWABuilder node library globally:

npm install -g pwabuilder 

Now, you can execute pwabuilder from any command line. In the following example, I added a couple of options, one to specify the target directly to save the generated assets and another to designate what platform to generate assets:

If you want to get even more ambitious, you can build your own node script to execute the PWABuilder libraries directly. You can clone the PWABuilder projects and examine the source code and how the command-line utility executes to see how you can incorporate parts of the library in your own scaffolding routines.

Auditing web pages using Lighthouse

Lighthouse (https://developers.google.com/web/tools/lighthouse/) is an automated tool managed by the Chrome team that can help you audit your site to identify problems that need attention. The tools audits more than just progressive web app requirements, as it checks for many best practices including performance, accessibility, and SEO.

Lighthouse is an open source project, and contributions are welcome.

As mentioned earlier in this book, Lighthouse can be executed two different ways:

• Built-in to the Chrome Developer tools' Audit tab
• Node Module (https://www.npmjs.com/package/Lighthouse)

The Chrome extension was the original implementation, but this is being phased out. Today, the extension is redunda...