A Deep Dive into Progressive Web Apps

A DEEP DIVE INTO

PROGRESSIVE
WEB APPS

DIG INTO PWAS. ANYWHERE. ANYTIME.

ii A Deep Dive into Progressive Web Apps

A Deep Dive into Progressive Web Apps

Copyright © 2018 SitePoint Pty. Ltd.

Editor: Adam Roberts

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embodied in
critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the
information herein. However, the information contained in this book is sold
without warranty, either express or implied. Neither the authors and SitePoint
Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be
caused either directly or indirectly by the instructions contained in this book, or
by the software or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this
book uses the names only in an editorial fashion and to the benefit of the
trademark owner with no intention of infringement of the trademark.
 A Deep Dive into Progressive Web Apps iii

Published by SitePoint Pty. Ltd.

48 Cambridge Street Collingwood

VIC Australia 3066
Web: www.sitepoint.com
Email: books@sitepoint.com

About the Editor

Adam Roberts is SitePoint’s head of newsletters, who mainly writes Versioning, a
daily newsletter covering everything new and interesting in the world of web
development. He has a beard and will talk to you about beer and Star Wars, if you
let him.

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content
for web professionals. Visit sitepoint.com to access our blogs, books,
newsletters, articles, and community forums. You’ll find a stack of information on
JavaScript, PHP, Ruby, mobile development, design, and more.
iv A Deep Dive into Progressive Web Apps

Table of Contents
Preface .......................................................................................................................... vi

Chapter 1: An Introduction to Progressive Web

Apps .................................................................................................................................. 7

Chapter 2: PWAs in the Real World ............................................ 9

Examples .............................................................................................................................. 10

Case Studies........................................................................................................................ 10

Chapter 3: A PWA from Scratch: Starting Points ........ 11

Chapter 4: Migrating to a PWA ...................................................... 13

Chapter 5: Introducing Service Workers............................. 15

Chapter 6: Web App Manifest ........................................................ 17

Chapter 7: The App Shell Model .................................................. 19

 Table of Contents v

Chapter 8: HTTPS......................................................................................... 21

Chapter 9: PWAs with React ............................................................23

Chapter 10: PWAs with Angular ...................................................25

Chapter 11: PWAs with Vue................................................................27

Chapter 12: Progressive Web App Performance ........29

Chapter 13: UX and Design for PWAs...................................... 31

Chapter 14: Getting It Out: Deployment and

Distribution ..............................................................................................................33
vi A Deep Dive into Progressive Web Apps

Preface
Progressive Web Apps (PWAs) try to overlap the worlds of the mobile web apps
and native mobile apps by offering the best features of each to mobile users.

They offer an app-like user experience (splash screens and home screen icons),
they’re served from HTTPS-secured servers, they can load quickly (thanks to
page load performance best practices) even in low quality or slow network
conditions, and they have offline support, instant loading and push notifications.
The concept of PWAs was first introduced by Google, and is still supported by
many Chrome features and great tools, such as Lighthouse, an open-source tool
for accessibility, performance and progressiveness auditing.

This little ebook began its life as an email course published by SitePoint. It
provides a beginner-friendly introduction to PWAs, presenting lists of tools and
resources for delving into this cutting-edge field.
 An Introduction to Progressive Web Apps 7

Chapter

An Introduction
to Progressive
Web Apps 1
8 A Deep Dive into Progressive Web Apps

Progressive Web Apps are web apps that provide a user experience previously
only associated with native apps. They’re fast, engaging, and they work even
when they’re offline. They also have the advantages of web apps: they’re
linkable, they require no install process, and they’re not subject to the whims of
the App Store Approval process.

Everything I’d heard suggested they were the best of both worlds, so I was keen
to learn more and figured there were a few of you in the same frame of mind. So
in this Deep Dive we’re going to progress through the world of PWAs, see what’s
what and what is possible.

To start with, I thought I’d throw a few introductory articles your way:

This intro [smashingmagazine] covers the ideas behind PWAs, their

characteristics, and then looks at a few case studies (which we’ll do properly
the next chapter).

