Progressive Web App

1. 개념

• HTML, CSS, 자바스크립트와 같은 웹 기술들을 사용해 만드는 앱
• 개발자 입장에서 안드로이드/ios 지식 없이도 두 플랫폼 위에서 작동하면서 기기에 설치까지 가능한 앱을 만들 수 있음
• 웹이지만, 데스크톱이나 모바일 환경에 설치가 가능하고 앱과 유사한 사용자 경험을 제공해 주는 웹 앱
• 일반 웹(위) / PWA 웹 앱 (다운로드 가능 아이콘 표시)

PWA 적용 웹 앱 예시 확인하기 ) 트위터

https://twitter.com/?lang=ko

2. 조건 & 장점

• 검색가능
  • 검색 엔진을 통해 콘텐츠를 찾음
  • Web App Manifest JSON 파일

    • 이름, 아이콘, 시작 화면 및 테마 색상과 같은 앱의 기능을 정의

      {
      "name": "HackerWeb", // 아이콘의 이름
      "short_name": "HackerWeb", // 검색의 배너에 표시되는 이름 (검색의 키워드)
      "start_url": ".",
      "display": "standalone",
      "background_color": "#fff",
      "description": "A readable Hacker News app.",
      "icons": [ // 아이콘으로 사용되는 이미지들
      {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
      },
      {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
      },
      {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
      },
      {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
      },
      {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
      },
      {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
      }
      ],
      "related_applications": [
      {
      "platform": "play",
      "url": "[https://play.google.com/store/apps/details?id=cheeaun.hackerweb](https://play.google.com/store/apps/details?id=cheeaun.hackerweb)"
      }
      ]
      }

    • 위의 파일을 index.html 파일의 head 태그 안에 link 시킴

      <link rel="manifest" href="manifest.json" />

• Linkable
  • URL을 전송하여 공유
• 사용자의 기기에 설치 가능
  • 홈 스크린 아이콘을 통해 앱에 접근
  • 브라우저 탭 x
• 오프라인 환경 접속 가능
  • 캐싱
• 백그라운드 동기화 가능
• 푸시 알림
  • 새로운 콘텐츠가 있을 때마다 알림을 보냄
  • 기존의 웹과는 달리 사용자가 쉽게 재방문 할 수 있도록 함
• 다양한 Web API를 사용하여 네이티브 앱과 같은 사용성을 갖출 것
  • 사용자 위치
  • 카메라 등등
• HTTPS 프로토콜을 통해 제공
  • 보안 URL이 사이트의 도메인과 일치하기 때문에 사용자가 올바른 앱을 설치하고 있는지 쉽게 확인 ⇒ 유사한 이름의 앱이 많이 있을 수 있는 앱 스토어의 앱과 다름
    

+ 웹 앱 배포해보기

---

참고자료

Introduction to progressive web apps - Progressive web apps (PWAs) | MDN

앱 개발 "PWA(Progressive Web Application)" 정의/요소/장단점/사례/트위터 예시