Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
by
Lessons:8Length:43 minutes

Next lesson playing in 5 seconds

Cancel

Free Preview: Simple Service Workers for Offline Web Pages

Welcome to the Course

00:27
  • Overview
  • Transcript

The awesome Service Worker API gives you a way to create fallbacks for your web pages so that when your visitors lose their connection, either while going through a tunnel or for extended periods of time, they can still see the resources you provide for them.

In this short course, you’ll learn how to create three different types of service workers that will give you three different ways to create offline websites.

So let’s get started on Simple Service Workers for Offline Web Pages. I’ll see you in the first lesson!

Going Offline

Go further and learn the latest strategies in offline pages with Jeremy Keith and A Book Apart in Going Offline.

1. Introduction

1.1 Welcome to the Course

The awesome Service Worker API gives you a way to create fallbacks for your web pages. So that when your visitors lose their connection, be it just going through a tunnel or for extended periods of time, they can still see the resources that you provide for them. In this short course, you'll learn how to create three different types of Service Workers that will give you three different ways to create offline websites. So let's get started on Simple Service Workers for Offline Web Pages. I'll see you in the first lesson.

2. Introducing Service Workers

2.1 What Is a Service Worker?

Hey, this is Kezz. Welcome to Simple Service Workers for Offline Web Pages. We're gonna kick off this course with a quick overview of what service workers actually are, how they work and what they can do for you. All right, so first up, what is a service worker? So, a service worker is a script, it's written in Java Script. And what you can do is use your main site, so your regular online, noble site to register script with the browser. Once you've registered it, that script is gonna sit in the browser and it's gonna be ready for use. And it doesn't matter if your visitor is online or offline, that script is still gonna be available. And it's gonna be able to operate regardless of whether there's an Internet connection or not. So this has all kinds of implications and people are using service workers for creating things like off line web applications, but for us, what we're looking at is using it to load content for your visitors, if their connection drops. So you have a visitor that's looking at your site and they go through a train tunnel, or they go into an area that has no service. For one reason or another they lose their Internet connection and using your service worker, you can make sure that they still have something to look at and enjoy on your website. So how does a service worker actually work? Normally, when you're in a browser you've a pretty simple process. You just enter URL, the browser fetches that site from the network and returns it to you. But when you have a service worker registered and installed, it adds an intermediary step. So now when a URL is entered, instead of just directly getting the site returned from the network, the service worker jumps in the middle and intercepts that request. And then it's the service worker that decides what happens with that request. The service worker decides if an online version should be shown. The service worker decides if a network version should be shown. It's now completely up to the service worker to decide what happens as a result of that URL being entered. And it's through this that we can detect if a user is offline and give them some content to look at that we've prepared in advance for them. As you can imagine, a script that can jump in front of a request for a website and give you totally different content if it wants to, that could be a potential security risk if it is not handled properly. So for that reason, you can only use a service worker over https, or for development purposes you can use it on a local host. Service workers right now are supported in all major browsers as you can see here and cannot use, however at the moment, they're most easily developed using Chrome or Chromium. Because both of those browsers have some really good dev tools that are very, very helpful when you're dealing with service workers. And you'll see why in subsequent lessons. All right, so those are all the essentials that you need to kick off. Now we're gonna get started with our coding. In the next lesson, we're gonna go through how you can use your main website to register a service worker with the browser. How you can check to make sure that your service worker is successfully registered. And while we're at it, we're gonna have a look at a couple of little things that might trip you up as you're coding, so we'll make sure that they don't catch you by surprise. So we'll see in the next lesson.