Hajian Progressive Web Apps with Angular

Create Responsive, Fast and Reliable PWAs Using Angular
1. ed
ISBN: 978-1-4842-4448-7
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 386 Seiten

Harness the power of Angular to build fast, high performance progressive web apps that work offline. Learn exactly how to create an Angular Progressive Web App (PWA) from scratch, how you can use different tools to audit and improve it, and leverage Angular CLI or Workbox to turn your app into a PWA. Using browser APIs - including the Credential Management, Payment Request, Geolocation, Web Bluetooth, WebUSB and Generic Sensors APIs - you can unleash the potential of PWAs and build applications that enhance user experience. Angular's game-changing built-in features, including the Angular service worker module, can be leveraged to construct responsive and reliable PWAs that can look and feel just like native mobile apps.  You'll learn how to boost your app speed, how to increase user engagement using push notifications, and how to implement offline storage and different caching APIs in Angular. You'll even see how to convert an existing Angular app into a PWA.  Whether you're new to building PWAs, or want to learn how to use Angular to improve your app development, Progressive Web Apps with Angular provides the know-how to build and deploy an Angular PWA.
What Readers Will LearnBuild an Angular app that looks and feels just like a native mobile app
Audit and improve an Angular PWA with different tools
Increase user engagement by using push notifications
Offline storage and different caching APIs in Angular
Implement modern technologies into an Angular PWA

Who This Book Is For 
Developers with basic knowledge of HTML, JavaScript and Angular


Majid Hajian is a mobile and web developer based in Oslo with over 10 years of experience in software engineering. He enjoys writing technical articles, meeting other developers and speaking at conferences and events, and contributing to open source projects. He has authored courses on PWA development, and has been using Angular to develop web applications for more than five years. He is passionate about sharing his knowledge and experience with other developers who are looking for resources to help them improve their work.

Autoren/Hrsg.

Hajian, Majid

Inhaltsverzeichnis

