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.
Course info
Rating
(134)
Level
Intermediate
Updated
Feb 12, 2015
Duration
3h 48m
Table of contents
Course Introduction
Working Offline
Building a New Application
Implementing the List Page
Implementing Persistence Strategies
Using IndexedDB
Implementing the Edit Page
Synchronizing Offline Data
Implementing the Manifest File
Where to Go Next
Description
Course info
Rating
(134)
Level
Intermediate
Updated
Feb 12, 2015
Duration
3h 48m
Description

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.

About the author
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
HTML5 Fundamentals
Beginner
3h 47m
3 Mar 2017
jQuery: Getting Started
Beginner
1h 40m
3 Jun 2015
More courses by Craig Shoemaker
Section Introduction Transcripts
Section Introduction Transcripts

Working Offline
Hello and welcome back to HMTL5 offline apps with Angular, Index DB, and Bootstrap. This is Craig Shoemaker, and thanks for joining me as we cover some of the basic concepts surrounding building offline applications. In this module, we'll investigate what it means to be working in a disconnected state from the web. There's two aspects of working offline that you need to account for in your application, and the first is awareness of being offline, and the second is making files available while offline. For awareness, we're going to use the offline JS library, and it'll show how your pages can respond to changes in connectivity state. Beyond that we'll also take a look at the offline simulator, which makes it easy to simulate an offline state during development. This way, you'll be able to see on command how your pages will react when working offline. From there, we'll move on to covering the issues of availability and provide a quick overview of the application cache API.

Building a New Application
Hello and welcome back to HTML5 Offline Apps with Angular, IndexedDB, and Bootstrap. This is Craig Shoemaker and thanks for joining me as we cover some of the basic concepts surrounding building offline applications. In this module we'll start building up the basic structure of the application. We'll create a new ASP. NET MVC web API application and add in some 3rd party libraries. Along the way I'll show you a tip for managing a long series of script files that get added through NuGet and we'll finish off the module by fine tuning some of the aspects of the ASP. NET application and set up some cross-cutting concerns for the app. Once the new application is created, then we can start customizing it. There are a number of different libraries that we can add through NuGet and Bower and even one to add manually. Then we'll create a shell for the application by customizing the layout page and then add in images and scripts as needed. At the end of the module we'll configure and Angular application to expose some of the libraries included for injection into controllers and services. Alright, now that you have an idea of where we're headed, let's go ahead and get started by creating that application.

Implementing the List Page
Hello and welcome back to HTML5 Offline Apps with Angular, IndexDB, and Bootstrap. This is Craig Shoemaker and thanks for watching this course. Well, we're off to a running start now and in this module you learn to implement the Homes List page. Just as a reminder to where we're at in the course overall, once we implement the logic to display the homes, then we'll move on to the basis of the logic needed to persist the changes to the data in the application. Alright, well let's take a look at the specific tasks that we'll take care of in this module.

Implementing Persistence Strategies
Hello and welcome back to HTML5 Offline Apps with Angular, IndexDB, and Bootstrap. This is Craig Shoemaker and thanks again for joining me in this course. Now most of the Homes List implementation is set. We just to need to finish off the persistence service by implementing the concrete strategies for interfacing either with the server or the browser. Now, just as a reminder to where we are overall in the course, we just finished up implementing the basics for the list page and now we're implementing the concrete logic for the different persistence strategies for access to the client and the server databases. The tasks in this module will have us implementing the remote service, and if you've had some previous experience with Angular, then a lot of this code will be quite familiar to you. We'll review the concepts surrounding IndexedDB, so you'll have a solid perspective on how the in-browser database works, and then we'll implement the local service that will implement the contract for the persistence service on the client side. Ultimately the service will delegate the final persistence work all the way down to the local database and that logic is implemented in the next module. So now let's talk about the strategy interface needed for the different persistence services.

Using IndexedDB
Hello and welcome back to HTML5 Offline Apps with Angular, IndexedDB, and Bootstrap. This is Craig Shoemaker and in this module we'll turn our attention to working specifically with IndexedDB. The in-browser document database. To get a bird's eye view of where we're at in the course, we just completed implementing the persistence strategies. Writing data to the server was as easy as making some remote calls, but now to fully implement the persistence on the client, we need to implement the logic that interfaces directly with the browser's database. The tasks in this module will have us building the abstraction layer around an API that can get a little confusing at times. So the wrapper we build will make working with the database much easier. Then we'll take a step back and see all the code we've implemented up until this point, working together by setting some break points and seeing the data flow through the system. Alright, well let's go ahead and get started building up that module that sits on top of IndexedDB.

Implementing the Edit Page
Hello and welcome back to HTML5 Offline Apps with Angular, IndexedDB, and Bootstrap. This is Craig Shoemaker and in this module we'll be building the add and edit screen so we can begin entering data into the system. Now you'll notice that the code is beginning to slim down now that we've implemented a number of the critical services up to this point, so now we can begin using them to save data in the appropriate spot, whether that's on the client or on the server. So in context of the full course, here we are implementing the edit screen and we'll continue to work on synchronizing locally saved data to the server in the next module. The tasks in this module will have us adding the markup for the edit page, and then implementing the edit controller, which again, makes heavy use of the services already created in the application. Then we'll see it all working together by stepping through the code in a debug session. Okay, let's go ahead and get going.

Synchronizing Offline Data
Hello and welcome back to HTML5 Offline Apps with Angular, IndexedDB, and Bootstrap. This is Craig Shoemaker and in this module we'll discuss dealing with the problem of concurrency and synchronizing offline data. Now we're nearing the end of the course, so after the data is synchronized, we can look at making sure the files are available in an offline context. But for now, we need to take a look at the final product of what we're implementing in this module, then we'll talk about the problem of concurrency from a high level. And then we'll turn our attention to the code and being by implementing the service required to synchronize data between the client and the server and its associated controller and then the visual affordances for the synchronization feature that needs to be available on every page of the site. So we'll update the layout page with the markup required for the sync feature. And finally, we'll step through the code so you can see it all working together. Okay, let's go ahead and get started.

Implementing the Manifest File
Hello and welcome once again to HTML5 Offline Apps with Angular, IndexedDB, and Bootstrap. This is Craig Shoemaker and we'll wrap up the implementation of our application by building up the manifest file so Coded Homes is available for offline use. So this is the last implementation step needed to complete the application and in this module we'll start off by taking a look at the final result, review a few offline concepts, and then we'll take a peek at the manifest controller since we originally implemented this in an earlier module in the course. Then we'll implement the manifest file to make the application available offline. And along the way I'll show you a shortcut for making your life a little bit easier while working with the manifest file during development. So that's an overview of the module. Let's go ahead and get going.

Where to Go Next
Well welcome to the final module in this course. This once again is Craig Shoemaker and here we'll discuss a few new places for you to go now that you're done implementing Coded Homes as an HTML5 offline application using Angular, IndexedDB, and Bootstrap. We've covered a lot of ground in the last few hours. So let's talk about ways you could continue to enrich the application in its current state. So in the next clip we'll talk about some of the high level concerns for the app that you could continue to work on.