HTML5 Offline Applications with AngularJS, IndexedDB, and Bootstrap
Learn to build an AngularJS application that works just as well when disconnected from the web as it does with a reliable connection to the server.
What you'll learn
Learn how to implement an AngularJS application that includes services that fall back to saving data on the client when the server is not available and seamlessly resumes interacting with the server once a connection is available. Discover how to use the browser's local database (IndexedDB) to store data on the client, how to implement a cross-browser method to detect online and offline states, and how to leverage the Application Cache API to make files available when working offline.
Table of contents
- Introduction 1m
- Awareness 1m
- Demo: Native API 2m
- Demo: Offline.js 3m
- Offline.js Simulate UI 1m
- Demo: Offline.js Simulate UI 4m
- Availability 2m
- Application Cache Browser Support 1m
- Manifest File Concepts 4m
- Demo: Application Cache 2m
- Demo: Manifest File 1m
- Demo: Fallback Pages 2m
- Demo: Working With Offline Pages and Automatic Reload 7m
- Summary 1m
- Introduction 1m
- Create a New App in Visual Studio and Install Scripts With NuGet 2m
- Installing Bower 1m
- Install Client-Side Dependencies 2m
- Install Math UUI Library 2m
- Use the File Nesting Visual Studio Plug-In 2m
- Set Basic Structure for the Application 1m
- Define Initial Implementation for app.js File 4m
- Add Application CSS Rules 2m
- Add a Layout Page 5m
- Add Views to the Application 1m
- Summary 1m
- Introduction 1m
- Review Strategy Interface 1m
- Brief Introduction to IndexedDB 2m
- Implementing the Remote Service 4m
- Overview the Local Service 2m
- Implementing Support for Null Values 2m
- IndexedDB Event Cycle 2m
- Implementing the dbModel 2m
- Implementing getByID 2m
- Implementing exists 1m
- Implementing save 4m
- Implementing getAll 1m
- Implementing delete 2m
- Summary 1m
- Introduction 1m
- Setting the Structure of the Service 2m
- Set Error Handlers 2m
- Open the Database 4m
- Wrapping Up Common Code 3m
- Wrapping Up Common Code (Continued) 1m
- Implementing getCount 2m
- Implementing getAll 2m
- Implementing insert 4m
- Implementing delete 1m
- Implementing update 2m
- Implementing getById 1m
- Implementing clear 1m
- Dealing With the Server 2m
- Demonstrating Current Code in a Debug Session 6m
- Summary 1m
- Introduction 1m
- Demo the Finished Product 2m
- Problem of Concurrency 2m
- Implementing the Synchronization Service 2m
- Service: Check Method 1m
- Service: Monitor Up/Down Methods 1m
- Service: Sync Method 2m
- Implementing the Controller 2m
- Controller: Sync Method 0m
- Controller: Check Method 1m
- Updating the Layout Markup 1m
- Step Through the Code 3m
- Summary 1m
Course FAQ
You will learn how to build an AngularJS app that can cache data on the client when there is no reliable connection available.
You will want to be familiar with ASP.NET MVC or another like platform: Node, Ruby, PHP, Java, etc.
We will be working with the offline.js library, the HTML5 app cache API, AngularJS, script files from NuGet, IndexedDB, Bootstrap, and other elements along the way.
We'll build an Angular offline app that recognizes when it's lost connection, still functions properly, and synchronizes data when a connection is reestablished.
This course is great for anyone developing apps that require an HTML5 offline mode.
About the author
Craig Shoemaker is a Senior Content Developer for Microsoft on the Azure Container Apps and Azure Static Web Apps teams. On some days he's building internal tools to keep Microsoft employees productive, and others days creating guidance used by hundreds of thousands of developers. Additionally, Craig is a best selling Pluralsight author and co-host of the Web Rush podcast. You can reach Craig on Twitter at @craigshoemaker or join the conversation at Web Rush https://webrush.io.