1;Table of Contents;5
2;About the Author;11
3;About the Technical Reviewer;12
4;Acknowledgments;13
5;Introduction;14
6;Chapter 1: Setup Requirements;15
6.1;Progressive Web App Fundamentals;15
6.1.1;Why Angular?;16
6.2;Installing Node and NPM;17
6.3;Installing Chrome;18
6.4;Scaffolding Our Project;18
6.4.1;Generating New Angular App with CLI;18
6.4.2;Adding Angular Material Design;19
6.5;Setting Up a Mobile Device;22
6.6;Setting Up a Mobile Emulator;22
6.7;Connecting Android Simulator to Chrome Dev Tools;22
6.8;Summary;22
7;Chapter 2: Deploying to Firebase as the Back End;23
7.1;Setting Up Your Account;23
7.2;Creating a Project;24
7.3;Deploying to Firebase;26
7.3.1;Generating a New Angular App;26
7.3.2;Initializing the App;30
7.3.2.1;Features Selection;30
7.3.2.2;Project Selection;31
7.3.2.3;Database Setup;31
7.3.2.4;Functions Setup;32
7.3.2.5;Final Setup;32
7.3.2.6;Adjustment in Angular Project Settings;34
7.3.3;Deploying Our App;35
7.3.4;Setting Up AngularFire;36
7.4;Summary;41
8;Chapter 3: Completing an Angular App;42
8.1;Implementing Our UI;42
8.1.1;Installing and Setting Up Angular Material, CDK, and Animations;43
8.1.1.1;Installing @angular/material Automatically with Angular CLI;43
8.1.1.2;Installing @angular/material Manually;44
8.2;Creating a Core Module / Shared Module;46
8.2.1;Header, Footer, and Body Components;48
8.2.2;Login / Profile Page;54
8.2.3;Adding Login, Signup, and Profile UI and Functionalities;56
8.2.4;Firebase CRUD Operations for Note Module;64
8.2.4.1;Set Up Firestore Database;64
8.2.4.2;List, Add, and Detail Note Views;67
8.2.4.2.1;Authentication Service;69
8.2.4.2.2;Data Service;72
8.2.4.2.3;Authentication Guard;74
8.2.4.2.4;NoteList, NoteAdd, and NoteDetail Components;76
8.3;Summary;83
9;Chapter 4: Angular Service Worker;84
9.1;Service Workers: The Brain of PWAs;84
9.1.1;Understanding Service Worker;85
9.1.2;The Service Worker Life Cycle;86
9.1.3;Service Worker Functional Events;89
9.1.4;Chrome DevTools;89
9.1.5;Service Worker Example Code;92
9.2;Cache API;96
9.2.1;Precache Static Assets;98
9.2.2;Angular Service Worker Module;101
9.2.3;Support for Service Worker in Angular;103
9.2.4;ngsw-config.json Anatomy;110
9.2.5;Build Project with Angular Service Worker;114
9.3;Summary;117
10;Chapter 5: Advanced Angular Service Worker and Runtime Caching;119
10.1;Cache Strategies;119
10.1.1;Cache Only;119
10.1.2;Network Only;120
10.1.3;Cache Falling Back to Network or Cache-First;121
10.1.4;Network Falling Back to Cache or Network-First;122
10.1.5;Cache and Network;124
10.1.6;Generic Fallback;126
10.2;Runtime Cache in Angular Service Worker;128
10.2.1;External Resources;128
10.2.2;Revalidate Strategy for Resources with No Hash;133
10.2.3;Data Groups Settings;134
10.2.4;Navigation Cache;143
10.2.5;AppData Config;146
10.2.6;Dealing with Updates;146
10.3;Deploy to Firebase;150
10.4;Summary;151
11;Chapter 6: An App Manifest and Installable Angular App;152
11.1;The Web App Manifest;152
11.1.1;Debugging Web App Manifest;159
11.2;Adding to Home Screen;161
11.2.1;Handling Installation Event (Deferring the Prompt);163
11.2.2;The Mini-Info Bar;164
11.2.3;Implementing Functionality into Angular App;165
11.2.4;Adding to Home Screen on Mobile and Desktop;168
11.2.5;Microsoft Windows7;170
11.2.6;Android and Chrome;172
11.2.7;Manually Adding to Home Screen;175
11.2.8;Further Enhancement;176
11.2.8.1;PWACompat Library10;178
11.3;Summary;179
12;Chapter 7: App Shell and Angular Performance;180
12.1;The App Shell Model;180
12.2;Angular App Shell;182
12.2.1;Angular App Shell and Angular Universal;185
12.2.2;Generating the App Shell in Production;190
12.2.3;Measuring App Shell Performance via webpagetest.org;193
12.2.4;Measuring App Shell Performance via Audit tab in Chrome DevTools;195
12.3;Beyond the App Shell, Further Optimizations;198
12.3.1;Analyze Bundle Sizes and Lazy Load Module;198
12.3.2;Waterfall View from Web Page Test;200
12.3.3;Reduce Render Blocking CSS;201
12.3.4;Optimize Fonts;203
12.3.4.1;Self-Hosting Fonts;203
12.3.4.2;CDN-Based Fonts;204
12.3.5;Browser Resource Hinting;206
12.3.6;Preload Angular Lazy Loaded Modules;208
12.3.7;HTTP/2 Server Push;209
12.4;Summary;210
13;Chapter 8: Push Notifications;211
13.1;Introduction to Push Notifications;211
13.1.1;Web Notifications;212
13.1.2;Push Notifications;213
13.1.3;Browser Supports;216
13.2;Push Notification in Angular;216
13.2.1;Showing Again the Allow/Block Notifications Popup;224
13.2.2;Sending Push Notifications;225
13.2.3;Firebase Cloud Function;226
13.2.4;lPush Message Body;231
13.2.5;Listen to Messages in Angular;235
13.2.6;Notification Actions and Handling Notification Click Events;235
13.2.7;Deploy to Firebase;237
13.3;Summary;237
14;Chapter 9: Resilient Angular App and Offline Browsing;238
14.1;Offline Storage;239
14.1.1;Offline First Approach;241
14.1.1.1;Implement Offline First Approach with Sync Server;243
14.1.1.2;Implement Persistent Data with Angular Firebase;257
14.1.1.3;User Interface Considerations;260
14.2;Summary;262
15;Chapter 10: Debugging and Measurement Tools;263
15.1;Debugging;263
15.1.1;NGSW Debug;263
15.1.2;Web App Manifest;264
15.1.2.1;Chrome DevTools;265
15.1.2.2;Online Validators;266
15.1.2.3;Online Generators;266
15.1.3;Service Workers;266
15.1.3.1;Chrome DevTools;266
15.1.3.2;Firefox DevTools;267
15.1.3.3;Service Worker Mock;269
15.1.4;Storage;272
15.1.4.1;Chrome DevTools;272
15.1.4.2;Firefox DevTools;274
15.1.5;Cache;275
15.1.5.1;Chrome DevTools;275
15.1.5.2;Firefox DevTools;276
15.1.6;Simulate Offline Behavior;277
15.1.6.1;Chrome;277
15.1.6.2;Firefox;278
15.1.7;Simulate Different Network Conditions;279
15.1.8;Simulate Mobile Devices;280
15.1.8.1;Remote Debugging and Measuring;280
15.1.8.2;Emulators;281
15.1.8.3;Online Tools;281
15.2;Measurement;281
15.2.1;Audit;281
15.2.1.1;Lighthouse with Chrome Launcher;283
15.2.1.2;Lighthouse with Puppeteer;285
15.2.2;Analytics;287
15.2.2.1;Tracking Home Screen Prompts;287
15.2.2.2;Tracking Sessions from the Home Screen;288
15.2.2.3;Track Offline Pageviews;290
15.2.3;Online Tools;290
15.2.4;Real Device;290
15.3;Summary;290
16;Chapter 11: Safety Service Worker;291
16.1;Fail-safe;291
16.2;Safety Worker;293
16.3;Extended Safety Worker;294
16.4;Summary;296
17;Chapter 12: Modern Web APIs;297
17.1;Credential Management;298
17.1.1;Browsers Support;306
17.2;Payment Request;307
17.2.1;Browsers Support;316
17.3;Video and Audio Capturing;316
17.3.1;Browsers Support;323
17.4;Geolocation;324
17.4.1;Browsers Support;328
17.4.2;Web Bluetooth;328
17.4.3;Browsers Support;332
17.4.4;Web USB;332
17.4.5;Browsers Support;338
17.5;Summary;338
18;Chapter 13: PWA with Angular and Workbox;339
18.1;Angular and Workbox Setup;340
18.1.1;Workbox Wizard Mode;342
18.1.2;Workbox injectManifest;346
18.2;Summary;353
19;Chapter 14: Advanced Workbox;354
19.1;Dealing with Updates;354
19.2;Background Sync;358
19.3;Push Notification;366
19.4;Offline Analytics;371
19.5;Summary;372
20;Chapter 15: Next Steps;373
20.1;Learning Resources;373
20.2;Case Studies;374
20.3;Example Applications;375
20.4;Tools and Technologies;375
20.5;Last Words;379
21;Index;381