2023. 5. 23

Next 프로젝트에서 PWA 앱 동시배포를 위한 세팅을 했다.

react native의 Expo CLI 이용해서 배포하는 방법도 있으나

가장 간단한 방법이 PWA를 통한 방법인 것 같았다.

PWA 를 위한 걸음

먼저 진행하던 next 프로젝트에서

1) next-pwa 패키지 설치

yarn add next-pwa

2) next.config.js 에서 next-pwa 연결

/** @type {import('next').NextConfig} */
const nextConfig = {
 // 기존
};

const withPWA = require("next-pwa")({
  pwa: {
    dest: "public",
    register: true,
    skipWaitings: true,
    disabled: process.env.NODE_ENV === "development",
    sw: "sw.js",
  },
});

module.exports = [nextConfig, withPWA];

3) yarn build 로 프로젝트를 빌드하면 public 폴더에 "workbox-* .js"와 "sw.js(service worker)"가 생성된다.

빌드하지 않을 경우 직접 sw.js 만들어줄 수 있다.

4) PWA 에 필수인 manifest.json 생성

{
  "name": "holidays",
  "short_name": "holidays",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "start_url": "/",
  "icons": [
    {
      "src": "/mainPage/hobbies.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/mainPage/hobbies.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

내 프로젝트에는 간단하게 이렇게만 적용해 보았다.
lighthouse 설정 가이드

5) PWA에 필수적인 meta tags 작성
_ document.tsx를 사용하지 않았기 때문에 seo.config.js에서 meta/link 태그를 작성했다.

export default {
  titleTemplate: "%s | holidays",
  additionalLinkTags: [
    {
      rel: "icon",
      href: "/favicon.ico",
    },
    {
      rel: "manifest",
      href: "/manifest.json",
    },
    // ...
  ],
  additionalMetaTags: [
    {
      name: "theme-color",
      content: "#FFFFFF",
    },
    // ...
  ],
  openGraph: {
    type: "website",
    site_name: "holidays",
    images: [{ url: "https://example.com/example_square_image.png" }],
  },
  // Dynamic Values
  title: "Page holidays", // 실제 페이지 제목
  description: "Page Description", // 페이지 설명
};

6) 이제 프로젝트를 build하고 start 하면 크롬 브라우저 주소창 오른쪽에 설치 아이콘이 생기는데 여기부터는 나도 아직 안해봤다.

혹시 localhost에 해당하는 service worker를 unregister 해두었다면 설치 아이콘이 생기지 않을텐데(ERROR: no matching service worker detected),
아래의 코드를 실행시켜 수동으로 service worker를 재등록하여 해결한다.

useEffect(() => {
require('next-pwa/register');
}, []);

솔직히 react-native 의 대안

으로 선택했고 iOS와 같은 경우 제약이 크지만 구글이 PWA를 강하게 밀고 있고 애플도 더욱 수용하려는 자세를 보이고 있으니 앞으로는 PWA가 native를 앞지를 날이 오지 않을까 싶기도 하다.