Symbols

' (single quotation mark), 30

. (period), 209, 215

` (back tick), 30

A

<a> tag, target attribute, 25

abort method, 108

actions property, 145

actionsContainer div, 176

activate event listener, 58, 61, 80–81

activating service workers, 59, 62–63

Add Features pane (PWABuilder), 193

add method, 68

Add to Home Screen option, 11–15

addAll method, 68, 71

addEventListener method, 64, 71, 168, 169–171

admin.js files (push notification app), 154

Air Horner app, 10

all method, 120, 121

Amazon sync SDKs, 103

Android devices. See also remote notifications

installing web apps on

Add to Home Screen option, 11–15

with manifest files. See web app manifest files

notifications on, 129–130

Angular, 7

Apache Cordova, 3, 7

APIs (application programming interfaces), Push API, 49–51, 134

api.ts file, 162–164

app stores, 7

AppCache, 45–46

appinstalled event listener, 39

Apple Dashcode, 3

Apple iOS devices

installing web apps on

Add to Home Screen option, 11–15

with manifest files. See web app manifest files

iPhone, 3

push notifications, lack of support for, 129

Application Cache, 45–46

application resource caching. See caching

applicationServerKey, 148–149

apps, converting into PWAs

deployable apps, creating, 195–196

overview of, 190–191

PWABuilder CLI, 197

PWABuilder UI, 191–195

Add Features pane, 193

home page, 191–192

Manifest Editor page, 193–194

scan results, 192

Service Worker page, 194–195

Visual Studio PWABuilder extension, 198–202

command palette, 198–199

generated manifest files, 200–201

installing, 198

Manifest Generator page, 199–200

Archibald, Jake, 45

arrays, urlList, 70–71

assessing quality

Chrome Lighthouse tools, 187–189

coding preparation, 182

Lighthouse node module, 189–190

Lighthouse plug-in, 182–187

overview of, 181–182

automation, service worker

overview of, 207–208

precaching service workers

adding precaching to existing service workers, 215–218

cache strategies, controlling, 218–224

generating, 208–214

Azure

Bing News Search API, 49–51

free plan, 50

B

back tick (`), 30

background sync

capabilities of, 99–103

data objects

adding to stores, 107–108

deleting from stores, 108–109

iterating through, 109–110

databases

choosing, 105

creating, 105–106

offline data sync, 103–105

poke-and-pull method, 104–105

PWA News Feedback page

db.js file, 114–117, 122–124

install event listener, 119

last chances, 125–128

onupgradeneeded callback, 116

openIDB function, 113, 115–116

postFeedback function, 112–113

preparing service workers for, 111–112

queueFeedback function, 116–117

refresh on success, 117

service worker preparation, 111–112

service worker queue processing, 119–125

software prerequisites, 110–111

submitFeedback function, 112, 113–114

testing, 118–119

software prerequisites, 110–111

store creation, 107

tags and, 102–103

background tasks, 3

background_color property, 25

backslash (), 69

badge property, 145

beforeinstallprompt event, 36, 131

Berriman, Frances, 2

Bing News Search API, 49–51

BING_ACCESS_KEY property, 50–51

body property, 145–147

browser display mode, 22–23

browsers. See also remote notifications

applying service workers to, 63–64

service worker support, 44–45

web app manifest support, 16

C

Cache interface, 67–68

Cache Storage (Chrome), 74–77

CACHE_ROOT constant, 80

cacheableResponse plugin, 223

CacheFirst strategy, 219

CacheOnly strategy, 92–93, 219

CacheStorage API, 46

caching

AppCache, 45–46

Cache interface, 67–68

cache management, 76–77

activate event listener, 80–81

CACHE_ROOT constant, 80

custom cache generation, 79

deletion of cache, 78, 79–80

service worker version number, 78

sw-42.js file, 81–83

CacheStorage API, 46

enabling, 70–77

fetch event listener, 72

install event listener, 71–72

sw-41.js file, 72–74

urlList array, 70–71

offline awareness, 77

offline pages, creating, 86–91

overview of, 67

precaching service workers

