yarn add @ducanh2912/next-pwa

next-pwa 대신 위 라이브러리를 설치한 이유는 기존의 next-pwa는 CommonJS 형식을 지원하고, 우리는 module이기 때문에, require문을 쓸 수 없기 때문이다.

/** @type {import('next').NextConfig} */

import withPWAInit from '@ducanh2912/next-pwa';

const withPWA = withPWAInit({
  dest: 'public',
});

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'jasumin.s3.ap-northeast-2.amazonaws.com',
      },
    ],
  },
};

export default withPWA(nextConfig);

manifest.json을 만들기 편한 사이트

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

1. 위 사이트에서 manifest를 다운로드하면 .zip파일이 다운로드 되는데, 거기서 manifest.webmanifest 의 확장자를 json으로 변경하고 app 경로의 최상단에 넣는다.

2. .zip 파일을 압축 해제하면 512*512 크기와 같은 이미지 파일 4개를 public/icons/ 밑에 넣는다. (어플리케이션 로고용)

3. yarn build 후 public 아래 sw.js, workbox.js 생긴 거 확인하고, yarn dev로 크롬 사이트에 들어가면 데스크탑 어플리케이션 설치 유도 알림이 나온다.

4. 클릭해서 들어가기