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

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

조회 566회 댓글 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 





  • 페이스북으로 공유
  • 트위터로 공유
  • 구글플러스로 공유
전체 184건 1 페이지
  • 달리보다 품질이 좋은 이미지 생성 FLUX
    profile_image 동영상 이미지 생성 AI 계속 나오고 있는 도중에 이번엔 FLUX라는 AI 플레이그라운드 테스트 해볼 수 있는것이 있어 사용해 봤습니다.이미지를 많이 사용할일이 없어 지난번 소개한 구글의 imagen3 사용해도 될듯 합니다.하지만 OpenAI의 달리보다는 훨씬 좋습니다.생성결과는 프롬프트의 품질 문제 일 수 있겠지만 우리 같은 보통 사람은 그런것은 잘 모르겠고 같은 명령으로 잘 나오면 그만 입니다. 보기만해도 느낌이 오는 위에것은 OpenAI GPT에서 생성한 것이고아래가 FLUX 입니다. 확연하게 품질의 차이가 느껴집니다. 이미지 생성은 GPT에서 위 이미지 만든 프롬프트 알려 달라고 해서 만들어진것이 아래 이미지 입…
  • 로지텍 마우스 G102 DPI 변환 버튼을 더블클릭으로 사용
    profile_image 옆에 있는 앞으로, 뒤로 버튼은 마우스를 움직이게되는 문제로 인해 DPI 변환 버튼을 더블클릭으로 변경해 사용하고 있는데 괜찮습니다.물론 기본버튼을 빠르게 두번 클릭해도 되는것을 DPI 변경 버튼을 더블클릭 버튼으로 사용하는 방법 입니다. 본인의 상황에 맞게 프로그램을 설치하면 버튼을 마음대로 변경 할 수 있습니다.DPI 버튼 위치가 문제 인데 익숙해 지기 까지 약간 불편한 문제가 있기 때문에 다른 버튼으로 적용해보고 자신에게 맞는 버튼을 이용하면 됩니다.* 프로그램 받는 방법은 아래 주소를 참고하면 됩니다.- 로지텍 G102 마우스 LED 불빛 OFF 시키는 방법  
  • 로지텍 G102 마우스 LED 불빛 OFF 시키는 방법
    profile_image 로지텍 마우스 G102 마우스에 불이 들어오는 것이 무지개색으로 변하는것이 이쁘긴 한데 신경쓰이는게 문제 입니다.이쁜것하고 업무하는데 신경 쓰이는것하고 어떤 것이 더 중요하냐 사람마다 다르겠지만 전 LED Off 시키기로 하였습니다. LED 불빛을 Off 시키려면 소프트웨어를 설치 해야 합니다.아래 링크 페이지로 가서 자신의 OS에 맞는 프로그램을 다운로드 받아 설치 한 후 실행하면 되는데 로그인 해야 되는것 처럼 나오는데 위쪽에 보면 건너뛰기 클릭하면 됩니다. 마우스를 클릭하면 설정 할 수 있는곳으로 갑니다.  위 이미지 나오는것 처럼 "끄기"를 선택하면 됩니다.바로 LED 불빛이 꺼지는 것을 확인 할 수 있습니다. …
  • 4K 모니터 이용시 마우스 커서 빠르게 움직이는 방법
    profile_image 4K모니터 32인치 이용하면 글자가 정말 작게 잘 표현이 됩니다.그리고 마우스 움직이는 거리가 아~ 이렇구나 하는 생각을 하게 되지요.40인치는 되어야 4K 모니터 이용하는데 적절한 크기의 글자를 볼 수 있는데요. 문제는 이제 내 눈 돌아가는것이 문제가 됩니다.그래도 4K 모니터가 필요하다면 DPI를 조절하여 사용할 수 있는 마우스를 이용하면 좀 해결이 되긴 합니다. 그래서 32인치 모니터를 다시 구매 해서 사용하시는 분도 있습니다.4K 모니터 40인치 이상으로 사시는 분은 반드시 실제 사이즈를 눈으로 확인하고 사용해봐야 합니다.32인치용 4K 이면 글자크기에 대한 문제가 있으니 이 또한 확인해 봐야합니다. 본인이 생각…
  • 달리보다 품질이 좋은 구글의 무료이미지 생성(imagen3)
    profile_image 무료로 이미지를 만들 수 있는 방법은 달리3를 사용하면 됩니다. 품질이 나쁘진 않지만 미드저니 사용해 보면 품질의 차이가 납니다.미드저니는 비용이 들어가기 때문에 사용은 하고 있지 않습니다.가끔 달리3를 이용하는데요. 구글에서 새로 나온 Imagen3 성능이 좋아 소개드립니다.원하는것을 만들고 싶으면 요즘 무료로 사용할 수 있는 LLM 이용해서 프롬프트 만들어 달라고 하여 입력하면 됩니다.저 같은 경우는 GPT 사용하기 때문에 가끔 이것을 이용하기도 합니다.  바다속에 있는것으로 그려 달라고 했는데 GPT 보다는 품질이 더 좋습니다.위가 Imagen3 로 만들어진것이고 아래가 OpenAI의 GPT4o로 만들어진것입니다.…
  • 가상디스크 관리에서 매개변수가 잘못 되었다면서 드라이브명 변경이 안되는경우
    profile_image 디스크관리에서 드라이브명을 변경 하려 하는데 '매개변수가 잘못 되었습니다.' 라고 메시지가 나오면서 변경이 안되는 현상에 관한 것입니다.컴퓨터 사용한지 오래되었는데 이런 경우가 처음이라 당황했었는데요 이유는 페이징 파일 문제 였습니다.간단하게 sysdm.cpl 실행 한다음 아래 화면과 같이 나오면 설정을 변경해 주면 됩니다. 위와 같이 설정을 변경한 다음. 디스크 관리에 들어가서 드라이브명을 변경해 보면 될 됩니다.* 같이 보면 좋은 자료  - 복구 파티션 때문에 볼륨 확장이 안되는 경우 해결 방법 > 개발관련   - 컴퓨터 및 주변기기 유지보수 일지 > 문서양식.자료실   - 컴퓨터 포맷 관리대장 > …
  • 복구 파티션 때문에 볼륨 확장이 안되는 경우 해결 방법
    profile_image MS 어떤 이유때문인지 복구 파티션이 문제가 되면 맨 뒤쪽에 배치를 하면 될텐데 그렇게 만들어 지지 않아 이런 문제가 발생 합니다. C 드라이브의 용량이 부족해서 분할했던 파티션을 없애고 확장하여 늘리려 했는데 안되는 문제 입니다. 원인은 중간에 복구파티션이 버티고 있어서 안되는 것인데요.* 확장이 안되는 문제를 해결 하기 위한 방법은- 파티션 전용 프로그램 구매- diskpart를 이용하는 방법* 첫번째 파티션 전용 프로그램- 현재 검색하여 나온 무료라고 나온 파티션 프로그램들은 유료로 변경 되었습니다. 최소한 제가 설치 해서 확인한 2개의 프로그램은 그렇습니다.- 싸게 하는 방법은 삭제 할때 50% 할인 쿠폰 뿌리고…