Building Offline Web Apps with Service Worker

Service Workers are the most significant addition to the web platform since the introduction of AJAX. This course will show you why, and help you leverage the power of Service Workers to make your web apps work without an internet connection.

Course info

Rating

(116)

Level

Beginner

Updated

Jan 25, 2017

Duration

2h 53m

Description

The web is built on one fundamental assumption: everyone has a stable internet connection, all the time – but that's certainly not true. In this course, Building Offline Web Apps with Service Worker, you'll learn everything you need to break this assumption. First, you'll learn about Service Workers and the new Caching API. Then, you'll discover prerequisite technologies like JavaScript promises and the Fetch API. Finally, you'll explore how to leverage the new cache API defined in the Service Worker specification. When you've finished with this course, you'll know everything you need to take you current web application to places it's never been before, places without internet connection.

Section Introduction Transcripts

Course OverviewHi everyone. My name is Nik Molnar, and welcome to my course, Building offline Web Apps with Service Worker. I'm a program manager at Microsoft, and a long time web developer and web enthusiast. Service Workers are the most important technological advancement to the web since the invention of Ajax over 15 years ago. They're our cornerstone for creating web experiences that rival native applications in both performance and capability. This course is perfect for anyone who has a web application that they'd like to make available in offline scenarios, as well as have a basic working knowledge of JavaScript. Anything else that you need to know will be presented in the course. Some of the major topics we'll cover include, Asynchrony in JavaScript with promises, making network requests with a new fetch API, how to register, install, and activate a Service Worker, how to leverage the new cache API that was defined in the Service Worker specification, and some common caching patterns and strategies, along with when it's best to apply each one of them. By the end of this course you'll be able to enhance any existing web application with Service Workers, so that the site can still be used even when your users are offline. Before beginning the course you should be familiar with basic JavaScript programming and web development. I hope you will join me in this journey to learn Service Workers with the Building Offline Web Apps with Service Workers course at Pluralsight.

Leveraging the Cache APIIn the last module we successfully registered, installed, and activated a Service Worker, and we were able to serve a very simple offline experience, but the one thing that was really lacking from that first Service Worker of our was the ability to store files and content into some safe place that the user can access even while they're offline. Well that's where the Cache API comes in, and it's what we're going to be spending the rest of this module looking at. The Cache API is defined as a part of the Service Worker specification itself. Now that can be a little confusing, but it's important to note that the Cache API is not specific to Service Workers. In fact, they can be used on both the worker object inside of a Service Worker or on the window object inside of the normal scripting environment that you are probably used to already, and like Fetch, it's also defined as a living standard, which means it's going to be updated and changed over time, so expect things to get better as we go. The Cache API is available in all the places you'd expect it to be. Because it's part of the Service Worker specification, its support looks very similar to the browser support for Service Worker itself. You'll find it in Chrome since version 46, Firefox since 44, and Opera since 33. It's currently in development in Edge, and not available in IE or Safari. Let's dive into the Cache API and see how it works.

Common Patterns & PracticesWith the fundamentals of caching under our belts I wanted to take some time to cover common patterns and practices that you can use to make creating Service Workers much easier. The first set of things that we'll look into is some common caching patterns. I'm going to highlight five key patterns, and I'll tell you how they work, and when you might want to use them, but there are certainly a lot of other caching patterns available as well. In fact, both Mozilla on the MDN network, and Google on their own developer network have caching pattern catalogs called the Service Worker Cookbook, and the Offline Cookbook respectively. I've included links to both of those cookbooks in the course notes that you'll get at the end of this module, so let's dive in.