PWA 적용해보기

기존에 만들던 프로젝트에 적용을 해보기위해서 시작을 했습니다.

PWA란 무엇일까요?

프로그레시브 웹 앱이라고 하며, 웹과 앱의 기능 모두이 이점을 갖도록 수 많은 웹의 특정기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

PWA를 구성하는 주요 요소

• 보안 연결
• Service Workers
  • Service workers는 네트워크의 상태에 상관없이 유저에게 즉각적이고 안정적인 화면을 제공해줍니다.
• manifest file
  • PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있는 것입니다. PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있습니다.
  이정도로 알아보고 적용을 한번 해볼게요

코드

//menifest.json
{
"name": "TraviaryApp", // 앱의 이름을 정한다.
"short_name": "Traviary",
"start_url": "",
"display": "standalone",
"background_color": "#F8F7DA",![](https://velog.velcdn.com/images/yangth/post/7a41cd97-7095-4e35-bd18-e76cc7eadaf1/image.png)

"theme_color": "#8C383A",
"description": "PWA with Vite.js, React.js and TypeScript",
"icons": [
  {
    "src": "icons/palm-tree.ico",
    "sizes": "64x64",
    "type": "image/x-icon"
  },
  {
    "src": "icons/palm-tree(256x256).png",
    "type": "image/png",
    "sizes": "256x256"
  },
  {
    "src": "icons/palm-tree(512x512).png",
    "type": "image/png",
    "sizes": "512x512"
  },
  {
    "src": "icons/palm-tree(512x512).png",
    "type": "image/png",
    "sizes": "512x512"
  }
]
} /// 아이콘들

	
// sw.js (service Worker)

// eslint-disable-next-line no-unused-vars
self.addEventListener("install", (e) => {
  console.log("[Service Worker] installed")
}); 
// install

self.addEventListener('activate', (e) => {
  console.log("[Service Worker] actived", e)
}) 
//activate

self.addEventListener('fetch', (e) => {
  console.log("[Service Worker] fetched resource" + e.request.url)
}) 
// fetch

결과물

설치를 하고

실행을 시키면

이렇게 앱이 완성이 됩니다.

추가로 해볼 예정

이걸 이제 핸드폰에 앱처럼 사용할수 있게 만들어볼 예정입니다.

하고나서 느낀점

예상외로 간단하게 설치 할수 있어서 좋았고, 저번 zero-gg 프로젝트에서 팀원이 리뷰를 했을때 듣기만 하고 해보질 못해서 조금은 아쉬웠는데 이번 기회를 통해서 PWA를 적용할수 있어서 좋았습니다. 이외에도 추가로 기능들이 있는걸로 알고 있는데 조금 더 공부해서 조금 심화된 내용을 적용해보고자 합니다.