adding precaching to existing service workers, 215–218

cache strategies, controlling, 218–224

generating, 208–214

overview of, 207–208

returning data object on error, 83–86

strategies for, 91–92

cache-only, 92–93

network-first, cache-next, 93–94

network-first, update-cache, 94–98

callbacks

callback hell, 68

onclose, 106

onerror, 106

onsuccess, 106

onupgradeneeded, 107, 116

Can I Use website, 16, 44–45

capabilities of PWAs (Progressive Web Apps), 4–6

catch method, 53

characteristics of PWAs (Progressive Web Apps), 2–4

Chrome

Cache Storage, 74–77

Developer Tools Application Tab, 55

Lighthouse tools in, 187–189

PWAs, installing/removing, 36

Service Worker Internals Page, 56

service workers

listing registered, 55–56

support for, 44–45

shortcuts, 11

CLI (command-line interface), PWABuilder, 197

clients, Git, 28–29, 47–48

client-side scripting, 4–5

color options, configuring, 25

commands

copy-config, 51, 69, 110

git clone, 28, 48

git --version, 28, 47

http-server, 28, 33, 182, 212

node generate-keys.js, 135, 166

node -v, 28, 47

npm install, 48, 69, 110, 134, 166

npm install -g lighthouse, 189

npm install -g pwabuilder, 197

npm install -g typescript, 47

npm install -g workbox-cli, 208

npm install http-server -g, 28

npm install workbox-cli -global, 215

npm start, 51, 110, 136, 166

pwabuilder, 197

tsc, 49, 51, 69, 110, 166

workbox injectManifest, 217

workbox wizard, 208

workbox wizard -injectManifest, 215

community-driven logo (PWA), 1

compilers. See TypeScript

configuration files

push notification app, 135

PWA News web app, 50, 51, 69, 110

workbox-config.js file, 210, 213

configuration of web apps

app icons, 18–19

app name, 18

color options, 25

display mode, 19–23

browser, 22–23

fullscreen, 19–20

minimal-ui, 21–22

standalone, 20–21

installation process, 26–27

orientation, 25–26

server APIs, 49–51

start URL, 23–25, 39

theme color, 25

controllerchange event, 64

controlling cache strategies, 218–224

cacheableResponse plugin, 223

default cache, 223–224

route registration and matching, 219

supported strategies, 219

copy-config command, 51, 69, 110

Cordova (Apache), 3

CORS (cross-origin resource sharing), 98

Couchbase, 103

cross-origin resource sharing (CORS), 98

cursors, iterating through data with, 109–110

custom cache, generating, 79

D

data communication

coding preparation, 166–167

overview of, 165–166

sending data from service worker to web app window, 169–171

sending data from web app to service worker, 167–168

event handling, 168

postMessage method, 167–168

web app output, 168

two-way communication with MessageChannel, 171–179

click event listener, 171–172

message channels, creating, 171–172

data objects

adding to stores, 107–108

deleting from stores, 108–109

iterating through, 109–110

returning on error, 83–86

data property, 145

databases, sync

choosing, 105

creating, 105–106

stores

adding data to, 107–108

creating, 107

deleting data from, 108–109

iterating through, 109–110

data.items.map method, 120, 121

db.js file, 114–117, 119, 122–124

default cache, 223–224

default permission value, 138

deferredPrompt object, 36

delete method, 68

deleteFeedback function, 120, 121, 123–124

deleting

caching, 78, 79–80

data objects from stores, 108–109

denied permission value, 138

deployment

to app stores, 7

deployable apps, creating, 195–196

PWAs (Progressive Web Apps), 202–205

DevTools, Chrome. See Chrome

dir property, 145

display mode, configuring with web app manifest files, 19–23

browser, 22–23

fullscreen, 19–20

minimal-ui, 21–22

standalone, 20–21

display property, 19–23

document object model (DOM), service worker access to, 46

doInstall function, 37

doLongAction function, 176–177

DOM (document object model), service worker access to, 46

domains, obtaining, 35

doPlayback function, 173

doSubscribe function, 142, 151–152, 167