A very thorough post covering the past and future of PWAs [infrequently].

According to Google [developers.google], PWAs are a new way to deliver

amazing user experiences on the Web.

Finally, an interview with developers from Nigeria and Kenya [dev.opera] on

why they find PWAs so exciting. PWAs are popular in both countries due to
the high data costs: they’re a way of cutting down on data usage by update-
heavy native apps.
 PWAs in the Real World 9

Chapter

PWAs in the
Real World
2
10 A Deep Dive into Progressive Web Apps

It’s one thing to talk about the power and potential of PWAs in the abstract; it’s
another to see cool examples of this technology. So let’s do that now.

Examples
NASA’s open source software site is a PWA [code.nasa].

Telegram’s web app is also a PWA [web.telegram].

Then there’s a PWA Pokedex [pokedex], and an Air Horner [airhorner]. Both
are incredibly useful in my day-to-day life.

More can be found over here [pwa.rocks]

There are now more than 22 Hacker News Readers as PWAs. Addy Osmani
outlines the project.

Here are some progressive web apps running as native macOS apps.

Case Studies
Flipkart tripled time-on-site with a transition to a PWA [sites.google].

Trivago has also seen success, with more than half a million people adding
their PWA to their homescreen, leading to increased engagement
[thinkwithgoogle].
 A PWA from Scratch: Starting Points 11

Chapter

A PWA from
Scratch: Starting
Points 3
12 A Deep Dive into Progressive Web Apps

In this chapter, we’ll make inroads into getting our hands dirty and making a PWA
ourselves, starting from scratch.

First up, a crash course in building your first PWA [sitepoint].

A Progressive Web App Fundamentals course [mike.works].

A repo with the bare minimum you need to create a PWA [github/madnessxd].

And an opinionated PWA boilerplate [github/lakshyaranganath].

That’s a good little selection of starting points for you. But what if you already
have a site or web app you love, and you just want to transform it into a PWA?
We’ll take a look at your options in this case next up.
 Migrating to a PWA 13

Chapter

Migrating to a
PWA
4
14 A Deep Dive into Progressive Web Apps

First up, a guide to retrofitting your site as a PWA [sitepoint].

Even a simple Jekyll blog can become a PWA. Here’s how [ jonpitcherella].

Speaking of blogs, here’s a case-study from a dev who transformed their blog
to a PWA [alexjover].

A Google Codelab project on migrating to a PWA [codelabs.developers].

Advice on overcoming some of the challenges around moving a web app to a

PWA [medium/@sarahelson81].

Or just let PWABuilder [pwabuilder] do all the hard work for you. This app
takes data from your site and uses it to create a PWA so you don’t have to.
(But you really should do it yourself. You’ll enjoy it!)

OK, either from scratch, or by retrofitting an existing property, you now have a
toehold in the PWA world. We’re now going to spend some time going over the
four main pillars of a PWA: Service Workers, a Web Manifest, an App Shell, and
HTTPS. Next up: service workers.
 Introducing Service Workers 15

Chapter

Introducing
Service Workers
5
16 A Deep Dive into Progressive Web Apps

Now we’ll take a look at how service workers enable some of the most “appy”
parts of a Progressive Web App. They’re scripts that your browser runs in the
background, thereby making it possible for you to enable things like offline
experiences, periodic background sync and push notifications. Let’s take a look!

An introduction to service workers [developers.google]. And a very detailed

guide to getting started [developers.google].

And then Mozilla’s introduction, which is equally extensive [developer.mozilla].

How to make your own service worker[smashingmagazine].

Building Offline-first PWAs [youtube].

The offline cookbook [ jakearchibald].

Not directly related, but another example of the power of service workers:
build dynamic responsive images with service workers and WebP [deanhume].

And another: a web-powered SMS inbox with service worker push

notifications [twilio].

How to set up push notifications for your PWA (and also just your web app of
any sort) [sitepoint].

A service worker cookbook [serviceworke], full of service worker patterns you

can deploy in your own apps.

Workbox [developers.google] is a set of libraries that make it a bit easier to

