Building Progressive Web Apps: Bringing the Power of Native to the Browser / Edition 1

by Tal Ater

Overview

Move over native apps. New progressive web apps have capabilities that will soon make you obsolete. With this hands-on guide, web developers and business execs will learn how—and why—to develop web apps that take advantage of features that have so far been exclusive to native apps. Features that include fast load times, push notifications, offline access, homescreen shortcuts, and an entirely app-like experience.

By leveraging the latest browser APIs, progressive web apps combine all of the benefits of native apps, while avoiding their issues. Throughout the book, author Tal Ater shows you how to improve a simple website for the fictional Gotham Imperial Hotel into a modern progressive web app. Plus:

• Understand how service workers work, and use them to create sites that launch in an instant, regardless of the user’s internet connection
• Create full-screen web apps that launch from the phone's homescreen just like native apps
• Re-engage users with push notifications, even days after they have left your site
• Embrace offline-first and build web apps that gracefully handle loss of connectivity
• Explore new UX opportunities and challenges presented by progressive web apps

Product Details

ISBN-13:	9781491961650
Publisher:	O'Reilly Media, Incorporated
Publication date:	09/29/2017
Pages:	285
Product dimensions:	7.00(w) x 9.10(h) x 0.70(d)

About the Author

Tal Ater is a developer, consultant and entrepreneur with over 20 years of experience. His experience includes both client, server and product development, and managing R&D and product departments. He is very passionate and involved with the open source community. His open source contributions, including his popular Service Worker and Speech Recognition libraries, are used by millions of people every day. He has written and spoken extensively on web development, product development, security and open source. His work and research has been extensively featured in the media, including Forbes, The New York Times and the BBC, making his mother very proud.

Table of Contents

Preface xi

1 Introducing Progressive Web Apps 1

The Web Strikes Back 2

The Current Mobile Landscape 3

The Progressive Web App Advantage 5

The Tab, the Web, and the Service Worker 7

2 Your First Service Worker 11

Setting Up Our Sample Project 11

Welcome to the Gotham Imperial Hotel 13

Getting to Know the Code 14

The Current Offline Experience 15

Creating Your First Service Worker 17

What Is Progressive Enhancement? 21

HTTPS and Service Workers 21

Fetching Content from the Web 22

Capturing Offline Requests 24

Creating HTML Responses 25

Understanding Service Worker Scope 27

Summary 28

3 The CacheStorage API 29

What CacheStorage Is and, More Importantly, What It Is Not 30

Deciding When to Cache 31

Storing Requests in CacheStorage 32

Retrieving Requests from CacheStorage 33

Caching in Our Sample App 34

Matching the Right Response to Each Request 36

HTTP Caching and HTTP Headers 38

Summary 39

4 Service Worker Lifecycle and Cache Management 41

The Service Worker Lifecycle 44

The Service Worker Lifetime and the Importance of waitUntil 47

Updating a Service Worker 48

Why We Need to Manage the Cache 50

Cache Management and Clearing Old Caches 53

Reusing Cached Responses 57

Configuring the Server to Serve the Right Caching Headers 59

Developer Tools 59

The Console 59

Have You Tried Turning It Off and On Again? 60

Inspect CacheStorage and IndexedDB 60

Network Throttling and Simulating Offline Conditions 61

Lighthouse 61

Summary 62

5 Embracing Offline-First 63

What Is Offline-First? 64

Common Caching Patterns 66

Mix and Match: Creating New Patterns 69

Planning Our Caching Strategy 72

Implementing Our Caching Strategy 74

Application Shell Architecture 84

Including Content in the Initial Render 86

Implementing App Shell 88

Achievement Unlocked 90

Summary 91

6 Storing Data Locally with IndexedDB 93

What Is IndexedDB 94

Using IndexedDB 97

Opening a Database Connection 97

Database Versioning/Modifying an Object Store 98

Adding Data to an Object Store 99

Reading Data from an Object Store 101

IndexedDB Version Management 102

Reading Objects With a Cursor 104

Creating Indices 106

Reading Data Using an Index 108

Limiting a Cursors Range 108

Setting a Cursors Direction 109

Updating Objects in an Object Store 110

Deleting Objects from an Object Store 112

Deleting All Objects from an Object Store 112

Handling Bubbling IndexedDB Errors 113

IndexedDB for SQL Ninjas 113

IndexedDB in Practice 115

The Database That Was Promised 123

IndexedDB Housekeeping 129

Using IndexedDB in the Service Worker 130

The IndexedDB Ecosystem 131

PouchDB 132

LocalForage 132

Dexie.js 133

IndexedDB Promised 133

Summary 133

7 Ensuring Offline Functionality with Background Sync 135

How Background Sync Works 137

The SyncManager 139

Accessing SyncManager 139

Registering Events 140

Sync Events 140

Event Tags 141

Getting a List of Registered Sync Events 141

Last Chances 142

Passing Data to the Sync Event 143

Maintaining an Action Queue in IndexedDB 143

Maintaining a Queue of Requests in IndexedDB 145

Passing Data in the Sync Event Tag 147

Adding Background Sync to Our App 148

Summary 155

8 Service Worker to Page Communication with Post Messages 157

Window to Service Worker Messaging 158

Service Worker to All Open Windows Messaging 160

Service Worker to Specific Window Messaging 161

Keeping the Line of Communication Open with a MessageChannel 163

Communicating Between Windows 166

Posting Messages from a Sync Event to the Page 169

Summary 171

9 Grabbing Homescreen Real Estate with Installable Web Apps 173

Installable Web Apps 174

How Browsers Decide When to Show an App Install Banner 175

Anatomy of a Web App Manifest 176

Backwards, Sideways, and Future Compatibility 181

Summary 182

10 Reach Out with Push Notifications 183

Life of a Pushed Notification 183

The Notification API 184

The Push API 184

Push + Notification 186

Creating Notifications 187

Requesting Permission for Notifications 187

Showing Notifications 190

Adding Notification Support to Gotham Imperial Hotel 195

Subscribing a User to Push Events 197

Generating Public and Private VAPID Keys 199

Generating a GCM key 200

Creating a New Subscription 202

Subscribing Gotham Imperial Hotel Users to Push Messages 204

Sending Push Events from the Server 206

Listening for Push Events and Showing Notifications 209

Interrogating Notifications 215

Summary 217

11 Progressive Web App UX 219

Grace and Trust 219

Communicating State from the Service Worker 220

Communicating with Progressive UI KITT 222

Common Messages in Progressive Web Apps 225

Caching Complete 225

Page Cached 226

Action Failed But Will Complete When User Regains Connectivity 226

Notifications Enabled 227

Choosing the Right Words 227

Always Be Closing 227

Progressive Web App Design 231

Your Design Should Reflect Changing Conditions 231

Your Design Should Fit Its Environment 232

Your Design Should Adapt to the Particularities of Each Medium 232

Your Design Should Instill Confidence and Inform the User 233

Your Design Should Help the User and Your Business Achieve Their Goals 233

Taking Charge of the Install Prompt 233

Measuring and Aiming for Performance with RAIL 235

Summary 237

12 What's Next for PWAs 239

Accepting Payments with the Payment Request API 239

User Management with the Credential Management API 241

Real-Time Graphics with WebGL 242

Futuristic APIs with Speech Recognition 244

Virtual Reality in the Browser with WebVR 245

Easy Sharing to and from Your App 245

Slick Media Playing UIs 246

The Next Great Era 248

A Service Workers: A Great opportunity to Adopt ES2015 251

B Full-Page Interstitials or: How I Learned to Hate the Door Slam 255

C CORS Versus NO-CORS 257

Index 259