[iOS] 홈 화면에 PWA의 지정된 페이지에 링크를 추가하는 방법

3427 단어 iOSPWAtech

전제 조건


iOS 아교8197; 호환 페이지를 홈 화면에 추가하면 지정된 페이지가 추가되지 않습니다.
또한'홈 화면에 추가'는 뒤에서부터 변경할 수 없습니다.

PWA 지원 사이트의 예


메서드


※ 홈페이지에'트위터'소개 페이지의 샘플을 표시해 보세요.

1. 앱'단축키'를 통해


https://apps.apple.com/jp/app/단축키

절차.

  • 동작 URL 열기에 링크 설명
  • 홈 화면에 추가
  • 상세 선택

    문제점

  • 열려는 사이트의 앱이 설치된 상태에서 앱
  • 을 엽니다.

    2. 데이터 URI scheme를 통해


    https://ja.wikipedia.org/wiki/Data_URI_scheme

    절차.

  • 터미널이 네트워크에 연결되지 않은 상태에서 브라우저의 주소 표시줄에 다음과 같은 내용을 입력하십시오
  • data:text/html,
    <script>
    if (navigator.onLine) {
      location.href = '開くURL'
    }
    </script>
    
  • 열린 페이지에서 "홈 화면에 추가"
  • 해설


    "터미널이 네트워크에 연결된 경우 지정된 페이지로 마이그레이션"페이지가 홈 화면에 추가되었습니다.
    이전 조건은 지나간 이 페이지에서 '홈 화면에 추가' 를 하기 위해 설정된 것이다.

    문제점

  • 홈 화면에 표시된 아이콘이 하얗기 때문에 식별하기 어렵다
  • 개선 방안


    1. 페이지에 배경색 설정


    <style>
      html {background:}
    </style>
    

    2. 아이콘 이미지 설정


    <link rel="apple-touch-icon-precomposed" href="画像のURL">
    

    end

    좋은 웹페이지 즐겨찾기