[PWA] 간단하게 만들어 사이트에 적용하는 방법 > 개발관련
개발관련

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

조회 349회 댓글 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" />

  # 위나 아래 파일명은 달라도 되며. 다르게 되면 그 파일명으로 존재를 하면 된다.
  <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 





  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 158건 1 페이지
  • profile_image 아프지 않던 어깨나 목 등뼈 허리 등 언제 부터 인지 모르겠는데 이상하게 아픈 경우명절 처럼 긴 휴가를 지냈더니 아팠던 것이 없어진 경우분명한 자세 문제 입니다.아래는 전형적인 반듯한 자세 입니다.난 자세가 이렇다 하면 가끔 일어 나서 혈액 순환만 잘 되도록 밖에 잠깐 나갔다 오면 됩니다.대체로 책상, 의자, 모니터의 높이 조절이 필요합니다.권장하는 형태가 있지만 사람마다 다를 수 있으니 본인에게 맞는 형태를 찾는 것이 제일 좋습니다.● 모니터…
  • profile_image 원리를 알면 왜? 그런 현상이 있는지 알수 있습니다.대형 언어 모델(LLM) 소형언어 모델도 원리는 같기 때문에 어쩔 수 없는 부분인것으로 보입니다.단, 궁금한것이 우리 뇌도 나도 그런가?그건 아니죠. 그런것 같은게 있기는 한데 ...아래 그림을 보면 왜? LLM이 아무것이나 우선 대답을 하게 되는지 알 수 있습니다.어떤 것이든 가장 근접한 것을 내보내게 되어 있습니다.그래서 그렇습니다. 어느 일정 수치 이하이면 내보내지 않도록 하면 되겠지만 …
  • profile_image this exceeds GitHub's file size limit of 100.00 MB프로그램 파일은 아니고 가끔 정리하는것 백업으로 올리고 있는데 너무 큰 용량으로 인한 오류가 발생 했습니다.100메가 넘는 파일 때문에 문제가 발생 했는데 삭제 후 처리 하는 방법에 대한 것이다.nothing to commit, working tree cleanEnumerating objects: 57, done.Counting objects: 100% (…
  • profile_image 마크다운 작성시 편하게 이미지 넣는 방법 입니다.텍스트로 작성의 장점이 있고 VSCODE 사용에 익숙하기 때문에 마크다운을 자주 이용하는데 한가지 불편한 점이 이미지를 넣는것이었습니다.간단하게 작성할때는 이미지를 줄이거나 늘이지 않기 때문에 문제 되지 않습니다.확장 프로그램을 설치하면 되는데 paste Image 입니다.우리가 클립보드에 넣는 Ctrl + C 하고 Ctrl + V 하면 현재 마크다운 파일이 있는곳에 자동으로 이미지가 생성 됩니다…
  • profile_image 엑셀에서 A 셀의 값을 이용하여 B 셀에 규칙적인 외부 링크를 만드는 것은 다음과 같은 방법으로 할 수 있다.하이퍼링크 수식 사용하기=HYPERLINK("https://www.example.com/Cform_" & trim(A1) & ".php", "Link to " & A1)- 이 수식은 A1 셀의 값을 URL의 일부로 사용하여 B 셀에 하이퍼링크를 생성합니다.- "http://www.example.com/"는 실제 링크…
  • profile_image 앞으로 3년만 지나도 참 많은 것이 변해 있을것 같습니다.지금도 GPT4는 쓸만 합니다. 3.5 버전 까진 사실 뭐 그렇구나. 글은 좀 쓰는 구나 그런데 4버전은 간단한 함수 같은 것은 뚝딱 입니다.GPT4에 눈을 달아준 비전 브리뷰를 API를 통해서 사용해 보았습니다.사진 정보 이용 할 때는 빠른 처리를 위해서 해주는 것이 있는데 여기서도 그렇습니다. 그렇기 때문에 사용하실 분은 어떻게 축소 되는지 설명이 있으니 반드시 읽어 보셔야 합니다.아…