Breaking News: Grepper is joining You.com. Read the official announcement!

how to register a service worker in nextjs

Amr Hassan answered on February 19, 2023 Popularity 9/10 Helpfulness 4/10

answer how to register a service worker in nextjs

how to register a service worker in nextjs

Comment

How to add a service worker to next.js

//after placing your service worker file in the public folder
//Then add the below snippet to the _app.js folder

//pages/_app.js
import { useEffect } from "react"
function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
       navigator.serviceWorker.register("/sw.js").then(
          function (registration) {
            console.log("Service Worker registration successful with scope: ", registration.scope);
          },
          function (err) {
            console.log("Service Worker registration failed: ", err);
          }
        );
      });
    }
  }, [])

  return <Component {...pageProps} />
}

export default MyApp

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: dev.to

Tags: javascript service-worker

Link to this answer
Share Copy Link

Contributed on Feb 19 2023

Amr Hassan

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

how to register a service worker in nextjs

Contents

More Related Answers

how to register a service worker in nextjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.