Next.js 에서 PWA 를 통한 웹푸시 설정하기

리액트로 시도..했었다..

환경 : 리액트

애초에 pwa 를 사용할것이라면 서비스워커가 포함된 템플릿을 설정해줘야함.

npx create-react-app test --template cra-template-pwa

🚨 만약 미리 설정을 하지않았다면?

18버전이 후 CRA 로 받더라도 service-worker 가 없으므로 인스톨을 해주어야 하는데

이미 프로젝트를 만든 상태라면 템플릿을 따로 추가할 방법이 없으니, pwa가 적용된 프로젝트를 새로 만들어 서비스워커 관련 코드를 복붙해주는게 제일 간단한 방법인듯 하다.

1. service-worker.js , serviceWorkerRegistration.js 그대로 복붙하여 기존프로젝트에 넣는다.

2. package.json 의 dependencies 에 아래의 항목 추가

		"workbox-background-sync": "^6.5.4",
    "workbox-broadcast-update": "^6.5.4",
    "workbox-cacheable-response": "^6.5.4",
    "workbox-core": "^6.5.4",
    "workbox-expiration": "^6.5.4",
    "workbox-google-analytics": "^6.5.4",
    "workbox-navigation-preload": "^6.5.4",
    "workbox-precaching": "^6.5.4",
    "workbox-range-requests": "^6.5.4",
    "workbox-routing": "^6.5.4",
    "workbox-strategies": "^6.5.4",
    "workbox-streams": "^6.5.4"

1. 기존 프로젝트에서 npm install

2. serviceWorkerRegistration.register() 를 추가한다.

🎄 PWA 를 위한 Next.js 환경 설치하기

npx create-next-app@latest 
//-> 13버전이므로 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 다운그레이드함
//-> 버전문제가 아니었던걸로.
yarn add next-pwa
//추가플러그인 사용시 설치. 나같은경우 설치는 했지만 결국 사용하지 않았다.
yarn add --dev next-compose-plugins

next-pwa

Next.js with PWA, powered by workbox.. Latest version: 5.6.0, last published: 3 months ago. Start using next-pwa in your project by running `npm i next-pwa`. There are 54 other projects in the npm registry using next-pwa.

https://www.npmjs.com/package/next-pwa

C:\USERS\{username}\NEXT-PWA
├─Pages
│  └─index.tsx
│  └─_app.tsx
│  └─_document.tsx
├─Public
│  └─Images
│  └─manifest.json
│  └─sw.js
│  └─sw.js.map
│  └─workbox.js
│  └─workbox.js.map
└─next.config.js

next.config.js

const withPWA = require('next-pwa')({
  dest: 'public'
  // disable: process.env.NODE_ENV === 'development',
  // register: true,
  // scope: '/app',
  // sw: 'service-worker.js',
  //...
})

module.exports = withPWA({
  // next.js config
})

manifest.json

PWA Manifest Generator | SimiCart

https://www.simicart.com/manifest-generator.html/

• Name : PWA의 이름

• Short name : 앱 이름을 표시할 공간이 충분하지 않을 때 나타나는 이름

• Display : homescreen icon을 통해 실행될 때 app 화면이 보여지는 형태
• browser : 일반 브라우저와 동일하게 보입니다.
• standalone : 다른 앱들처럼 최상단에 상태표시줄을 제외한 전체화면으로 보입니다.
• fullscreen : 상태표시줄도 제외한 전체화면으로 보여줍니다.(ex. 게임)
• minimul-ui : fullscreen과 비슷하지만 뒤로가기, 새로고침등 최소한의 영역만 제공합니다.(모바일 크롬 전용)

• Description : app의 description 정보

• Application Scope(=scope) : app 내에서 PWA 기능을 적용할 범위

• Start url : app이 최초 실행 될 때 load되는 file의 경로

• Background color : 스플래시 배경색

• Theme color : 전체적인 테마색

{
  "theme_color": "#57c9d1",
  "background_color": "#57c9d1",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "name": "\uc815\ud574\uc918\ub0b4\uc2dd\uc0ac",
  "short_name": "\uc815\ud574\uc918 \ub0b4\uc2dd\uc0ac",
  "description": "\uc2dd\uc0ac\uc815\ud558\uae30 \ud798\ub4dc\uc2dc\uc8e0? \uadf8\ub7f4\ub550 \uc815\ud574\uc918\ub0b4\uc2dd\uc0ac",
  "icons": [
    {
      "src": "images/icons/icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

파비콘 디렉토리생성

Favicon & App Icon Generator

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

https://www.favicon-generator.org/

ios 아이콘 메타태그

<link rel="apple-touch-icon" href="images/icons/icon-192x192.png"></link>
<meta name="theme_color" content="#57c9d1"></meta>

IOS 스플래시 메타태그

Online Splash Screen Generator - Apprene.com

Use our free online splash screen generator and create a beautiful splash screen for your Applications

https://apprene.com/splash-screen-generator-online

Appscope

To make your Progressive Web App even more native-like on iOS devices, you may add a custom splash screen that is displayed when users launch your app. This is a feature that has been documented in Apple's Safari Web Content Guide for a long time, but that has turned out to be more challenging to implement than they have made it seem.

https://appsco.pe/developer/splash-screens

메타태그 적용

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="ko">
      <Head>
        <meta name="theme-color" content="#57c9d1"/>
        <link rel="manifest" href="/manifest.json" />
        <link
          href="images/favicons/favicon-16x16.png"
          rel="icon"
          type="image/png"
          sizes="16x16"
        />
		      ...
        <link
          rel="apple-touch-startup-image"
          href="/images/splashscreens/ipadpro2_splash.png"
          media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"
        ></link>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

🎄 파이어베이스 환경설정

Sign in

https://console.firebase.google.com/u/0/