Creating Offline-first Mobile Apps with HTML5

This course will teach you how to build offline-first mobile apps using HTML5, offline storage, and service workers.
Course info
Rating
(19)
Level
Beginner
Updated
Apr 24, 2017
Duration
2h 35m
Table of contents
Description
Course info
Rating
(19)
Level
Beginner
Updated
Apr 24, 2017
Duration
2h 35m
Description

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.

About the author
About the author

Chris is a prolific author, trainer, speaker, and web developer. His company, WatzThis?, is dedicated to finding better ways to teach computer and programming skills to beginners.

More from the author
Test-driven Development Using React
Beginner
1h 54m
Jun 8, 2018
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Chris Minnick and welcome to my course, Offline-first Mobile Apps with HTML5. I'm a CEO at Watzthis and I've been a web developer since about 1995. Mobile devices and web apps have gotten far faster and more capable in recent years. But mobile data connections continue to be spotty and unpredictable for many people. An app that breaks when it's not connected to the internet is an app that's guaranteed to be broken fairly often. In this course, we're going to explore the tools and techniques that are currently available for making websites and web apps available and functional, even when you're not connected to the internet. Some of the major topics we will cover include, designing a mobile app for offline first, converting a legacy web app to an offline mobile app, using offline caching with service workers and storing data offline with IndexedDB. By the end of this course, you'll know how to build an app that can be used offline and can then save its data to a remote web server when a connection to the internet is available. Before beginning this course, you should be familiar with HTML, CSS and JavaScript. You don't need to be an expert in any of these, but some familiarity and experience with them will be helpful. I hope you'll join me on this journey to learn Offline-first Mobile Development with HTML5 at Pluralsight.

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 Available Offline
Welcome to Making It Available Offline. In this module, you'll learn how to detect when a user is online, you'll learn about offline caching, and we'll talk about how you can use Service Workers to install your HTML 5 web app. Now that our app is optimized for mobile devices, the next step is to make it work without an internet connection. The basic technique for doing this is to tell the browser to cache certain files required by the application the first time it loads. When done correctly, this works very much like the installation process for a native application. The original way to do offline caching for HTML 5 was by using a technology called the application cache, or AppCache. AppCache was great and quite simple, in theory. However, it didn't always work as intended in practice, and is no longer a recommended way to do offline caching. The new and preferred way to do offline caching is called Service Workers. A Service Worker is a script that gets run in the background, separate from your web page. Service Workers can give web apps access to features such as push notifications, background syncing, and managing the offline experience of a web app. Remember, Service Workers are completely separate from your app, they must be installed or registered from within your site's JavaScript. Now, Service Workers are very new and still experimental browser technology. It's currently supported by Google Chrome and Mozilla Firefox. Since our app will be used as an internal application, we can tell our users which browser to use. So, we don't have to worry about supporting old browsers, or browsers that don't get feature support for Service Workers. We're going to use Google Chrome, but we'll also test with Firefox. Before we get to Service Workers, we're going to implement a simple script that will change a status message in our app, depending on the online or offline status of the user's device. I'll show you how to do that in the next clip.

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.

Storing Images Offline
In this module, you'll learn how to store images in IndexedDB. So far, we've only been storing text and numbers in the local database. The intelligent inspection applications also requires pictures to be saved, however. Photographs are usually made up of binary data as opposed to text data. In order to store images in the database, we need to store them as raw, binary data. The way to store raw data in a database is as binary large objects, also known as BLOBs. Retrieving BLOBs and storing BLOBs in an IndexedDB database is a little more complicated than simply storing text. But not that much more. Here's a quick summary of what you'll learn in this module. First, we'll talk about the file API and how to get files from a computer or device and into a web browser. Next, you'll learn how to work with binary data such as images in Javascript. Then, you'll write Javascript to save files from a web browser into an IndexedDB database. And then finally, we'll retrieve binary image files from an IndexedDB database and use them on a web page. So let's get started.