Next.js PWA 만들기: 오프라인 기능 구현하기

작성일 : 2024-07-16

Next.js PWA 만들기: 오프라인 기능 구현하기

Progressive Web App(PWA)은 차세대 웹 애플리케이션의 핵심으로, 오프라인 기능 및 빠른 로딩 속도를 제공합니다. Next.js와 Service Worker를 활용하여 PWA를 만들어보겠습니다. 이 글에서는 Next.js 환경을 설정하고, PWA로 변환하는 과정, 그리고 오프라인 기능을 구현하는 방법까지 다룹니다.

Next.js 환경 설정

Next.js 프로젝트를 시작하기 위해 먼저 Node.js와 npm이 설치되어 있어야 합니다. 필요한 패키지를 설치하고 초기 프로젝트를 설정하는 단계부터 시작해 봅시다.


bash
# Next.js 프로젝트 생성
npx create-next-app my-pwa-app
# 필요한 패키지 이동
cd my-pwa-app

# PWA 관련 패키지 설치
npm install next-pwa

프로젝트 구조가 준비되었으니, 이제 next.config.js 파일을 열어 PWA 설정을 추가하겠습니다.


javascript
const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
  },
});

이 설정은 next-pwa가 PWA를 지원하도록 만들고, 서비스 워커를 public 디렉토리에 저장하도록 합니다. 이제 이 설정을 적용한 후 필요한 파일들을 추가해보겠습니다.

PWA 기본 파일 추가

PWA가 올바르게 작동하려면 몇 가지 필수 파일이 필요합니다: manifest.json과 서비스 워커 파일입니다. 먼저 public 디렉토리에 manifest.json 파일을 생성합니다.


json
{
  "short_name": "MyPWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#000000"
}

public 디렉토리에 PWA 아이콘 이미지(icon-192x192.png, icon-512x512.png)도 추가합니다. 이로써 PWA의 기본 설정이 완료되었습니다. 다음은 서비스 워커 파일(service-worker.js)을 추가합니다.

서비스 워커 파일은 캐시 전략을 정의하고, 오프라인 기능을 제공하는 핵심 역할을 합니다. 파일은 public 디렉토리에 생성하며, 다음과 같이 작성합니다.


javascript
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-cache-v1').then((cache) => {
      return cache.addAll([
        '/',
        '/_next/static/css/styles.chunk.css',
        '/icon-192x192.png',
        '/icon-512x512.png'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

이제 Next.js 서버를 실행하고 PWA 설치를 확인할 수 있습니다.


bash
npm run dev

브라우저에서 애플리케이션을 열고 개발자 도구를 통해 'Application' 탭을 열어 PWA 상태를 확인할 수 있습니다.

오프라인 기능 추가 및 테스트

서비스 워커를 설정한 후, 오프라인 기능을 테스트해 보겠습니다. caches.addAll() 메소드로 미리 지정한 파일들이 캐싱되기 때문에, 네트워크가 없는 상황에서도 해당 파일들을 사용하여 애플리케이션을 실행할 수 있습니다. 브라우저 개발자 도구를 이용해서 네트워크를 'Offline' 상태로 전환하여 확인해 보세요.


javascript
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    }).catch(function() {
      return caches.match('/offline.html');
    })
  );
});

오프라인 상황에서 표시할 offline.html 파일을 public 디렉토리에 추가합니다.


html
<!-- public/offline.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offline</title>
  </head>
  <body>
    <h1>Offline</h1>
    <p>현재 네트워크 연결이 끊어졌습니다. 인터넷 연결을 확인하고 다시 시도해주세요.</p>
  </body>
</html>

이제 모든 설정이 완료되었습니다. npm run dev 명령어로 서버를 다시 실행하고, 오프라인 상태에서 offline.html 파일이 로드되는지 확인해 보세요.

결론

이제 Next.js로 기본적인 PWA를 설정하고 오프라인 기능을 구현하는 방법을 알았습니다. 이를 통해 사용자들이 네트워크 상태와 상관없이 애플리케이션을 원활하게 사용할 수 있습니다. 앞으로 더 복잡한 캐시 전략과 푸시 알림 등 추가 기능을 적용하여 보다 완성도 높은 PWA를 구현해보세요.