Progressive Web Application Development By Example - A Book 📙 to Help Developers Make Great User Experiences

Progressive Web Application Development by ExampleI am excited to announce my latest web development book, Progressive Web Application Development By Example. The book features 10 chapters covering everything from what progressive web applications are, how to control the add to homescreen experience, how HTTPS works and 6 chapters on working with service workers and a chapter on PWA tools.

Producing a resource like this takes time and when you are writing about a fluid topic like Progressive web apps the target moves. That has certainly happened with progressive web apps. Since I started writing content both Microsoft and Apple have shipped support for service workers and some add to homescreen support.

Google also updated their add to homescreen support and made significant upgrades to the Workbox tool.

These updates along with diving deep into the world of service workers made for a very interesting experience creating the content and sample applications.

That's right, there are three different example applications!

  • 2048 - a simple an fun game
  • Podster - an example podcast application
  • PWA Tickets - a simple event ticket purchasing and management application

2048-game-screen

Each of these applications walk you through a progression of complexity as it relates to progressive web apps. I wrote about the 2048 application earlier this year. It is a simple 1 page web site and have a minimal amount of assets to manage. I love these types of applications to get developers familiar with how progressive web application work,

podcast-pageThe Podcast application steps things up a notch by utilizing more of the service worker life cycle and introduces intermediate cache management strategies. I have to admit I decided to write this application in response to a comment made on one of my DotNetRocks interviews a few years ago. The commentator said the web was not feature rich and could not support simple application like a podcast app.

It's not what I would call a production ready example, but serves the purpose I needed to get the point across. Honestly, I think if I spent another week on the project I could have a solution on par with Stitcher's app. But it serves the purposed of demonstrating the concepts I wanted to cover in the first few service worker focused chapters.

These chapters focus on the service worker life cycle, which I consider the most overlooked aspect of service workers and misunderstood.

The next few chapters introduce you to basic service worker caching concepts. This includes how to use the life cycle to precache primary assets and crafting some basic dynamic cache rules and response management.

The last application is a bit more complex. Not only does it demonstrate more complex service worker caching concepts. The primary feature I tried to emphasize was sophisticated cache invalidation. For example how to limit how many items are retained in a named cache or how long specific responses can be cached.

The application service worker also intercepts network requests and renders them in the service worker, without hitting the network.

The last two chapters focus on optimizing the application for performance and using tools to help you automate your PWA and ensure application quality. These tools are:

  • Sonar
  • PWA Builder
  • Lighthouse
  • Workbox

All four of these tools are node modules with command line interfaces. This means they could be included in your continuous build or scaffolding processes.

The Ticket application also uses fakerjs and json-server. This made local development much easier, but made it a little more difficult to push to production since I don't use servers anymore and have migrated to a completely serverless infrastructure. I hope to get some time to change this soon.

Each application's source code is available on GitHub.

The Kindle price is $31.99 and physical book $39.99.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel