자유로이

PWA 시작하기 2편 본문

IT/프로그래밍

PWA 시작하기 2편

wooyaa 2020. 9. 9. 11:20

1편에 이어 PWA를 이해하기 쉽게 요약하자면

 

 

PWA는 웹앱입니다. HTML + CSS가 페이지 레이아웃과 UI를 담당하고

PWA는 서비스워커를 통해 캐싱, 푸시 등 기술적인 기반만 제공합니다.

쉽게 크롬확장프로그램 같은 느낌이라고 생각하시면 편할꺼 같습니다. 

모질라 디벨로퍼 페이지에서 PWA로 웹사이트를 설치가능하게하려면 필요한 요구사항을 알려주고 있습니다.

요구 사항

  • 올바른 필드가 채워진 웹 매니페스트
  • 보안 (HTTPS) 도메인에서 제공 할 웹 사이트
  • 기기에서 앱을 나타내는 아이콘
  • 서비스 노동자는 오프라인으로 작업에 응용 프로그램을 (이 현재 안드로이드 크롬 만 필요) 할 수 있도록 등록

그럼 첫번째로 필요한 Manifest 파일에대해 알아보겠습니다. 
매니페스트는 화면 방향, 아이콘 배경 색깔 이름같은 정말 앱에 있어서 기본적인 요소가 적혀있는 json 파일입니다.

이걸 link 태그로 HTML 페이지 <head> 내의 적어서 사용합니다.

<link rel="manifest" href="js13kpwa.webmanifest">
{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply 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"
  }]
}
  • name: 웹 앱의 전체 이름입니다.
  • short_name: 홈 화면에 표시 할 짧은 이름입니다.
  • description: 앱의 기능을 설명하는 한두 문장.
  • icons: 소스 URL, 크기, 유형 등 다양한 아이콘 정보. 사용자의 기기에 가장 적합한 것을 선택할 수 있도록 최소한 몇 개를 포함해야합니다.
  • start_url: 앱 시작시 실행할 색인 문서입니다.
  • display: 앱이 표시되는 방법; 할 수있다 fullscreen, standalone, minimal-ui, 또는 browser.
  • theme_color: 운영 체제에서 사용하는 UI의 기본 색상입니다.
  • background_color: 앱의 기본 배경으로 사용되는 색상으로, 설치 중 및 스플래시 화면에서 사용됩니다.

 

참고사이트 출처 :

itncode.tistory.com/69 [IT & CODE 이야기]

developer.mozilla.org/ (모질라 디벨로퍼 페이지)

 

저작자표시

'IT > 프로그래밍' 카테고리의 다른 글

PWA 시작하기 3편 - 데모띄우기  (0) 2020.10.13
크롬 개발자모드 Sources 탭에 Console창 표시하는법  (0) 2020.09.10
PWA 시작하기 1편  (0) 2020.09.03
쉽게 알아가는 정규표현식 사용법 예제(자바,자바스크립트)  (0) 2020.08.28
쉽게 알아가는 정규표현식 사용법 기초편2(알파벳 패턴)  (0) 2020.08.21
'IT/프로그래밍' Related Articles more
Comments