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

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 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 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.