PWA(Progressive Web App)를 이용한 Web App 빌드 및 패키징

 

Progressive Web App

PWA는 웹과 앱의 장점을 살린 프레임워크(?)라고 할수 있을거 같다. 여기서 말하는 장점이란 웹 기술인(React.js Vue.js, Javascript 등)으로 개발하여 웹사이트를 만들고, 이걸 그대로 이용하여 몇가지 설정을 통해 설치형 앱을 만들수 있다라고 정리해 볼수 있을거 같다.

일단 가장 큰 장점은 웹으로 만들고 앱으로 패키징하여 배포할수 있다. 그런데 여기서 의문은 여러분도 알고 있다시피 그럼 기존의 웹앱 프레임워크인 Coradova 등과는 뭐가 다르지 라고 말할수 의문을 가질수도 있다. 

가장큰 차이점은 일단 설치형이라고 설명했지만 기존에 알고 있는 방식의 설치형이 아니다. 즉 안드로이드 또는 애플 마켓에 등록하기 위해 개발자 등록을하고 패키징을 만들고 패키징을 등록하고 검증받고 등등등 처음 해보는 분들이라면 아마도 수많이 시간과 노력을 투자해야 할지 모르는 이런 절차가 필요없다는 말이다.

즉, 결론은 그냥 PWA로 만들어서 웹 서비스로 오픈하면 설치형 프로그램과 비슷한 설치형 앱을 제공하다는 말이다. 무슨 말인지 잘 모르겠다면 검색을 통해 보다 상세히 살펴보시길 권장합니다.


여기에서는 이미 작업된 Vue 프로젝트를 웹앱으로 배포 및 패키징하기 위한 방법을 설명하는 것에 초점이 맞춰져 있다.

먼저 프로젝트 root 디렉토리에서 아래의 명령어를 입력하자.
vue add pwa
무언가 열심히 설치하고나면 아래와 같이 성공했다는 문구가 표시될 것이다.

성공적으로 설치가 되고나면 아래와 같이 src/registerServiceWorker.js 라는 파일이 하나 생성된다.


이 파일에 대하여 간략히 설명하자면 아래와 같다
  • 캐시를 저장할 수 있는 공간
  • Cookie의 Proxy 역할을 수행
  • Client -> ServiceWorker -> Server로 요청
  • 캐싱되어 있다면 오프라인에서도 정적 파일을 받을 수 있음

PWA에서 사용하는 주요 기술에 대하여

Service Worker

