Next.js 애플리케이션에 서비스 작업자 추가

Service Worker(프로그레시브 웹 애플리케이션의 두뇌) 소개부터 시작하겠습니다. 이미 모든 것을 알고 있다면 next.js 부분(섹션 2)으로 건너뛰세요.

섹션 1. PWA 및 SW 소개

요즘 사용자는 평균 월 평균 0개의 모바일 애플리케이션을 설치합니다. 이는 사용자가 모바일 장치에 기본 애플리케이션을 덜 설치한다는 것을 의미합니다. 웹은 타협하지 않고 사용자가 설치하도록 요구하지 않으면서 기본 애플리케이션보다 3배 이상 도달할 수 있기 때문에 완벽한 솔루션은 사용자가 웹 브라우저를 통해 액세스할 수 있고 장치에 설치하려는 경우(만일 그렇지 않은 경우)입니다. 그들은 항상 브라우저로 액세스할 수 있습니다). 이것이 프로그레시브 웹 애플리케이션(Google에서 도입)이 달성하려는 것입니다. 오프라인 작업, 푸시 알림 수신, 우수한 성능 등 기본 애플리케이션처럼 작동하려는 웹 애플리케이션일 뿐입니다.

이 새로운 개념의 두뇌는 웹 애플리케이션에서 프록시 역할을 하는 자바스크립트 파일인 서비스 작업자입니다. 요청을 가로채고(캐시하고) 이벤트를 수신하고 이벤트가 발생하면 조치를 취할 수 있습니다. 예를 들어 서비스 워커가 설치될 때 특정 자산을 캐시하고 필요할 때마다 해당 자산을 가져오기 위해 이동하는 대신 서비스 워커를 통해 직접 제공할 수 있습니다.

https://blog.clairvoyantsoft.com/service-workers-in-javascript-simple-demo-app-81efcdf2f2c4?gi=abbe01a65fba의 이 이미지는 서비스 작업자가 하는 일을 잘 설명합니다.

섹션 2. next.js에 서비스 워커 추가

지난 몇 년 동안 서비스 작업자를 next.js 애플리케이션에 추가하려면 next-pwa(https://github.com/shadowwalker/next-pwa) 또는 next-offline(https://github.com/hanford/next-offline)과 같은 타사 플러그인을 사용하거나 사용자 지정 서버를 사용해야 했습니다. 잘못 생각하지 마세요 next-pwa와 next-offline은 훌륭한 플러그인이지만 특정 상황에서는 그러한 추상화를 원하지/필요하지 않습니다.

약 1년 전에 Next.js 9.1은 도메인의 루트에 매핑될 파일을 저장할 수 있는 디렉토리 지원public을 도입했습니다. 예를 들어, http://localhost:3000에서 로컬로 응용 프로그램을 실행하고 sw.js(public) 내부에 public/sw.js라는 파일을 저장하면 http://localhost:3000/sw.js에서 사용할 수 있습니다. 따라서 애플리케이션에서 이를 참조하고 사용자 지정 서버 없이 서비스 작업자를 설치할 수 있습니다.

가장 간단한 서비스 작업자 파일은 다음과 같습니다.

//public/sw.js
self.addEventListener("install", function (event) {
  console.log("Hello world from the Service Worker 🤙");
});

물론 이 서비스 워커는 아무 작업도 하지 않고 설치된 경우에만 기록합니다. 서비스 워커 기능에 대한 더 많은 예는 여기에서 확인하세요. https://serviceworke.rs/

서비스 워커를 배치한 후에는 설치해야 하며 페이지가 마운트될 때 이를 수행할 수 있습니다. Next.js를 사용하면 동일한 폴더 내에 파일pages을 생성하여 _app.js 디렉토리 내의 모든 페이지와 관련된 사용자 정의 루트 문서를 변경할 수 있습니다.

//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

그리고 그게 다야! 서비스 워커는 웹사이트를 처음 방문할 때 next.js 애플리케이션에 설치됩니다.

소스 코드: https://github.com/jose-donato/with-service-worker
데모(향후 SW 기능 추가 예정): https://with-service-worker.vercel.app/

질문이 있으면 저에게 물어보세요. 저에 대해 더 알고 싶으시면 https://jose-donato.me을 방문하세요.