PWA(Progressive Web Apps) in NEXT JS

#🧐 사용

install

npm install next-pwa

next js로 만들어진 프로젝트가 있다는 가정하에 설치해줍니다.

next.config.js

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

const nextConfig = {
  pwa: {
    dest: 'public',
  },
  ...
};

module.exports = withPWA(nextConfig);

해당 파일에 pwa에 관한 설정을 추가해줍니다.

manifest.json

[PWA Manifest Generator | SimiCart](https://www.simicart.com/manifest-generator.html/)

Favicon & App Icon Generator

manifest.json 예시

앱 설치 시 보이게 될 아이콘과 제목 등을 표시할 정의 해줍니다.

next head

<Head>
    <meta
        name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#317EFB" />
</Head>

이전에 만들어둔 manifest 파일을 불러와줍니다.

크롬 주소창의 PWA 설치 아이콘

크롬에서 공유하기 왼쪽에 새로운 아이콘이 생기면 성공입니다.

#🤔 생각

최근엔 브라우저에서 마이크, 카메라, 파일, 블루투스 등등 이 접근 가능한 상황에서 웹을 앱으로 설치하여 사용한다는 것은 앱이 없는 서비스를 자주 이용하는 상황에 적합할 것 같다는 생각이 듭니다.

특히 구글과 애플의 인앱 결제 강제가 요구되는 상황에서 유리한 건가 싶습니다.

하지만 웹이긴 웹이라서 캐싱 이외에 미리 데이터를 설치해둔 상태에서 사용하지는 못하니 단점도 분명한 것 같습니다.

딱 앱 서비스가 없으면서 MAU가 높은 서비스에서 사용하면 큰 이익이 될 수 있을 것 같습니다.

참고: https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

PWA(Progressive Web Apps) in NEXT JS

#🧐 사용

#🤔 생각

댓글

추천 게시물