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

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

조회 981회 댓글 0건
  • 현재 페이지 주소 복사
  • 페이스북으로 공유
  • X 로 공유
  • 트위터로 공유
  • 네이버 블로그로 공유
  • 네이버 카페 공유하기
  • 네이버 라인 공유하기
  • 네이버 밴드 공유하기
  • 링크드인으로 공유하기

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 





  • 현재 페이지 주소 복사
  • 페이스북으로 공유
  • X 로 공유
  • 트위터로 공유
  • 네이버 블로그로 공유
  • 네이버 카페 공유하기
  • 네이버 라인 공유하기
  • 네이버 밴드 공유하기
  • 링크드인으로 공유하기
전체 225건 1 페이지
  • VSCODE에서 원격서버를 로컬 디렉토리처럼 Remote SSH
    profile_image 이건 백엔드는 데이터베이스등 서버개발이 유용한 측면들이 많죠.테스트 서버에서 작업하고 git으로 올리는 방법도 있고 git은 백업용도로만 사용하고 다중서버에 직접 올리는 방법도 있습니다.로컬의 편리한 UI + 서버의 강력한 자원 및 환경이 두 가지 토끼를 모두 잡을 수 있는 기능으로 저사양 노트북을 사용하더라도 강력한 클라우드 서버에 연결만 되어 있다면 그 서버의 성능을 내 것처럼 활용할 수 있게 됩니다.사용해 보시면 이런 좋은것을 이제 알았다니 할것입니다. 1. 로컬 환경과의 완벽한 분리 (Clean Local Machine)가장 큰 장점은 내 컴퓨터에 아무것도 설치할 필요가 없다는 것입니다.- 의존성 관리:…
  • 아직도 Git 안 쓰세요. 시대에 맞지 않게 아직도 기억에 의존하나요
    profile_image 제목을 반대로 적어 보았습니다. 결국은 어떤 방식을 사용 했을 때 더 효율적이냐 많이 변화 시켰는데 실제 변화된 것이 있느냐.- 웹사트의 예를 들면 화면단에서 변한것이 아무것도 없이 내부적으로만 변경됨- 내부적으로 변경이 많이 되었다는데 시간 차이는 별 다른게 없음- 머지 한다고 충돌 난다고 더 오래 걸리면? 소규모 팀에서 Git을 쓰지 않으면 시대에 뒤처진다고요? 상황에 따라 Git은 오히려 불필요한 복잡성을 더할 수 있으며 아래 경우라면 Git 없이도 충분합니다.5명도 안되는 소규모 팀인 경우 매일 얼굴 보고 대화하는 사이라면 브랜치 전략이나 PR 리뷰 프로세스는 그냥 회의 한 번이면 해결됩니다팀원…
  • 노트북 14 vs 16인치 어느것을 선택해야 할까?
    profile_image 먼저 실용성 문제에서 작은것이 필요하면 14인치 사면 됩니다.반드시 큰 화면이 필요하면 16인치 아니면 더 큰 것을 사면 되겠지만.여기선 이런 문제가 아니라 성능과 사용성 면에서 어떤것을 선택하는 것이 바람직한가 입니다.노트북은 이동성의 특성상 가능하면 얇게 만들려하고 있습니다.그렇기 때문에 가장 취약 부분이 발생하는 열의 처리 문제가 있는데 크면 클 수록 열처리하는데 있어 물리적으로 유리한 측면이 있습니다.그렇기 때문에 큰 화면 보다 발생하는 열 측면에서 배터리와 속도 모두 효율적인것은 크기 입니다. 발생하는 열을 처리 하는 방법은 냉각팬을 열심히 돌려서 식히는 방법과 다른 방법은 속도를 떨어트려 열 발생이 …
  • 텔레그램 chat id 찾기(Telegram Chat ID Finder)
    profile_image 텔레그램에서 봇파더를 이용해서 봇을 만들고 나서 이 봇에게 API로 메시지를 보내려면 chat_id가 필요한데 이걸 쉽게 알 수 있도록 하나 만들었습니다. cht id 란?텔레그램 봇 API로 메시지를 보내려면 대상의 chat_id(숫자)가 필요합니다.봇 토큰만으로는 메시지를 보낼 수 없고, 누구에게 보낼지를 지정하는 chat_id가 반드시 있어야 합니다.---요즘은 개발자가 아니어도 필요 할 수 있고 LLM에게 물어보면 쉽게 알려주기도 하지만 이것이 필요 할 수 있을것 같아 만들어 봤습니다.봇파더(BotFather)에서 /mybots 하면 봇의 목록을 볼 수 있고 클릭하면 어렵지 않게 이해가 가는 것들이 있고…
  • LLM vs SLLM: 무엇이 다른가?
    profile_image LLM은 한단어로 요약하면 두뇌 입니다. 이 인공 두뇌를 사용하기 위해 인터넷을 연결해 대형모델을 사용하느냐 아니면 인터넷 안되도 되는 환경에서 개인 컴퓨터에 뇌를 두고 사용하느냐 입니다.인공뉴런으로 만들어진 인공신경망을 학습시킨 인공 뇌 입니다.사람의 뇌는 뉴런이 있고 뉴런과 뉴런 사이에는 시냅스로 연결되어 학습에 따라 문턱치 값이 생기는데 이 값에 따라서 어떤것이 맞고 틀리고 뭐 그런것입니다.LLM이란?LLM(Large Language Model)은 말 그대로 대규모 언어 모델로 수천억 개에 달하는 파라미터를 기반으로 방대한 양의 텍스트 데이터를 학습해서 만들어진 인공지능 모델로 OpenAI의 GPT-4나 …
  • 바이브 코딩이 바꾸는 개발의 미래
    profile_image 스파게티코드가 생긴다고 말하시는 분도 있고 그런데 전 관계 없다고 봅니다.예를 들면 아파트 같은 빌딩 이런것은 안되지만 개인이 살 수 있는 2층집 정도는 문제 없다고 봅니다.코드를 내가 볼것도 아닌데 스파게티건 뭐건 무슨 관계가 있나요 원하는것 잘 되기만 하면 되고 빠르게 수정 되어 개선만 되면 되는 것이지.보안도 크지 않은 소스에선 잘 봐달라고 하면 되고 문제 될것은 없습니다.사실 하루 100명도 안들어는 사이트에 DBMS 설치하고 그렇기 보다 SQLite3 같은것 설치 해서 사용하는곳도 있는데이게 맞는 방식이죠. 오버스펙!!git 이것도 좋은점을 많이 나열하지만 작은 단위에선 오버스펙이죠항상 어떤기준에 의해서 원하는…
  • 한국어에 최적화된 LG 로컬LLM EXAONE
    profile_image 내 맘대로 많이 써도 추가 비용이 없는 LLM 모델 입니다.성능 좋게 사용하고 싶으면서 저렴하게 H/W 구매 하는 방법은 애플 M4 pro 64G를 사면 연구용으로 괜찮은 편에 들어갑니다.인텔쪽 GPU 구매 하는것 보다 RAM 속도 때문에 좋고 소비전력도 적고 여러가지 면에서 좋은데 왜? 64G를 선택해야 하느냐는 자신의 상황에 따라 다르겠지만 이건 확장이 안되기 때문에 살때 높은것을 사야 합니다.좀더 바르게 사용하고 싶으면: ASUS 어센션 GX10 구매 하면 됩니다.  전체 설치 순서▷ IPEX-LLM Ollama Portable Zip 다운로드https://github.com/ipex-llm/ip…

상업적 이용 금지. 컨텐츠는 개인 용도로만 사용이 가능 합니다.