handle the service workers, providing best practices and removing some of
the boilerplate you have to deal with.

Next up, we’ll look at Web Manifest—the thing that’ll help us make our dreams of
PWAs manifest.
 Web App Manifest 17

Chapter

Web App
Manifest
6
18 A Deep Dive into Progressive Web Apps

Now we’ll move on to looking at the next aspect of PWAs we need to

understand: the Web App Manifest. Think of this as telling the browser about
your web app, and how it should look when “installed” on a user’s device or
desktop. This is needed to allow users to add your PWA to their home screen,
one of the PWA-iest parts of having a PWA, in terms of the user experience.

Google’s official guide [developers.google].

A guide to adding a Web Manifest to “mobile proof” your site [medium/dev-

channel]. This isn’t actually discussed in the context of making a PWA, which
to me shows how important this has become.

And a few manifest generators:

A CLI tool for creating a manifest.json file [npmjs].

Opera dev Bruce Lawson’s manifest generator [brucelawson.github].

FetchManifest [github/cvan] will fetch a parsed manifest from a manifest or

site URL.
 The App Shell Model 19

Chapter

The App Shell

Model
7
20 A Deep Dive into Progressive Web Apps

Now we’ll take a look at the app shell model. This model, paired with service
workers, offers a way to cut down on loading times using a minimal HTML, CSS
and JavaScript “shell” to power your PWA’s interface. Since this is cached offline,
your users are only loading content-related code when they visit and move
around your app. Warning: a lot of Google-produced content here!

Addy Osmani from Google explains [developers.google].

And a very in-depth follow-up [developers.google].

Mozilla takes a look at the structure of PWAs, mostly focusing on the app shell
model [developer.mozilla].

A doc from Google covering PWA architectures [google-developer-

training.gitbooks].

A bare-bones demonstration app shell [github/googlechromelabs].

And another demo, this time using the iFixit API to display hardware guides
[github/googlechromelabs].

This larger PWA course [samdutton] has a couple of sections on architecting

and implementing an app shell.
 HTTPS 21

Chapter

HTTPS
8
22 A Deep Dive into Progressive Web Apps

This will be a quick one: PWAs should be on SSL, as should every site you
develop. In this chapter, we’ll outline a few helpful links to get you there. HTTPS
will also come up when we circle back to look at PWA performance later.

One dev does the work you’re about to do, offering a real-world take on
moving to HTTPS [medium/progressive-web-apps].

How to migrate to HTTPS [hospodarets].

Mythbusting HTTPS [developers.google].

A guide to deploying HTTPS [developers.google].

Add auth to a PWA with Stencil and Okta [scotch].

 PWAs with React 23

Chapter

PWAs with
React
9
24 A Deep Dive into Progressive Web Apps

React devs: this one’s for you, with content covering how to build a React PWA,
and the tools to make it a little easier for you.

Addy Osmani shares lessons from his experience turning React apps into
PWAs [medium/@addyosmani].

This tutorial aims to get you a React PWA in 6 simple steps

[medium/@tirthbodawala].

Build a realtime PWA with React [medium/front-end-hacking]—an app that’ll

keep track of the value of various cryptocurrencies.

A serverless PWA with React and Cloudflare workers [blog.cloudflare].

React PWA [reactpwa] offers an easy way to get started with your first PWA.

preact-cli [github/developit] can create a Preact PWA in 30 seconds.

 PWAs with Angular 25

Chapter

PWAs with
Angular
10
26 A Deep Dive into Progressive Web Apps

Now we turn to Angular, another popular front-end framework that can build
SPAs and, therefore, PWAs. You’d expect Angular to do pretty well when it
comes to PWAs, given Angular is a Google-led framework, and the PWA concept
is similarly led by the company. Here are some starting points.

This talk from Google I/O 2016 [youtube/firebase] may feel a little old-hat at
this point in the Deep Dive, but it might be nice to have the concept of PWAs
reintroduced from an Angular point of view.

PWAs in the context of Angular 6 [blog.angulartraining].