doUnsubscribe function, 154–155, 167

E

Edge, 44–45

EMPTY_NEWS_OBJECT constant, 83

enabling resource caching, 70–77

fetch event listener, 72

install event listener, 71–72

sw-41.js file, 72–74

urlList array, 70–71

encryption keys, generating, 134–137

encryption of remote notifications, 133

enhancement, progressive, 4

errors

returning data objects on, 83–86

returning text/HTML content on, 87–91

Workbox, 214

events and event listeners, 39, 84

activate, 58, 61, 80–81

beforeinstallprompt, 36, 131

controllerchange, 64

fetch, 55

cache-only strategy in, 92–93

caching, enabling, 72

data object, returning on error, 84–86

network-first, cache-next strategy in, 93–94

network-first, update-cache strategy in, 94–96

text/HTML content, returning on error, 87–91

install

caching, enabling, 71–72

install event listener, 119

service worker lifestyle, 61

service worker registration, 58

message, 168, 172, 173–175, 177–179

notificationclick, 157

pushsubscriptionchange, 162

sync. See also background sync

registering, 102–103

triggering, 102

expired subscriptions, 162

exponential fallback algorithm, 125–128

Express, 47

F

Feedback Page (PWA News web app), 99

db.js file, 114–117, 119, 122–124

Feedback Page, 99

install event listener, 119

last chances, 125–128

onupgradeneeded callback, 116

openIDB function, 113, 115–116

postFeedback function, 112–113

preparing service workers for, 111–112

queueFeedback function, 116–117

refresh on success, 117

service worker preparation, 111–112

service worker queue processing, 119–125

software prerequisites, 110–111

submitFeedback function, 112, 113–114

testing, 118–119

fetch event listener, 55, 84

cache-only strategy in, 92–93

caching, enabling, 72

data object, returning on error, 84–86

network-first, cache-next strategy in, 93–94

network-first, update-cache strategy in, 94–96

text/HTML content, returning on error, 87–91

fetch function, 120, 121

fetchWrapper.mjs file, 221

Firebase, 103

Firefox, 44–45

folders, selecting for precaching, 209, 215

forcing

service worker activation, 62–63

service worker updates, 64–66

forward slash (/), 69

fullscreen display mode, 19–20

G

Gaunt, Matt, 16

GCM (Google Cloud Messaging), 136

GCMAPI_KEY, 136

generateVAPIDKeys method, 135, 166

getFeedbackItems function, 120, 121, 122–123

Git client, installing, 28–29, 47–48

git clone command, 28, 48

git --version command, 28, 47

GitHub

Air Horner app, 10

Electron, 7

HTTP Server app, 28

Learning PWA Code repository, 10, 28, 69, 110, 134, 166

Web App Manifest Generator, 42

globIgnores property, 213

Good, Scott, 10, 134, 160

Google

Air Horner app, 10

Chrome

Cache Storage, 74–77

Developer Tools Application Tab, 55

Lighthouse tools in, 187–189

PWA support, 2

Service Worker Internals Page, 56

service workers, listing registered, 55–56

service workers, support for, 44–45

Domains, 35

GCM (Google Cloud Messaging), 136

Google Play Store, 7

Lighthouse. See Lighthouse

Play Store, 7

TWA (Trusted Web Activity), 7

Workbox. See Workbox

granted permission value, 138

H

headers, max-age, 97

history of PWAs (Progressive Web Apps), 2–6

HTML content, returning on error, 87–91

HTML5 Boilerplate template, 136

HTTP Server app, 28

HTTPS (Hypertext Transfer Protocol Secure), 4

http-server command, 28, 33, 182, 212

Hypertext Transfer Protocol Secure (HTTPS), 4

I

icon property, 145–147

icons

defining, 18–19

notification, 145–147

icons property, 18–19

id property, 169

image property, 145–147

images, notifications and, 145–147

IndexedDB

advantages of, 105

database creation, 105–106

open method, 106

stores

adding data to, 107–108

creating, 107

deleting data from, 108–109

iterating through, 109–110

index.html file

