브라우저 단축키로 사용되는 A2HS

mediba Advent Calendar 2021의 다섯째 날.
'웹 사이트에 OS의 메인 화면에 단축키를 추가하기'대책을 논의 중인데, 제가 직접 홈 화면 추가(Addto home screen/A2HS) 설치 방법과 브라우저 행동을 잘 이해하지 못해 여러 브라우저로 검증했습니다.
홈 화면 추가
PWA의 홈페이지 화면에는'웹 애플리케이션으로 사용되는 설치'와'브라우저 단축키 추가'두 가지 모드가 추가됐지만, 이번에는 브라우저 이용의 연장이라고 철저히 판단해 이 글에는 후자의 설치가 언급됐다.
브라우저가 대응하는 경우 메뉴에서 manfest를 조작합니다.json에서 지정한 고정 URL, 제목 문자, 이미지 URL을 통해 홈 화면에 단축키를 추가할 수 있습니다.
메뉴로 표시
이번에는'메인 화면에 추가'를 표시했지만 일정한 조건이 충족되면 앱으로 바뀌어'앱 설치'를 표시한다.

홈 화면 추가 표시
manifest.json에서 지정한 임의의 제목 텍스트, 목적지 URL 이동, 이미지가 설정되어 있으며, 안드로이드라면 브라우저의 로고도 겹쳐 표시됩니다.

icons 배열된 대상별 지정"purpose": "maskable"을 통해서도 위 이미지의 왼쪽처럼 마스크를 쓸 수 있다.
https://web.dev/maskable-icon/
홈페이지 화면에 추가된 경우에만 PWA라고 해야 할지 몰랐지만, 브라우저가 웹 앱 매니페스트를 설명한 것 같아 일단 PWA로 활용했다.
manifest.json의 유무에 따라 행동이 다르다
그럼, manfest.json"display":"browser"에서 iOS Safari, Chrome for Android v96, Firefox for Android v94를 통해 검증한 결과 다음과 같은 행위가 나왔다.
머리글 문자 참조
iOS Safari는 apple-mobile-web-app-title을 지원하지만 manifest는 지원하지 않습니다.json에서 shortname 지정이 있으면 저쪽이 우선입니다.
manifest.제이슨이 없는 경우.
manifest.json을 통해 지정한 상황
iOS Safari
meta 태그의 apple-mobile-web-app-title
manifest.json의 shortname
Chrome for Android
title 태그
manifest.json의 shortname
Firefox for Android
title 태그
타이틀 태그 ※
참조 마이그레이션 대상 URL
iOS Safari와 Chrome for Android의 동작은 동일합니다.
manifest.json startURL을 지정하면 URL을 고정할 수 있습니다.
manifest.제이슨이 없는 경우.
manifest.json을 통해 지정한 상황
iOS Safari
홈 화면 추가 시 위치.href
manifest.json의 starturl
Chrome for Android
홈 화면 추가 시 위치.href
manifest.json의 starturl
Firefox for Android
홈 화면 추가 시 위치.href
홈 화면 추가 시 위치.href ※
참조 아이콘 이미지 URL
iOS Safari의 경우 manifest입니다.json을 반영하는 icons가 없습니다. apple-touch-icon-precomposed로 지정한 그림이 고정적으로 읽히는 것 같습니다.
manifest.제이슨이 없는 경우.
manifest.json을 통해 지정한 상황
iOS Safari
링크 탭의 apple-touch-icon-precomposed
링크 탭의 apple-touch-icon-precomposed
Chrome for Android
링크 탭의 apple-touch-icon-precomposed
manifest.json의 icons 배열
Firefox for Android
링크 탭의 apple-touch-icon-precomposed
링크 태그의 apple-touch-icon-precomposed ※
※ Firefox에서 display가 브라우저일 때는 manfest.제이슨의 내용을 반영하지 않았습니다.
※ 브라우저 단축키에만 한정된 경우에는 ServiceWorker가 필요하지 않습니다.
즉
브라우저 단축키인 A2HS를 설정하려면 최소한 이하의 내용으로 하는 것이 좋다.
・manifest.json 설정
아이콘 이미지 URL, 대상 URL 마이그레이션, 제목 문자열, 디스플레이 모드(display), 아이콘 마스크 유무를 지정합니다.
이번에는 "display":"browser"입니다. 위에서 말한 Firefox가 브라우저인 상황에서 manfest입니다.json을 참조하지 않기 때문에 Firefox가 포함되면 미니멀-ui 등도 논의할 수 있습니다.

{
  "icons": [
    {
      "src": "/img/icon_192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/img/icon_512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "name": "アプリ名",
  "display": "browser",
  "short_name": "アプリ名",
  "start_url": "/?ref=a2hs"
}

start_URL을 통해 임의의 URL 파라미터를 지정하면 액세스 분석 등을 통해 홈페이지 화면을 통해 사용자 수를 측정할 수 있습니다.
· HTML에서 manifest까지.참조 json
각 페이지의 헤드에서 manfest를 읽습니다.

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

• 링크 탭을 통해 아이콘 이미지 지정
이미지 URL은 iOS Safariapple-touch-icon-precomposed에 대해 별도로 지정합니다.

<link rel="apple-touch-icon-precomposed" href="/img/icon_192.png">

끝말
이번 조사에 앞서 원래 iOS Safari가 manifest였다.나는 제이슨을 참조하고 있는지 모르겠다.can i use, iOS 11만 보시면 됩니다.3부터 브라우저 단축키로 사용되는 A2HS에 해당합니다.
홈 화면에만 manfest를 추가합니다.json을 잘 설정하지는 못하지만 아이콘 이미지와 비행 목적지 URL을 설정할 수 있기 때문에 미리 지정하는 것을 잊지 마세요.
참조 링크
웹 애플리케이션 설치를 포함한 A2HS 전체 세부 사양은 다음 페이지를 참조하십시오.