Building Offline Applications with Angular: Develop Reliable, Performant Web Applications for Desktop and Mobile Platforms

✍ Scribed by Venkata Keerti Kotaru

• Publisher: Apress
• Year: 2022
• Tongue: English
• Leaves: 261
• Edition: 1
• Category: Library

✦ Synopsis

Get a complete overview of offline installable applications. Businesses need reliable applications that enable users to access data and their applications in spite of a bad network connection.  

Traditional websites work only when connected to the network. With a large number of users depending on mobile phones and tablets for work, social interactions, and media consumption, it’s important that the web applications can work on a weak network connection and even offline. 

This step-by-step guide shows you how to build an Angular application that considers offline access and uses its ready-made features and configurations. Build Offline Applications with Angular helps bridge the gap between native apps and web applications.

What You Will Learn

• Get started with an installable Angular application
• Understand the importance of performant, reliable, and offline access of a web application
• Discover solutions for building Angular applications for speedy response in low bandwidth scenarios
• Use IndexedDB as an offline data store within a browser
  

Who Is This Book For

Ideal for beginner-to-intermediate-level readers with basic understanding of JavaScript and Angular.

✦ Table of Contents

Table of Contents
About the Author
About the Technical Reviewer
Introduction
Chapter 1: Building Modern Web Applications
Laying the Foundation
Original Problem
Caveats with the Web Application Solution
Use Case
Code Samples
Summary
Chapter 2: Getting Started
Prerequisites
Node.js and NPM
Yarn
Angular CLI
Visual Studio Code
Http-Server
Create an Angular Application
Add Service Worker
Run the Angular Application
Security: Service Workers Need HTTPS
Working with yarn global add
Summary
Chapter 3: Installing an Angular Application
Angular Components
Create a Component
Web Arcade: Create a Die
Styles for the Component
TypeScript: Functional Logic for the Component
Output (Event Emitter) from the Component
Input to the Component
HTML Template
Service Worker Configuration
Create Icons
Summary
Chapter 4: Service Workers
Service Worker Lifecycle
Service Worker in an Angular Application
Web Arcade’s Service Worker Configuration
Pattern Match Resources to Cache
Browser Support
Summary
Chapter 5: Cache Data with Service Workers
Adding a Component to List Board Games
Define a Data Structure for Board Games
Mock Data Service
Call the Service in the Angular Application
Configure the Service in an Angular Application
Create an Angular Service
Provide a Service
HttpClient Service
Cache the Board Games Data
Angular Modules
Summary
Chapter 6: Upgrading Applications
Getting Started with SwUpdate
Identifying an Update to the Application
Identifying When an Update Is Activated
Activating with the SwUpdate Service
Checking for a New Version
Notifying the User About the New Version
Managing Errors in Unrecoverable Scenarios
Summary
Chapter 7: Introduction to IndexedDB
Terminology
Getting Started with IndexedDB
Angular Service for IndexedDB
Creating Object Store
Using “onupgradeneeded” Event
Creating Index
Browser Support
Limitations of IndexedDB
Summary
Chapter 8: Creating the Entities Use Case
Web Arcade: Game Details Page
Offline Scenario
Creating a Component for Game Details
Routing
Navigate to Game Details Page
Adding Comments
Updates to Mock HTTP Services
Filtering Game Details by ID
Retrieving Comments
Adding Comments
Summary
Chapter 9: Creating Data Offline
Adding Comments Online and Offline
Identifying the Online/Offline Status with a Getter
Adding Online/Offline Event Listeners
Adding Comments to IndexedDB
The User Experience of Adding Comments
Synchronizing Offline Comments with the Servers
Retrieving Data from IndexedDB
Bulking Updating Comments on the Server Side
Deleting Data from IndexedDB
Updating Data in IndexedDB
Summary
Chapter 10: Dexie.js for IndexedDB
Installing Dexie.js
Web Arcade Database
Object Store/Table
IndexedDB Versions
Connecting with Web-Arcade IndexedDB
Initializing IndexedDB
Transactions
Add
Delete
Update
Retrieve
More Options
Summary
Addendum
Creating a Proxy for Mock Services
Using the Bottom Sheet for a Die Roll
Adding the Bottom Sheet in Web Arcade
Showing the Bottom Sheet with the Die Component
Using a Hash Location Strategy
Summary
References and Links
Index