Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Register a Service Worker in Production

    Alex Jover MoralesAlex Jover Morales

    Having a Service Worker created is not enough, we still need to register it into the browser to make it work.

    I’ll show you in this lesson how to register a service worker in the app.

    vueVue.js
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 To make it simple, I'm going to register the service worker in the main service file. We have to use the Navigator API, which has a service worker property with a register method. The register method takes the URL of the service worker, but not the path to the file.

    00:21 Just as you would do it if you want to open the service worker from the browser, the register method returns a promise. We can do them, and check if the service worker has been registered. Let's print a console log -- service worker is registered.

    00:40 There are some cases though where we don't want to register a service worker. For example, we have to check if the browser has support for service workers, by checking that the service worker property from Navigator exists.

    00:55 Let's create a variable for that condition, shouldServiceWorker. First, we have to check that the service worker property exists in Navigator, so we can use it to register the service worker conditionally. We only generate the service worker in production, when we run npm run build.

    01:20 In fact, the service worker webpack plugin doesn't work very well with the webpack dev server, so there is no point in trying to register the service worker in development mode. Let's add the other condition to register it only in production.

    01:34 Let's say production is equal to process.env.node_env equal to production. Then say shouldServiceWorker register when the service worker is in Navigator and is in production mode. In order to try the service worker registration, since we are using it only in product, we have to run npm run build.

    02:06 Then we will need some kind of http server, so I installed http server from npm. Run this, and then let's reload the URL.

    02:22 We see in the console, service worker registered. If we go to the application, we see here this service worker has been registered. We can also check in the cache storage that this entry has been created and these files have been cached.

    02:43 The application should be working offline. In order to try that, let's upload this application somewhere, for example by using search. Then I'm going to open this URL in the browser. Remember that service workers only works under https.

    03:11 Now our files have been cached, so if I go and turn off the WiFi and I reload here, it's still working. The only thing is, the images haven't been cached yet, but we'll see that later.

    Discuss

    Discuss