PWA News web app, 52

Tip Calculator app, 31–33, 35–36

Install button (Tip Calculator app)

appinstalled event listener, 39

beforeinstallprompt event listener, 36

deferredPrompt object, 36

doInstall function, 37

installbutton variable, 36

preventDefault function, 36

install event listener

background sync, 119

caching, enabling, 71–72

service worker lifestyle, 61

service worker registration, 58

installation

Git client, 28–29, 47–48

Node.js, 28, 47, 69, 110, 134

speed of, 3

TypeScript, 47

Visual Studio Code, 29, 48

Visual Studio PWABuilder extension, 198

web apps

with Add to Home Screen option, 11–15

with manifest files. See web app manifest files

Workbox, 208

interfaces, Cache, 67–68

Ionic Capacitor, 7

Ionic Framework, 7

iOS devices

installing web apps on

Add to Home Screen option, 11–15

with manifest files. See web app manifest files

iPhone, 3

push notifications, lack of support for, 129

iterating through data, 109–110

J

JavaScript, 4–5

callback hell, 68

.js files, compiling .ts files into, 49, 69, 110, 136

JSON (JavaScript Object Notation), 17

promises, 68

Jobs, Steve, 3

JSON (JavaScript Object Notation), 17

K

Keith, Jeremy, 2

keys, encryption, 134–137

keys method, 68

Kinlan, Paul, 16

L

lang property, 145

last chances, background sync, 125–128

lastChance property, 125–128

Learning PWA Code GitHub repository, 10, 28, 69, 110, 134, 166

libraries, pwcompat, 42

lifecycle, service worker, 60–62

Lighthouse

Chrome tools, 187–189

coding preparation, 182

Lighthouse plug-in, 182–187

node module, 189–190

overview of, 181–182

<link> tag, 17

linking web app manifest files, 17, 31–33

Live Data in the Service Worker, 105

local notifications, 142–143

logo (PWA), 1

M

macOS computer, notifications on, 129–130. See also remote notifications

main.js file (Tip Calculator app), 36, 37, 39–41

management, cache, 78–83

activate event listener, 80–81

CACHE_ROOT constant, 80

custom cache generation, 79

deleting cache, 78, 79–80

service worker version number, 78

sw-42.js file, 81–83

Manifest Editor page (PWABuilder), 193–194

manifest files. See web app manifest files

Manifest Generator page (Visual Studio PWABuilder extension), 199–200

ManifoldJS, 191, 197

market impact, 6–7

match method, 68, 72

matchAll method, 68, 170

max-age header, 97

message channels

actionsContainer div, 176

browser long action results, 179

creating, 171–172

doLongAction function, 176–177

doPlayback function, 173

message event listener, 172, 173–175, 177–179

message event, 168, 172, 173–175, 177–179

MessageChannel interface, 171–179

actionsContainer div, 176

browser long action results, 179

doLongAction function, 176–177

doPlayback function, 173

message channels, creating, 171–172

message event listener, 172, 173–175, 177–179

methods. See functions and methods

Microsoft

Azure

Bing News Search API, 49–51

free plan, 50

Edge, 44–45

ManifoldJS, 191, 197

Microsoft Store, 7, 202–205

PWABuilder. See PWABuilder

minimal-ui display mode, 21–22

modules, node, 70, 189–190

Mozilla Firefox, 44–45

N

name value, 18

names, defining, 18

network-first, cache-next strategy, 93–94

network-first, update-cache strategy, 94–98

NetworkFirst strategy, 219

NetworkOnly strategy, 219

node generate-keys.js command, 135, 166

node modules, 70, 189–190

Node Package Manager (npm), 48, 69, 110, 134

node server, restarting automatically, 70

node -v command, 28, 47

Node.js, installing, 28, 47, 69, 110, 134

nodemon, 70

Notification object

checking for, 138

event handling, 142–143

permission property, 138

requestPermission method, 139–140

showNotification method, 144

notificationclick event, 157

notifications

local, 142–143

overview of, 129–131

remote (push), 3

browser support for, 129

in-browser testing, 156–157

