[PWA] 간단하게 만들어 사이트에 적용하는 방법

조회 373회 댓글 0건

https://www.pwabuilder.com 사이트 방문하여 샘플도 볼 수 있으며 쉽게 만들 수 있다.

그리고 어플로도 출시가 가능한데 어플의 경우 apk 또는 aab 파일로 올려야 하는데 aab 파일로 올리는것이 좋다.

기기의 호환성 때문에 그렇다. 안드로이드 특성상 다양한 기기가 있기 때문에 aab 파일을 올리면 구글 스토에서 기기에 맞게 apk를 만들어 설치 할 수 있게 해주는 방식이라 한다.

● PWA에서 필요한 것은 다음과 같다.

먼저 무엇이 필요한지 확인한 다음 순차적으로 찾아가는 방식 접근법에서 좋은 방법중의 하나이다.

- 메니페스트 파일

- 서비스워커 스크립트

- 그리고 위 2개를 HTML 페이지에 지정하는 것

https://www.pwabuilder.com 사이트를 기준으로 설명을 한다. 처음 접하는 사람은 이 사이트 이용하는 경우가 좋다.

1) 메니페스트 파일 생성하기

"중간에 에디터 유어 메니페스트" 클릭해서 채워준 다음 만들면 된다. 가능하면 많이 채워 주면 좋다

뭘 넣어야 할지 모르면 아래 사이트를 참고하면 좋다

https://www.pwabuilder.com/reportcard?site=https://webboard.app

- 스크린 캡처가 몇개 필요 하다

- 아이콘은 512x512 사이즈가 있어야 한다.

- 가능하면 채울 수 있는것은 모두 채워 주는게 좋다.

2) 서비스 워커 만들기

하단에 보면 "제너레이트 서비스 워커"가 있다. 클릭하면 스크립트가 나오는데 여기서 두 부분만 수정해 주면 된다.

  const CACHE = "pwabuilder-page-1.0.1";
  const offlineFallbackPage = "/index.php";

3) HTML 페이지에 넣어주기

PWA를 사용하고 있는 사이트를 알고 있다면 HTML 소스를 보고 메니페스트파일, 서비스워커 호출하는 부분을 참고 할 수 있다.

  # 처음 로딩되(index.php)는 html 파일에 아래가 추가 되어야 한다.
  <link rel="manifest" href="/pwa/manifest.json" />

  # 위나 아래 파일명은 달라도 되며. 다르게 되면 그 파일명으로 존재를 하면 된다.
  # https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
  <script>
  async function registerServiceWorker() {
    if ('serviceWorker' in navigator) {
      try {
        // 반드시 루트에 있어야 한다.
        await navigator.serviceWorker.register('/service_worker.js');
        // console.log("Service Worker Registered");
      } catch (e) {
        // console.log(`Service Worker registration failed: ${e}`);
      }
    }
  }
  registerServiceWorker();
  </script>

* APK 생성하기

점수가 어느정도 되어야 위쪽에 "패키지 포 스토어" 버튼이 활성화 된다.

- 안드로이드 선택을 하고

- Android Package Options 에서 최 하단에 US -> KR 로 변경

- 안드로이드 앱에서는 다양한 컬러 테마를 사용하여 앱의 외관을 사용자 친화적으로 만들 수 있습니다.\

Theme color: 이는 앱의 주 테마 색상을 정의합니다. 보통 앱의 툴바, 액션바 등 주요 UI 요소의 배경 색상으로 사용됩니다.

Theme dark color: 이는 다크 테마가 활성화된 경우 앱의 주 테마 색상을 정의합니다.

Background color: 이는 앱의 기본 배경 색상을 정의합니다. 앱의 전체적인 배경 색상에 영향

Nav color: 이는 네비게이션 바의 색상을 정의합니다. 네비게이션 바는 화면 하단에 위치하며, '뒤로 가기', '홈', '최근 앱 보기' 등의 버튼을 포함합니다.

Nav dark color: 이는 다크 테마가 활성화된 경우 네비게이션 바의 색상을 정의합니다.

Nav divider color: 이는 네비게이션 바와 나머지 화면 사이의 구분선 색상을 정의합니다.

Nav divider dark color: 이는 다크 테마가 활성화된 경우 네비게이션 바와 나머지 화면 사이의 구분선 색상을 정의합니다.

이것 지정 할때 크롬에서 먼저 히스토리 들어가서 '전체' 모두 삭제 해야 된다. 캐쉬. 그리고 설치를 해야 된다.

Theme color : #23292C // 위쪽은 현재 사이트의 최 상단에 있는 색과 같은것을 해주는 것이 좋다. 아니면 회색

Theme dark color : #23292C

Background color : #ffffff

Nav color : #E8E8E8

Nav dark color : #E8E8E8

Nav divider color : #E8E8E8

Nav divider dark color: #E8E8E8

- 안드로이드 에뮬레이터 받기

이건 참고 링크로 있는 것이지 이걸 받아야 된다는 것은 아닙니다.

https://developer.android.com/studio/run/emulator?hl=ko

* 상단에 주소줄 보이지 않게

어플을 받아서 압축을 풀면 assetlinks.json 파일을 볼 수 있는데 이것을 아래 디렉토리 경로에 올려 준다.

디지털 지문인데 이것이 맞지 않으면 PWA 어플 실행 했을때 주소줄을 보게 됩니다. 주소줄이 보인다면 도메인이 다른곳으로 이동 했거나 assetlinks 가 맞지 않는것입니다.

https://www.test.com/.well-known/assetlinks.json