프로그레시브 웹 앱 [ PWA ]

bi_sz·2022년 9월 12일
CSSJavaScripthtmlpwa
0

PWA

목록 보기
1/1
post-custom-banner

PWA란 무엇인가?

  • PWA는 프로그레시브 웹 앱 ( Progressive Web App ) 의 줄임말이다.
  • PWA는 HTML, JavaScript, CSS와 같은 웹 기술로 만드는 앱이다.
  • PWA를 통해서 사용자는 모바일 앱과 같은 사용자 경험을 누릴 수 있으며 모바일 푸시, 오프라인이나 저속의 네트워크 속도에서도 사용이 가능하다.

PWA의 특징

  • 마치 APP 처럼 홈스크린에 아이콘을 설치하여 APP 처럼 쉽게 바로가기를 실현할 수 있다.
  • PUSH 메시지 기능
    -APP의 중요 특징 중 하나인 PUSH 기능이 가능하다.
  • 오프라인 접속 가능
    -캐싱이 가능하기 때문에 오프라인이거나 속도가 느린 상태에서도 미리 다운로드 되어 있는 정보를 계속 볼 수 있다.
  • 보안
    -PWA는 HTTPS 에서만 사용이 가능하기 때문에 일반 인터넷 데이터에 비해 보안이 강화된 상태이다.

PWA 제작 기술

PWA를 구현하기 위해서는 크게 manifest.json과 Service Workers라는 2가지의 기술이 필요하다.

manifest.json

manigest.json은 PWA의 설치와 앱의 구성 정보를 담고 있는 json 설정파일이다.

크게 아래와 같은 작업을 한다.

  • App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정
  • 스플래시((splash screen) 화면 : 로딩화면 설정
  • Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정
  • Display Type : 웹 앱의 화면 형태 (browser, standalone, fullscreen)
  • Display Orientation : 웹앱의 화면 방향(가로모드, 세로모드)

Manigest의 설정

설정은 JSON으로 설정하며, <head> 태그 안에 배치한다.

index.html

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

manifest.json

{
  "short_name": "프로젝트 이름(아이콘의 이름으로 표시)",
  "name": "설치 배너에 표시되는 이름(검색의 키워드로 사용)",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "images/icon192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

short_name : 프로젝트 이름으로 설치된 아이콘의 이름으로 표시된다. (필수 입력사항으로 입력하지 않으면 배너를 설치 할 수 없다.)

name : 설치 배너에 표시되는 이름으로 검색의 키워드로 사용된다. (마찬가지로 필수 입력사항으로 입력하지않으면 배너를 설치 할 수 없다.)

icons : 앱에서 필요한 다양한 크기의 아이콘을 지정한다. (스플래시 화면 표시를 위해 192px(128dp)크기의 아이콘은 반드시 있어야 한다.)
Splash screen : short_name, 아이콘, 배경색 의 설정 조합으로 구성된다.

start_url : 필수 요소로 웹 앱이 실행될 때 가장 처음 나오는 화면을 지정한다. ( 스플래시 화면 다음에 나오는 화면 )

기본 설정 

"start_url": "./index.html",

Query string을 사용하여 통계에 사용

"start_url": "./index.html?qa=homescreen",

display : 웹 앱이 어떤 모양으로 보여질지 설정하는 값이다.

  • browser(normal) : 해당 브라우저에서 기본 웹으로 실행
  • standalone : 상단의 URL 바를 제거하여 네이티브 앱처럼 보이게 한다.
  • fullscreen : 화면전체를 사용하여 네이티브 앱처럼 보이게 한다.

iOS에서 standalone 사용 시 태그 안에 아래의 메타태그를 추가해야 한다.

<meta name="apple-mobile-web-app-capable" content="yes">

theme_color : 테마 컬러는 브라우저 상단의 URL 입력바와 시스템 바 까지 포함한 색상을 지정할 수 있다.

orientation : 기기의 방향을 가로로 할지 세로로 할지 지정하는 값이다.

  • portrait : 세로모드
  • landscape : 가로모드

service-workers

service-workers는 캐싱은 어떻게 할 것인지, 요청시 캐시를 먼저 보여줄지 웹 서버를 통해서 먼저 보여줄지, PUSH 등에 대한 프로그래밍을하는 기술이다.

service-workers 에 관해서는 추후에 자세히 다룰 예정이다.

PWS를 설치할 수 있는 이벤트와 구현 방법

웹 앱을 설정하기 위한 조건

  • 기존에 웹 앱이 설치되어 있지 않아야 한다.
  • 30초 이상 웹사이트를 탐색해야 한다.
  • start_url, short_name, name이 설정되어 있어야 한다.
  • 192px 크기 이상의 앱 아이콘이 설정되어 있어야 한다.
  • service worker의 fetch이벤트가 구현되어 있어야 한다.
  • HTTPS로 보안 서비스 되어야 한다.

원래는 자동으로 설치배너가 보이게 되어 있으나,
아래의 JavaScript 코드를 추가하여 설치 버튼을 클릭하여 설치 가능하게 할 수 있다.

var deferredPrompt;
window.addEventListener('beforeinstallprompt', function(e) {
	console.log('beforeinstallprompt Event fired');
    e.preventDefault();
    // Stash the event so it can be triggered later.
	deferredPrompt = e;
 	return false;
});
// 특정 버튼 클릭 시 설치 시작 
btnSave.addEventListener('click', function() {
	if(deferredPrompt !== undefined) {
	// The user has had a postive interaction with our app and Chrome
    // has tried to prompt previously, so let's show the prompt.
    deferredPrompt.prompt();
    // Follow what the user has done with the prompt.
    deferredPrompt.userChoice.then(function(choiceResult) {
        console.log(choiceResult.outcome);
        if(choiceResult.outcome == 'dismissed') {
        console.log('User cancelled home screen install');
        }
        else {
        console.log('User added to home screen');
        }
        // We no longer need the prompt.  Clear it up.
        deferredPrompt = null;
        });
    }
});

Web App Manifest 디버깅

  1. 크롬 브라우저의 개발자도구의 Application 탭을 선택한다.
  2. Manifest 항목을 확인한다.
  3. 설정한 내용이 잘 적용되어 있는지 확인한다.

크롬 브라우저의 주소창에 chrome://flags입력하고,
설정 옵션 중 사용자 참여 검사 우회(Bypass user engagement checks)를 체크한다.
(이 설정은 웹앱 개발 시 필수요소가 설치되어 있지 않더라도 브라우저에서 인스톨 배너(앱 아이콘 설치)가 뜨는지 확인할 수 있다.)

PWA가 Safari 에서는 잘 인식하지 않는 경우가 있으므로, HTML <haed>영역에 아래의 meta태그를 입력해 준다.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">

참조 : https://developer.mozilla.org/ko/

profile
bi_sz
https://li-yo.tistory.com/ 티스토리 블로그 이전 하였습니다.
post-custom-banner

0개의 댓글