coding preparation, 134

definition of, 129

encryption keys, generating, 134–137

encryption of, 133

local notifications versus, 142–143

options for, 144–147

overview of, 129–131

permissions, 131, 138–142

Postman, 158–159

receiving, 156–158

remote notification architecture, 132–134

sending, 159–161, 162–164

subscribing to, 148–154

subscription expiration, 162

unsubscribing from, 154–156

validating support for, 138

web-push module, 162–164

O

objects

data

adding to stores, 107–108

deleting from stores, 108–109

iterating through, 109–110

returning on error, 83–86

deferredPrompt, 36

Notification

checking for, 138

event handling, 142–143

permission property, 138

requestPermission method, 139–140

showNotification method, 144

options, 145

Response, 88

subOptions, 148

subscription, 149, 168

theDB, 106

transaction, 108

offline awareness, caching and, 77. See also background sync

offline data sync, 103–105

offline pages, creating, 86–91

Offline Storage for Progressive Web Apps, 105

onclose callback, 106

onerror callbacks, 106

onsuccess callbacks, 106

onupgradeneeded callback, 107, 116

open method, 106

openIDB function, 113, 115–116

Opera, 44–45

options object, 145

orientation, configuring, 25–26

orientation property, 25

OrientationLockType, 26

P

passing data. See data communication

path delimiters, 69

performance, 3

period (.), 209, 215

permission property, 138

permissions, notification, 138–142

checking, 138

obtaining, 139–142

permission prompts, 131

PhoneGap project, 3

plug-ins, Lighthouse, 182–187

poke-and-pull background sync, 104–105

postFeedback function, 112–113

Postman, 158–159

postMessage method, 167–168

postRegistration function, 150–151

precacheAndRoute function, 212

precacheManifest, 212

precaching service workers

adding precaching to existing service workers, 215–218

configuration files, 216–217

folder selection, 215

sw.js file, 217–218

cache strategies, controlling, 218–224

cacheableResponse plugin, 223

default cache, 223–224

route registration and matching, 219

supported strategies, 219

generating, 208–214

configuration files, 210

error handling, 214

folder selection, 209

globIgnores property, 213

precacheAndRoute function, 212

precacheManifest, 212

sw.js file, 211

Workbox CLI, installing, 208

workbox-config.js file, 213

overview of, 207–208

preventDefault function, 36

programmable network proxies. See service workers

progressive enhancement, 4

Promise.all method, 120, 121

promises (JavaScript), 68

properties

actions, 145

background_color, 25

badge, 145

BING_ACCESS_KEY, 50–51

body, 145–147

data, 145

dir, 145

display, 19–23

icon, 145–147

icons, 18–19

image, 145–147

lang, 145

lastChance, 125–128

orientation, 25

permission, 138

ready, 66

renotify, 145

requireInteraction, 145

start_url, 23–25, 39

tag, 145

theme_color, 25

VAPID_PUBLIC, 148–149

vibrate, 145

Push API, 134

push notification app

admin.js files, 154

api.ts file, 162–164

architecture for, 132–134

in-browser testing, 156–157

coding preparation, 134, 166–167

data communication

sending data from service worker to web app window, 169–171

sending data from web app to service worker, 167–168

two-way communication with MessageChannel, 171–179

index.js files, 142

index-61.js, 143

index-62.js, 154

index-63.js, 156

index-71.js, 171

index-72.js, 179

notifications

browser support for, 129

definition of, 129

encryption keys, generating, 134–137

encryption of, 133

options, 144–147

permissions, 131

receiving, 156–158

sending, 159–161, 162–164

subscribing to, 148–154

subscription expiration, 162

unsubscribing from, 154–156

validating support for, 138

overview of, 129–131

permissions, 138–142

checking, 138

obtaining, 139–142

Postman, 158–159

remote notification architecture, 132–134

service workers

service worker-71.js, 171

sw-63.js, 162

sw-72.js, 179

web-push module, 162–164

push services, sending notifications to, 162–164

pushsubscriptionchange event, 162

put method, 68

PWA Builder, 42

