PWA (Progressive Web App) : 웹 기술로 만드는 앱
스마트폰의 시대에서 네이티브 앱의 사용이 많아지면서, 웹 페이지 뿐만 아니라 네이티브 앱까지 같이 사용할 수 있도록 만든 웹앱.
1) 장점
- 다양한 앱스토어에 출시하기 위해 별도의 프로세스를 거치지 않아도 된다.
- 일반 웹 기술을 활용해서 만들 수 있다.
- 일반적으로 개발비용이 더 저렴하다
- 기본적으로 반응형이기 때문에, 다양한 화면 크기에도 잘 동작한다.
- 오프라인에서도 작동한다.
- 검색엔진을 통해 찾을 수 있다.
- 푸시알림을 통해 사용자들의 관심을 끌 수 있다.
PWA가 웹앱이지만 기본적으로 웹이 중심.
2) 설정 시 해야할 작업 3가지
- 보안연결(HTTPS) : 신뢰할 수 있는 연결상태에서만 동작하기 때문에 보안 연결을 통해 서비스 제공
- 서비스워커: 백그라운드에서 실행되는 스크립트, 네트워크와 관련된 요청의 처리를 도와줌
- 매니페스트파일(설정파일): JSON파일, 기능하는 방식에 대한 정보들이 포함됨. 여기서 PWA의 이름, 설명, 아이콘, 색상을 지정할 수 있음
적용방법
1. Next.js 세팅
2. next-pwa 패키지 설치 - yarn add next-pwa
3. src > app > manifest.ts파일 생성
import type { MetadataRoute } from 'next';
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Next.js PWA',
short_name: 'NextPWA',
description: 'A Progressive Web App built with Next.js',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
theme_color: '#000000',
icons: [
{
src: '/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: '/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
};
}
icon 이미지는 src 폴더와 같은 위치에 public 폴더를 만들고 그 안에 넣어준다.
4. Metadata 적용
파비콘 생성사이트에서 이미지를 넣어 생성하고 Next 버튼을 클릭하면
4번 내용에서 레이아웃 파일에서 <head>태그 안에 어떤 <Link>태그를 넣어야하는지 보여준다. 이미지 파일형식에 따라 다르니까 이걸 보고 그에 맞는 형식으로 입력한다.
우리 코드에서는 svg파일이라 이렇게 입력했다.
5. 빌드 & 실행
yarn build && yarn start 후에 나타나는 'http://localhost:3000'페이지를 접속한다.
아래 사진처럼 빨간 동그라미 부분을 클릭하면 앱을 설치할 수 있는 아이콘이 url 표시줄에 보인다. 설치 후 '열기'를 클릭하면 웹앱에 접속 가능하고 잘 작동되는지 확인할 수 있다.
참고자료1 - [Next.js] 1. PWA 프로젝트 세팅
참고자료2 - Next.js 프로젝트에 PWA 기술 적용하기
24.07.15 프론트엔드 개발 첫 걸음