Turn an Angular app into a PWA in just four steps [medium/poka-techblog].

A series of guides for building PWAs [github/angular].

An Angular Universal PWA starter/boilerplate [github/maciejtreder] is a

boilerplate for a PWA with Angular Universal, ready to be deployed on a
serverless environment. That’s part of this Angular Universal PWA starter kit
[angular-universal-pwa.maciejtreder].
 PWAs with Vue 27

Chapter

PWAs with Vue

11
28 A Deep Dive into Progressive Web Apps

And now we turn to the last of the big three front-end frameworks: Vue.

If you want to build a PWA and you also like Vue, this tutorial is for you [telerik].

Build a PWA with Vue, webpack and Material Design [blog.sicara]. I think that
probably covers all the decent, popular web tech, right?

Adding PWA features to an existing app, a Kanban board [auth0].

And another guide to doing so, with a comics app built using Firebase
[blog.bitsrc].

Vue CLI, the official CLI for quickly scaffolding SPAs, actually has a pwa plugin
[github/vuejs], so here’s a guide to using it to add PWA support to a Vue app
[naturaily].
 Progressive Web App Performance 29

Chapter

Progressive Web
App
Performance 12
30 A Deep Dive into Progressive Web Apps

Now we have a PWA, our attention turns to making it perform well. Let’s take a
dive into the options.

Google’s Lighthouse [github/googlechrome] is an automated tool for

improving the performance of web pages and PWAs. It can also help with
things like accessibility.

Front-end performance in a PWA, a case-study [medium/engineering-

housing].

How Speedcurve improve its PWA’s performance [speedcurve].

Tools to optimize your PWA’s CSS and boost its performance [sitepoint].

How to implement smooth animations in your PWA [aerotwist]. Related:

Flipboard’s post on ensuring 60fps performance on your front-end
[engineering.flipboard].

A few case-studies to close out:

Addy Osmani takes a look at the performance of Tinder’s PWA

[medium/@addyosmani], which brings swipe-enabled casual hook-ups to the
Web, and how the team has improved it over time.

How Pinterest got their PWA performance working very nicely indeed
[medium/dev-channel].

And how Twitter Lite did it with its PWA [medium/@paularmstrong].

 UX and Design for PWAs 31

Chapter

UX and Design
for PWAs
13
32 A Deep Dive into Progressive Web Apps

Now, let’s look at the methods and tools for making sure your PWA looks and
feels good to the user. We’re making apps, so we need to hold the UX to that
standard. Let’s dive in!

14 ways to improve your PWA’s user experience [uxplanet].

A guide to designing great user interfaces for PWAs [medium/owencm].

Some easy ways to ensure your progressive web app has good UX
[techbeacon].

The process of, and lessons learned in, designing a PWA [medium/dev-
channel].

Advice for creating amazing user experiences on the Web with PWAs
[sitepoint].
 Getting It Out: Deployment and Distribution 33

Chapter

Getting It Out:
Deployment and
Distribution 14
34 A Deep Dive into Progressive Web Apps

And for the final chapter of our PWA Deep Dive, we’ll look at getting your PWA
out into the world, something that is as easy or as complicated as you like, given
your options for publishing the thing into app stores and the like. In some cases,
devs have decided to put their PWA onto an app store, arguing that that’s where
the users are. This obviously also comes with some drawbacks.

A guide to distributing your PWA to the world [learn.buildfire].

PWABuilder [pwabuilder] offers an easy interface to build and, more

importantly, deploy a PWA.

A talk on building and deploying a PWA at scale, from Flipkart [youtube/

googlechromedevelopers].

What one dev learned building a PWA and publishing it in three app stores
[debuggerdotbreak]. Primarily: the app store part is hard and expensive.

If you do decide to go down that route, here’s a comparison of the platforms

available to you [programmableweb].

And a closer look at the iOS ecosystem [medium/@firt].

Or you could leverage the power of Chromium and Electron and bring your
PWA to the desktop [medium/dailyjs].

Lastly, you can actually do this now, using PWAify [github/vladikoff], an

experimental project.