PWA Fire Developer, 42

PWA News web app

app source, 48–49

automation with PWABuilder

deployable apps, creating, 195–196

overview of, 190–191

PWABuilder CLI, 197

PWABuilder UI, 191–195

Visual Studio PWABuilder extension, 198–202

caching

cache management, 78–83

cache-only strategy, 92–93

enabling, 70–77

network-first, cache-next strategy, 93–94

network-first, update-cache strategy, 94–98

offline awareness, 77

offline pages, creating, 86–91

returning data object on error, 83–86

config.ts file, 50–51, 69, 110, 135

db.js file, 114–117, 119, 122–124

Feedback page background sync, 99

db.js file, 114–117, 119, 122–124

Feedback Page, 99

install event listener, 119

last chances, 125–128

onupgradeneeded callback, 116

openIDB function, 113, 115–116

postFeedback function, 112–113

preparing service workers for, 111–112

queueFeedback function, 116–117

refresh on success, 117

service worker preparation, 111–112

service worker queue processing, 119–125

software prerequisites, 110–111

submitFeedback function, 112, 113–114

testing, 118–119

folder structure for, 48–49

GitHub repository for, 69

index.html file, 52

online resources, 43

overview of, 43

server

server API configuration, 49–51

starting, 51–52

service workers

activation of, 59, 62–63

applying to additional browser tabs, 63–64

controllerchange event, 64

forcing updates of, 64–66

index.html file, 52

lifecycle of, 60–62

ready property, 66

registration of, 52–59, 65–66

scope of, 60

verifying in Chrome, 55–56

version numbers, 78

software prerequisites, 47–48

Git client, 47–48

Node.js, 47

TypeScript, 47

Visual Studio Code, 48

utils.js file, 77

PWA Stats, 2

PWA Toolkit, 7

PWABuilder

CLI (command-line interface), 197

deployable apps, creating, 195–196

overview of, 190–191

UI (user interface), 191–195

Add Features pane, 193

home page, 191–192

Manifest Editor page, 193–194

scan results, 192

Service Worker page, 194–195

Visual Studio PWABuilder extension, 198–202

command palette, 198–199

generated manifest files, 200–201

installing, 198

Manifest Generator page, 199–200

pwabuilder command, 197

PWAs (Progressive Web Apps)

capabilities of, 4–6

characteristics of, 2–4

community-driven logo for, 1

definition of, 1

history of, 2–6

market impact of, 6–7

shell structure of, 4–5

pwcompat library, 42

Q

quality assessment

Chrome Lighthouse tools, 187–189

coding preparation, 182

Lighthouse node module, 189–190

Lighthouse plug-in, 182–187

overview of, 181–182

queue processing, 119–125

queueFeedback function, 116–117

