PWA(Progressive Web Apps) in NEXT JS

프론트엔드

PWA(Progressive Web Apps) in NEXT JS

유도혁 2022. 7. 3. 04:05

🧐 사용

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

PWA Manifest Generator Automatically generate a fully functional web app manifest along with size-optimized icons for your PWA Web app manifest (i.e. manifest.json) is a JSON file that provides the necessary metadata for your Progressive Web App. With a

www.simicart.com

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

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

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 파일을 불러와줍니다.

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

🤔 생각

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

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

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

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

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

저작자표시

'프론트엔드' 카테고리의 다른 글

무한 슬라이드의 개념 (0)	2022.03.01
그림으로 설명하는 Oauth (0)	2022.02.09
tailwind css (0)	2022.02.07
CSS를 활용한 웹 디펜스 게임 (0)	2020.06.15

현재글PWA(Progressive Web Apps) in NEXT JS

생각과 기록