Learn to write real-world mobile web apps that are functional and performant even when internet connectivity is spotty or absent. In this course, Creating Offline-first Mobile Apps with HTML5, you'll explore tools and techniques that are currently available for making websites and web apps available. First, you'll explore how to design mobile apps for offline. Next, you'll discover how to convert a legacy web app to an offline mobile app. Then, you'll jump into using offline caching with service workers. Finally, you'll learn how to store data offline with indexedDB.
Mobilizing the UI Hi, welcome back. In the last module, we took a first look at the Intelligent Inspections web app and built a prototype for the new offline first mobile app that we'll be creating for them. It's very common with mobile and web development projects that the client will have an existing application that meets many of their needs, but it needs to be upgraded to work on mobile devices. Today, that's the case with Intelligent Inspections Inc. But, as you've seen, there's a catch. They not only need for their application to work on mobile devices, it also needs to work without an internet connection. In this module, we'll focus on making the existing application work on mobile devices. To do this, we'll be tearing apart the old PHP and HTML code and rewriting it as responsible HTML5 code. So continue on to the next clip and we'll take a look at the existing PHP based application.
Making It Store Offline Data In this module, we'll write the code to save the data from the new inspection form into a local database rather than submitting to the server. Because we're creating an off-line first app, the strategy our application we'll employ for data storage is to save everything on a local database by default. Whether the user is online or offline. I'll introduce you to the IndexedDB and we'll talk about how to use IndexedDB to save the text of your form into a database. And then we'll look at how to retrieve data from a database. Modern web browsers support several ways to store data on the users computer. The oldest and most basic of these is with cookies. Cookies are very limited in how much data they can store and they transmit all of their data over the network with every single network request. Which makes them a very bad choice for storing anything more than a very small amount of data. Another option for storing data in a browser is called local storage. Local storage gives you a better way to store name value pairs and it can handle larger amounts of data than cookies. But local storage has some drawbacks as well. The type of database we're going to using is IndexedDB. Compared to local storage, IndexedDB has some distinct advantages. First of all, it stores objects rather than text. This will allow us to store images in our database. Secondly, unlike local storage, IndexedDB is asynchronous. So it doesn't block other code from running when it's completing database inserts and updates. IndexedDB also features pretty much unlimited storage. Whereas local storage has a hard limit of five megabytes. The drawback to IndexedDB is that it's much more complicated than local storage. I'll talk about ways that you can reduce this complexity in upcoming clips. But first, let's take a closer look at IndexedDB.