: Majid Hajian
: Progressive Web Apps with Angular Create Responsive, Fast and Reliable PWAs Using Angular
: Apress
: 9781484244487
: 1
: CHF 71.20
:
: Informatik
: English
: 386
: Wasserzeichen/DRM
: PC/MAC/eReader/Tablet
: PDF

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.


div>
What Readers Will Learn
  • B ild 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
  • Off ine storage and different caching APIs in Angular
  • Implement modern technologies into an Angular PWA
< r>
Who This Book Is For 

< div>
Developers with basic knowledge of HTML, JavaScript and Angular

< div>


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.
Table of Contents5
About the Author11
About the Technical Reviewer12
Acknowledgments13
Introduction14
Chapter 1: Setup Requirements15
Progressive Web App Fundamentals15
Why Angular?16
Installing Node and NPM17
Installing Chrome18
Scaffolding Our Project18
Generating New Angular App with CLI18
Adding Angular Material Design19
Setting Up a Mobile Device22
Setting Up a Mobile Emulator22
Connecting Android Simulator to Chrome Dev Tools22
Summary22
Chapter 2: Deploying to Firebase as the Back End23
Setting Up Your Account23
Creating a Project24
Deploying to Firebase26
Generating a New Angular App26
Initializing the App30
Features Selection30
Project Selection31
Database Setup31
Functions Setup32
Final Setup32
Adjustment in Angular Project Settings34
Deploying Our App35
Setting Up AngularFire36
Summary41
Chapter 3: Completing an Angular App42
Implementing Our UI42
Installing and Setting Up Angular Material, CDK, and Animations43
Installing @angular/material Automatically with Angular CLI43
Installing @angular/material Manually44
Creating a Core Module / Shared Module46
Header, Footer, and Body Components48
Login / Profile Page54
Adding Login, Signup, and Profile UI and Functionalities56
Firebase CRUD Operations for Note Module64
Set Up Firestore Database64
List, Add, and Detail Note Views67
Authentication Service69
Data Service72
Authentication Guard74
NoteList, NoteAdd, and NoteDetail Components76
Summary83
Chapter 4: Angular Service Worker84
Service Workers: The Brain of PWAs84
Understanding Service Worker85
The Service Worker Life Cycle86
Service Worker Functional Events89
Chrome DevTools89
Service Worker Example Code92
Cache API96
Precache Static Assets98
Angular Service Worker Module101
Support for Service Worker in Angular103
ngsw-config.json Anatomy110
Build Project with Angular Service Worker114
Summary117
Chapter 5: Advanced Angular Service Worker and Runtime Caching119
Cache Strategies119
Cache Only119
Network Only120
Cache Falling Back to Network or Cache-First121
Network Falling Back to Cache or Network-First122
Cache and Network124
Generic Fallback126
Runtime Cache in Angular Service Worker128
External Resources128
Revalidate Strategy for Resources with No Hash133
Data Groups Settings134
Navigation Cache143
AppData Config146
Dealing with Updates146
Deploy to Firebase150
Summary151
Chapter 6: An App Manifest and Installable Angular App152
The Web App Manifest152
Debugging Web App Manifest159
Adding to Home Screen161
Handling Installation Event (Deferring the Prompt)163
The Mini-Info Bar164
Implementing Functionality into Angular App165
Adding to Home Screen on Mobile and Desktop168
Microsoft Windows7170
Android and Chrome172
Manually Adding to Home Screen175
Further Enhancement176
PWACompat Library10178
Summary179
Chapter 7: App Shell and Angular Performance180
The App Shell Model180
Angular App Shell182
Angular App Shell and Angular Universal185
Generating the App Shell in Production190
Measuring App Shell Performance via webpagetest.org193
Measuring App Shell Performance via Audit tab in Chrome DevTools195
Beyond the App Shell, Further Optimizations198
Analyze Bundle Sizes and Lazy Load Module198
Waterfall View from Web Page Test200
Reduce Render Blocking CSS201
Optimize Fonts203
Self-Hosting Fonts203
CDN-Based Fonts204
Browser Resource Hinting206
Preload Angular Lazy Loaded Modules208
HTTP/2 Server Push209
Summary210
Chapter 8: Push Notifications211
Introduction to Push Notifications211
Web Notifications212
Push Notifications213
Browser Supports216
Push Notification in Angular216
Showing Again the Allow/Block Notifications Popup224
Sending Push Notifications225
Firebase Cloud Function226
lPush Message Body231
Listen to Messages in Angular235
Notification Actions and Handling Notification Click Events235
Deploy to Firebase237
Summary237
Chapter 9: Resilient Angular App and Offline Browsing238
Offline Storage239
Offline First Approach241
Implement Offline First Approach with Sync Server243
Implement Persistent Data with Angular Firebase257
User Interface Considerations