Web App Manifest

  • 화면의 구성요소 선언

  • manifest.json

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}
옵션 설명
  • short_name: 사용자 홈 화면에서 아이콘 이름으로 사용
  • name: 웹앱 설치 배너에 사용
  • icons: 홈 화면에 추가할때 사용할 이미지
  • start_url: 웹앱 실행시 시작되는 URL 주소
  • display: 디스플레이 유형(
    • fullscreen : 전체 화면
    • standalone : 브라우저의 요소들을 감춘 Native Application처럼 보이는 화면
    • minimal-ui : 일부 브라우저 기능 제공 (크롬 모바일만 지원)
    • browser : 브라우저와 동일한 화면
  • theme_color: 상단 툴바의 색상
  • background_color: 스플래시 화면 배경 색상
  • orientation: 특정 방향을 강제로 지정(landscape, portrait 중 설정)
manifest.json import
<link rel="manifest" href="/manifest.json">

HTTPS

  • https 만 제공
    • 단, localhost, 127.0.0.1 은 제공함.(Chrome에서 확인가능)
  • Certbot 사용하면 쉽게 확인 가능
  • 또는 Github Page 를 사용하는 것도 방법

Lighthouse

  • 구글에서 개발한 크롬 개발자도구
  • PWA 요소들을 손쉽게 확인해줌



PWA 설정후 웹접속시 주소표시줄 우측에 앱설치를위한 아이콘은 HTTPS를 설정을 포함한 아래의 조건들이 만족해야 앱 설치 기능이 표시된다.

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




    • PWA 설정시 Manifest에 대한 상세한 내용은 다른분이 상세하게 작성한 여기를(Manifest 만들기)를 참조하시기 바랍니다.

    댓글

    댓글 쓰기

    이 블로그의 인기 게시물

    [JAVA] 변수란? 변수타입?

    이미지
    프로그램 언어를 배울때 항상 먼저 배우거나 집고 넘어가는 것이 있죠? 네 맞습니다.  변수 라는 것입니다. C언어나 Java에서는 int, char, float 등 자료형에 따라 다르고, Javascript에서는 모든 변수를 그냥 var로 사용하죠. 물론 또 개발 언어마다 조금씩 차이가 있습니다. 하지만, 기본적으로 "변수"라는 기본 개념은 모든 언어에서 모두 동일합니다. 이번 포스팅은 이 변수에 대하여 낱낱이 파헤쳐 봅시다.  아! 참고로 변수에 대하여 정말로 낱낱이 땅끝까지 파헤치자면 이 한번의 포스팅으로는 부족합니다. 따라서 오늘은 일차적으로 가장 기본이 되는 변수의 정의와 원시타입에 대해서만 낱낱이 살펴보도록 하겠습니다. 변수란 무엇일까? 자! 일단 변수란 무엇일까요? 변수란? 물어보면 가장 먼저 사람들은 당당히 말을 하죠.  "변하는 수" 물론 이 말도 틀린 말은 아닙니다. 우리 프로그래밍에서는 변수라는 공간에 값이 항상 변하는 그리고 그런 용도로 사용하려는 것이 변수니까요. 변수는 영어로 "Variable"라고 읽습니다. 이것을 사전에서 찾아보면 "변화하기 쉬운, 변덕스러운, 다양한" 이라는 의미를 갖습니다. 뭐 이 말도 틀린 말은 아니네요. 하지만! 우리는 개발자로도 더 프로그래밍 적인 의미를 원합니다. 그래서 이렇게 정의를 했죠. 변수란? 데이터(값)을 저장할 수 있는 프로그램의 저장 공간! 서론이 길었네요. ^^. 항상 무언가 정의를 내리기란 쉽지 않습니다..ㅎㅎㅎ 변수를 좀 더 이해하기 위해 아래의 그림을 예를 들어 보겠습니다. 위와 같이 우리가 물을 마셔야 한다면, 물을 마시기 위해 당연히 물 컵이 있어야겠죠.  아! 물통에 입을 대고 드시는 분들도 계시지만... 그러면 엄마한테 혼납니다. ㅎㅎ 아무튼 이렇게 물을 마시기 위해 물을 담을 컵을 준비하는 것을 프로그래밍에서는 "데이터를 사용하기 위해 변수를 선언한다" 라고 이야기 할 수 있습니다.  그럼 ...
    자세한 내용 보기

    [JAVA] 문자셋(Charset)

    이미지
    문자셋의 역사 2022년 현재를 기준으로 가장 많이 사용되고 많이들 알고 있는 문자셋(Charset)은 UTF-8일 것이라 생각합니다. 물론 여러분들이 프로그래밍을 공부했거나 컴퓨터 공학을 전공했다면 ASCII 뿐만 아리나 UNICODE 등 다양한 문자셋을 알고 있겠죠. 그래서 이렇게 많은 문자셋들이 왜 생겨서 우리를 괴롭히는지 그리고 다 공부해야하는지 궁굼해 하는 분들이 많으실거라 생각하여 짧게 문자셋의 역사와 자주 사용되는 문자셋 몇개를 정리해 보려 합니다. 일단 문자셋의 대략적인 역사 또는 발전기를 아래와 같은 그림으로 살펴보도록 하죠. 위에서 보는 바와 같이 최초의 컴퓨터는 알파벳권에서 처음 개발 및 사용되었다고 합니다. 그래서 초기에 컴퓨터를 만들 당시 알파벳만 사용하면 되었던 것이죠. 그 시대 배경을 보더라도 글로벌 시대도 아닌 냉전 시대였으니 뭐 당연한거라고 생각할 수 있었을거 같습니다. 그렇게 시작되었던 초기 컴퓨터에서 0과 1밖에 모르던 컴퓨터에서 사람이 사용하기 위해 글자를 표시할 방법을 컴퓨터 과학자들이 의논하게 되죠. 고민끝에 컴퓨터에서는 데이터를 부호화하는 방법으로 숫자를 문자로 치환하는 방법을 생각하게 됩니다. 예를 들어 0은 NULL 이라는 아무것도 없다라는 기호로 그리고 숫자 65면 문자 알파벳 대문자 ‘A’로 66면 대문자 ‘B’ 이렇게 쭈욱 이어지다가 소문자 ‘a’는 97로 정하게 되죠.  이렇게 사람이 볼수 있는 문자를 컴퓨터 언어인 코드번호로 변경 또는 ‘부호화’하는 방법을 ‘인코딩(Encoding)’ 이라고 하고. 코드번호를 사람이 알아들을 수 있는 문자로 다사 되돌리는 것을 복호화 또는 ‘디코딩(Decoding)’이라고 합니다. 인코딩 : 문자, 숫자, 기호 등을 컴퓨터의 내부처리를 위해 숫자코드번호로 변경하는 것. 디코딩 : 컴퓨터의 내부처리 숫자코드번호를 문자, 숫자, 기호 등을로 다시 복원하는 것. 그래서 처음으로 이러한 기준을 만들었던 것이 ASCII(American Standard Code for Info...
    자세한 내용 보기

    [JAVA] 문자열 비교[== vs equals()]의 차이

    이미지
    자바에서 기본 자료형(원시타입)의 비교 연산은 일반적으로 == 연산자를 사용합니다. 하지만 String의 경우는 == 연산자를 사용하여 비교하면 안전하지 않죠? 안전하지 않다는 말은 무슨 뜻일까요? String의 경우 여러분들이 편하게 아무생각(?) 없이 사용하는 리터럴 즉, 대입 연산자를 이용해 바로 상수를 대입하는 방식으로 사용할 경우에는 일반적으로 == 를 이용해 값을 확인해도 문제가 없습니다. 하지만 사용자로 부터 입력을 받아 사용할 경우 동일한 값을 입력 받더라도 비교 연산자(==)는 동일한 값인데도 false를 반환하죠. 즉 아래와 같이 코드를 작성했다고 가정합시다.  Scanner sc = new Scanner(System.in); String id = sc.next();      // 사용자한테 ‘abc’를 입력 받았다고 가정. System.out.println(id == “abc”); // 비교연산자(==)를 이용해 비교하면 false. // 그래서 우리는 String의 메소드인 equals()를 이용해 비교하면 true를 반환합니다. System.out.println(id.equals("abc")); 이처럼 비교연산자(==)와 equals()는 왜 차이가 나는 것인지 한번 살펴보기로 하겠습니다. 먼저 그림을 보도록 하겠습니다. 위 그림에 대한 결론부터 이야기 하자면 String과 같은 클래스에서의 비교연산자(==)는 객체의 주소을 비교하는 것이고, equals()는 주소가 가리키는 실제의 값, 즉 문자열을 비교하는 메소드입니다. 따라서 우리는 String를 사용할 때 항상 안전하게 그리고 생각하지 말고 equals()를 사용하라고 배우죠. 위의 그림에서 선언한 각각의 변수들 주소를 이클립스에서 출력해보면 다음과 같습니다. String str1 = "Hello"; String str2 = "Hello"; String str3 = new String("World...
    자세한 내용 보기