quotation marks, single ('), 30

R

React apps

converting to PWAs, 6–7

definition of, 6

ready property, 66

receiving remote notifications, 154–156

refresh on success, 117

register method, 53, 102

registering service workers

PWA News web app, 52–59

forced updates, 65–66

index.html file, 52

sw-34.js, 54

sw-35.js, 56–57

sw-36.js, 57

sw-reg.js, 53–54

verifying in Chrome, 55–56

Tip Calculator app, 30–33

registering sync events, 102–103

registerRoute, 219

remote notifications, 3

architecture for, 132–134

browser support for, 129

in-browser testing, 156–157

coding preparation, 134

definition of, 129

encryption keys, generating, 134–137

encryption of, 133

local notifications versus, 142–143

options for, 144–147

overview of, 129–131

permissions, 138–142

checking, 138

obtaining, 139–142

permission prompts, 131

Postman, 158–159

receiving, 156–158

remote notification architecture, 132–134

sending, 159–161, 162–164

subscribing to, 148–154

doSubscribe function, 151–152

postRegistration function, 151–152

subscribe method, 148

subscription object, 149

updateUI function, 152–153

urlBase64ToUint8Array function, 149

subscription expiration, 162

unsubscribing from, 154–156

validating support for, 138

web-push module, 162–164

removing PWAs (Progressive Web Apps), 36

renotify property, 145

requestPermission method, 139–140

requireInteraction property, 145

resource caching. See caching

Response object, 88

restarting node server process, 70

returning data object on error, 83–86

route registration, 219

Russell, Alex, 2

S

Safari, 3, 16, 44–45

scope, service worker, 60

Secure VAPID key generator, 135–137

sending notifications. See notifications

sendNotification method, 164

server (PWA News app)

server APIs, configuring, 49–51

starting, 51–52

Service Worker page (PWABuilder), 194–195

service workers. See also push notification app; PWA News web app

activation of, 59, 62–63

applying to additional browser tabs, 63–64

browser support for, 44–45

Cache interface, 67–68

capabilities of, 44–45

controllerchange event, 64

data communication with web apps

coding preparation, 166–167

overview of, 165–166

sending data from service worker to web app window, 169–171

sending data from web app to service worker, 167–168

two-way communication with MessageChannel, 171–179

definition of, 44

install conditions, 44

lifecycle of, 60–62

limitations of, 46

listing registered, 55–56

precaching service workers

adding precaching to existing service workers, 215–218

cache strategies, controlling, 218–224

generating, 208–214

overview of, 207–208

preparing for background sync, 111–112

queue processing, 119–125

ready property, 66

registering

PWA News web app, 52–59, 65–66

Tip Calculator app, 30–33

scope of, 60

software prerequisites, 47–48

Git client, 47–48

Node.js, 47

TypeScript, 47

Visual Studio Code, 48

updates, forcing, 64–66

version numbers, 78

setDefaultHandler method, 223

short_name value, 18

shortcuts, creating in Chrome, 11

showNotification method, 144, 156

single page apps (SPAs), 9. See also Tip Calculator app

single quotation mark ('), 30

skipWaiting function, 119

sockets, WebSockets, 132

software prerequisites, 47–48

background sync, 110–111

Git client, 28–29, 47–48

Node.js, 28, 47, 69, 110, 134

TypeScript, 4–5, 47

advantages of, 49

installing, 47

type checking, 41

Visual Studio Code, 29, 48

source.id property, 169

SPAs (single page apps), 9. See also Tip Calculator app

StaleWhileRevalidate strategy, 219, 220–221

standalone display mode, 20–21

start URL, configuring, 23–25, 39

start_url property, 23–25, 39

Stencil, 7

stores

adding data to, 107–108

creating, 107

deleting data from, 108–109

iterating through, 109–110

strategies, caching, 91–92

cache-only, 92–93

network-first, cache-next, 93–94

network-first, update-cache, 94–98

submitFeedback function, 112, 113–114

subOptions object, 148

subscribe method, 148

subscription object, 149, 168

subscription property, 170

subscriptions, notification

expiration of, 162

subscribing to notifications, 148–154

doSubscribe function, 151–152

postRegistration function, 151–152

subscribe method, 148

subscription object, 149

updateUI function, 152–153

urlBase64ToUint8Array function, 149

unsubscribing from notifications, 154–156

sw.js files. See service workers

sync, background. See background sync

sync databases

choosing, 105

creating, 105–106

stores

adding data to, 107–108

creating, 107

deleting data from, 108–109

iterating through, 109–110

sync events. See also background sync

registering, 102–103

triggering, 102

sync SDKs, 103

T

tag property, 145

tags, background sync and, 102–103

target attribute (<a> tag), 25

tasks, background, 3

testing

background sync, 118–119

remote notifications, 156–157

test environments, 35

Tip Calculator app, 29, 35

text, returning on error, 87–91

theDB object, 106

theme color, configuring, 25

theme_color property, 25

Tip Calculator app

assessment with Lighthouse

Chrome Lighthouse tools, 187–189

coding preparation, 182

Lighthouse node module, 189–190

Lighthouse plug-in, 182–187

automation with PWABuilder

deployable apps, creating, 195–196

overview of, 190–191

PWABuilder CLI, 197

PWABuilder UI, 191–195

Visual Studio PWABuilder extension, 198–202

display modes, 19

browser, 22–23

fullscreen, 19–20

minimal-ui, 21–22

standalone, 20–21

index.html file, 31–33, 35–36

Install button, creating

appinstalled event listener, 39

beforeinstallprompt event listener, 36

deferredPrompt object, 36

doInstall function, 37

installbutton variable, 36–41

online resources, 10

preventDefault function, 36

start URL, 39

main.js file, 36, 37, 39–41

manifest file, 17

precaching service workers

adding precaching to existing service workers, 215–218

cache strategies, controlling, 218–224

generating, 208–214

overview of, 207–208

removing, 37–38

running, 33–35

service worker registration, 30–33

testing, 29, 35

web app manifest file, adding, 33

workbox-config.js file, 210, 213, 216–217

TLS (Transport Layer Security), HTTP over, 4

transaction object, 108

Transport Layer Security (TLS), HTTP over, 4

triggering sync events, 102

troubleshooting web app manifest files, 41–42

Trusted Web Activity (TWA), 7, 196

.ts files, compiling into .js files, 49, 69, 110, 136

tsc. See TypeScript

tsc command, 49, 51, 69, 110, 166

@ts-check, 41

TWA (Trusted Web Activity), 7, 196

two-way communication with MessageChannel, 171–179

actionsContainer div, 176

browser long action results, 179

doLongAction function, 176–177

doPlayback function, 173

message channels, creating, 171–172

message event listener, 172, 173–175, 177–179

type checking, 41

TypeScript, 4–5

advantages of, 49

installing, 47

type checking, 41

U

UIs (user interfaces), PWABuilder, 191–195

Add Features pane, 193

home page, 191–192

Manifest Editor page, 193–194

scan results, 192

Service Worker page, 194–195

unsubscribe method, 154

unsubscribing from notifications, 154–156

update method, 64

updateUI function, 152–153, 170

updating service workers, 64–66

urlBase64ToUint8Array function, 149

urlList array, 70–71

userVisibleOnly, 148–149

utils.js file, 77

V

validating notification support, 138

VAPID (Voluntary Application Server Identification), 134–137, 166

VAPID_PUBLIC property, 148–149

version numbers, service worker, 78

vibrate property, 145

Visual Studio

PWABuilder extension, 198–202

command palette, 198–199

generated manifest files, 200–201

installing, 198

Manifest Generator page, 199–200

Visual Studio Code, 29, 48. See also TypeScript

Voluntary Application Server Identification (VAPID), 134–137, 166

W-X-Y-Z

W3C (World Wide Web Consortium), 16

waitUntil function, 71, 120, 121

web app manifest files

app icons, 18–19

app name, 18

browser support for, 16

display mode configuration, 19–23

browser, 22–23

fullscreen, 19–20

minimal-ui, 21–22

standalone, 20–21

example of, 17

linking to apps, 17, 31–33

overview of, 9–10

structure of, 17–18

Tip Calculator app example

display modes, 19–23

index.html file, 31–33, 35–36

Install button, creating, 36–41

main.js file, 39–41

manifest file, adding, 33

manifest file code listing, 17

online resources, 10

running, 33–35

service worker registration, 30–33

start URL, 39

testing, 29, 35

tools for, 42

troubleshooting, 41–42

Web App Manifest specification, 16

Web App Manifest Generator, 42

Web App Manifest specification, 16

web app windows, sending data to, 169–171

web-push module, 162–164

WebSockets, 132

What Is a Progressive Web App?(Keith), 2

Windows computers, notifications on, 129. See also remote notifications

wizards, Workbox Wizard, 208–210, 215–216

Workbox

components of, 207

installing, 208

NodeJS module, 214

overview of, 207–208

precaching service workers

adding precaching to existing service workers, 215–218

cache strategies, controlling, 218–224

generating, 208–214

Webpack plugin, 214

Workbox Wizard, 208–210, 215–216

workbox injectManifest command, 217

workbox wizard command, 208

workbox wizard -injectManifest command, 215

workbox-config.js file, 210, 213, 216–217

World Wide Web Consortium (W3C), 16