PWA란

🎈 프로그레시브 웹앱(Progressive Web Apps)

• PWA는 모바일 앱과 웹 기술의 장점을 결합한 것

브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다.
느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다.
모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다.

🏈 2014년을 기점으로 모바일 사용자 수가 데스크탑 사용자 수를 넘었으며, 모바일 사용자의 89%는 웹(Web)보다 네이티브앱(Mobile)에서 더 많은 시간을 보낸다는 통계가 있다.

즉, 홈 스크린(Home Screen)에 아이콘이 있어서 찾기 쉽다는 점과 관련된 푸시알람을 보내준다는 점에서 접근성에 높은 수치를 보이지만, 모바일 사용자는 새로운 앱을 다운로드하는 것에는 냉소적이며, 사용하던 앱을 계속해서 사용하는 경향이 있다.
(웹(Web)은 url만 있으면 접근이 가능하지만 앱은 다운로드 받아야 하는 번거로움이 있기 때문)

"높은 사용자 경험을 제공하기 위한 웹 앱의 진화"

따라서 프로그레시브 웹앱(PWA)은 웹과 앱의 장점을 결합하였다

• 웹 브라우저를 통해 설치 없이 페이지 접속 후 바탕화면에 앱 아이콘을 추가할 수 있다.
• 언제든지 푸시알림을 통해 재참여가 가능하다.
• 오프라인에서도 웹 앱에 접근 가능.하다.

instagram, uber, twitter 등에서 적용하고 있다.

---

🪐 특징

• 반응형(Responsive) 웹 디자인

• App-like & Discoverable
  • 설치 배너가 생성된다.
  • 앱 아이콘이 생성된다.

• Engageable
  • push 알람.
  • PC와 단말기 커버가 가능하다.

• Connectivity
  • Online = Offline 경험을 제공한다.

• Safe
  • 제약사항 기본 기술 - https 프로토콜이 있어야 가능하다.

---

🪐 제작에 필요한 기술

1) manifest.json
2) Service Workers: client-side Javascript Proxy
3) index.html 파일 내 링크 삽입하기
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

🎊 manifest.json

• JSON 형식으로 구성 ➡ 웹 사이트에 대한 모든 정보를 나열
• React public 폴더에 위치
• 홈 화면에서 웹 앱을 적절히 표현하기 위해 필요한 정보
  • 앱의 title
  • 모바일 OS에서 앱을 나타내는데 사용(ex. 홈 화면 아이콘)되는 다른 크기의 아이콘들의 경로
  • 로딩 또는 스플래시 화면에서 사용할 배경 색상과 같은 유용한 정보들을 포함

//  manifest.json 파일 구성
{
  "short_name": "React App",          // 홈 화면에 표시할 약식 이름
  "name": "Create React App Sample",  // 웹 앱의 이름
  "icons": [                          // 아이콘들의 정보(URL, 크기, 타입). 
    {                                 // 사용자의 기기에 적합한 것을 선택할 수 있도록 여러 개를 추가하는 것이 좋다.
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",                // 앱이 시작할 때 실행할 초기 문서
  "display": "standalone",         // 앱을 표시하는 방식입니다(전체 화면, 독립형(standalone), 최소 UI, 또는 브라우저).
  "theme_color": "#000000",        // 운영 체제에 의해 사용될 UI를 위한 주요 색상
  "background_color": "#ffffff"    // 스플래시 화면과 설치하는 동안 사용될 배경 색상
}

// 웹 manifest를 위한 최소 요구 사항은 name과 적어도 하나(src, size, type을 포함)의 아이콘이다. 
// description, short_name, start_url은 권장사항입니다.