안녕하세요^^가입후 팁올립니다.

모바일 안드로이드에서 바탕화면 설치 바로가기 만들기 팁올립니다.

지원되는 모바일웹에서만 버튼이 표시되고 해당 버튼은 바로가기가 설치되면 자동 사라집니다.

1. 

head.sub.php에  이것추가해주시구요

<link rel="manifest" href="<?=G5_URL?>/manifest.json">

2.

root에 manifest.json파일 만들어 주고 이름설정해줍니다. 

일단 급하신대로 src 이미지는 안넣어도 됩니다.

{

  "name": "xx홈페이지 바로가기",

  "short_name": "xx홈페이지",

  "start_url": "/",

  "display": "standalone",

  "background_color": "#ffffff",

  "theme_color": "#000000",

  "icons": [

    {

      "src": "xxxxxx/icon-192x192.png",

      "type": "image/png",

      "sizes": "192x192"

    },

    {

      "src": "xxxxx/icon-512x512.png",

      "type": "image/png",

      "sizes": "512x512"

    }

  ]

}

3.

검색옆에 +아이콘이 이버튼을 누르면 바탕화면바로가기 아이콘이 생깁니다.

header.php 헤더상단에추가

<button id="installButton" type="button" alt="바로가기 추가" class="mobile" style="padding-left:0px;" title="바로가기 추가">

    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18ZM10 5C9.44772 5 9 5.44772 9 6V9H6C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11H9V14C9 14.5523 9.44772 15 10 15C10.5523 15 11 14.5523 11 14V11H14C14.5523 11 15 10.5523 15 10C15 9.44772 14.5523 9 14 9H11V6C11 5.44772 10.5523 5 10 5Z" fill="#09244B"/>

    </svg>

</button>

<script>

$(document).ready(function() {

  // 버튼을 기본적으로 숨김

  $('#installButton').hide();

  // PWA 설치 가능 여부 확인

  if (window.matchMedia('(display-mode: standalone)').matches) {

    // 이미 설치된 경우 버튼 숨기기

    console.log('이미 홈 화면에 추가되었습니다.');

    $('#installButton').hide();

  } else {

    // 설치 가능할 때 이벤트 발생

    window.addEventListener('beforeinstallprompt', (e) => {

      e.preventDefault();

      deferredPrompt = e;

      // 지원되는 브라우저에서만 버튼을 보이게 함

      $('#installButton').show();

      // 버튼 클릭 시 설치 프로세스 시작

      $('#installButton').on('click', function() {

        deferredPrompt.prompt();

        deferredPrompt.userChoice.then((choiceResult) => {

          if (choiceResult.outcome === 'accepted') {

            alert('사용자가 홈 화면에 추가를 승인했습니다.');

          } else {

            alert('사용자가 홈 화면에 추가를 거절했습니다.');

          }

          deferredPrompt = null; // 이벤트 리셋

        });

      });

    });

  }

});

</script>

• 페이스북 공유
• 트위터 공유
•