Progressive Web Apps with Angular (eBook)

Table of Contents 5
About the Author 11
About the Technical Reviewer 12
Acknowledgments 13
Introduction 14
Chapter 1: Setup Requirements 15
Progressive Web App Fundamentals 15
Why Angular? 16
Installing Node and NPM 17
Installing Chrome 18
Scaffolding Our Project 18
Generating New Angular App with CLI 18
Adding Angular Material Design 19
Setting Up a Mobile Device 22
Setting Up a Mobile Emulator 22
Connecting Android Simulator to Chrome Dev Tools 22
Summary 22
Chapter 2: Deploying to Firebase as the Back End 23
Setting Up Your Account 23
Creating a Project 24
Deploying to Firebase 26
Generating a New Angular App 26
Initializing the App 30
Features Selection 30
Project Selection 31
Database Setup 31
Functions Setup 32
Final Setup 32
Adjustment in Angular Project Settings 34
Deploying Our App 35
Setting Up AngularFire 36
Summary 41
Chapter 3: Completing an Angular App 42
Implementing Our UI 42
Installing and Setting Up Angular Material, CDK, and Animations 43
Installing @angular/material Automatically with Angular CLI 43
Installing @angular/material Manually 44
Creating a Core Module / Shared Module 46
Header, Footer, and Body Components 48
Login / Profile Page 54
Adding Login, Signup, and Profile UI and Functionalities 56
Firebase CRUD Operations for Note Module 64
Set Up Firestore Database 64
List, Add, and Detail Note Views 67
Authentication Service 69
Data Service 72
Authentication Guard 74
NoteList, NoteAdd, and NoteDetail Components 76
Summary 83
Chapter 4: Angular Service Worker 84
Service Workers: The Brain of PWAs 84
Understanding Service Worker 85
The Service Worker Life Cycle 86
Service Worker Functional Events 89
Chrome DevTools 89
Service Worker Example Code 92
Cache API 96
Precache Static Assets 98
Angular Service Worker Module 101
Support for Service Worker in Angular 103
ngsw-config.json Anatomy 110
Build Project with Angular Service Worker 114
Summary 117
Chapter 5: Advanced Angular Service Worker and Runtime Caching 119
Cache Strategies 119
Cache Only 119
Network Only 120
Cache Falling Back to Network or Cache-First 121
Network Falling Back to Cache or Network-First 122
Cache and Network 124
Generic Fallback 126
Runtime Cache in Angular Service Worker 128
External Resources 128
Revalidate Strategy for Resources with No Hash 133
Data Groups Settings 134
Navigation Cache 143
AppData Config 146
Dealing with Updates 146
Deploy to Firebase 150
Summary 151
Chapter 6: An App Manifest and Installable Angular App 152
The Web App Manifest 152
Debugging Web App Manifest 159
Adding to Home Screen 161
Handling Installation Event (Deferring the Prompt) 163
The Mini-Info Bar 164
Implementing Functionality into Angular App 165
Adding to Home Screen on Mobile and Desktop 168
Microsoft Windows7 170
Android and Chrome 172
Manually Adding to Home Screen 175
Further Enhancement 176
PWACompat Library10 178
Summary 179
Chapter 7: App Shell and Angular Performance 180
The App Shell Model 180
Angular App Shell 182
Angular App Shell and Angular Universal 185
Generating the App Shell in Production 190
Measuring App Shell Performance via webpagetest.org 193
Measuring App Shell Performance via Audit tab in Chrome DevTools 195
Beyond the App Shell, Further Optimizations 198
Analyze Bundle Sizes and Lazy Load Module 198
Waterfall View from Web Page Test 200
Reduce Render Blocking CSS 201
Optimize Fonts 203
Self-Hosting Fonts 203
CDN-Based Fonts 204
Browser Resource Hinting 206
Preload Angular Lazy Loaded Modules 208
HTTP/2 Server Push 209
Summary 210
Chapter 8: Push Notifications 211
Introduction to Push Notifications 211
Web Notifications 212
Push Notifications 213
Browser Supports 216
Push Notification in Angular 216
Showing Again the Allow/Block Notifications Popup 224
Sending Push Notifications 225
Firebase Cloud Function 226
lPush Message Body 231
Listen to Messages in Angular 235
Notification Actions and Handling Notification Click Events 235
Deploy to Firebase 237
Summary 237
Chapter 9: Resilient Angular App and Offline Browsing 238
Offline Storage 239
Offline First Approach 241
Implement Offline First Approach with Sync Server 243
Implement Persistent Data with Angular Firebase 257
User Interface Considerations 260
Summary 262
Chapter 10: Debugging and Measurement Tools 263
Debugging 263
NGSW Debug 263
Web App Manifest 264
Chrome DevTools 265
Online Validators 266
Online Generators 266
Service Workers 266
Chrome DevTools 266
Firefox DevTools 267
Service Worker Mock 269
Storage 272
Chrome DevTools 272
Firefox DevTools 274
Cache 275
Chrome DevTools 275
Firefox DevTools 276
Simulate Offline Behavior 277
Chrome 277
Firefox 278
Simulate Different Network Conditions 279
Simulate Mobile Devices 280
Remote Debugging and Measuring 280
Emulators 281
Online Tools 281
Measurement 281
Audit 281
Lighthouse with Chrome Launcher 283
Lighthouse with Puppeteer 285
Analytics 287
Tracking Home Screen Prompts 287
Tracking Sessions from the Home Screen 288
Track Offline Pageviews 290
Online Tools 290
Real Device 290
Summary 290
Chapter 11: Safety Service Worker 291
Fail-safe 291
Safety Worker 293
Extended Safety Worker 294
Summary 296
Chapter 12: Modern Web APIs 297
Credential Management 298
Browsers Support 306
Payment Request 307
Browsers Support 316
Video and Audio Capturing 316
Browsers Support 323
Geolocation 324
Browsers Support 328
Web Bluetooth 328
Browsers Support 332
Web USB 332
Browsers Support 338
Summary 338
Chapter 13: PWA with Angular and Workbox 339
Angular and Workbox Setup 340
Workbox Wizard Mode 342
Workbox injectManifest 346
Summary 353
Chapter 14: Advanced Workbox 354
Dealing with Updates 354
Background Sync 358
Push Notification 366
Offline Analytics 371
Summary 372
Chapter 15: Next Steps 373
Learning Resources 373
Case Studies 374
Example Applications 375
Tools and Technologies 375
Last Words 379
Index 381