앱 바로가기로 빠르게 작업하기

앱 바로가기를 사용하면 사용자에게 자주 필요한 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.

François Beaufort

Jungkee Song

사용자의 만족도를 생산성을 높이고, 주요 업무로의 재참여를 유도하며, 웹 플랫폼에서 이제 앱 바로가기를 지원합니다. 이를 통해 웹 개발자는 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.

이 도움말에서는 앱 바로가기를 정의하는 방법을 설명합니다. 또한 몇 가지 관련 권장사항을 배우게 됩니다.

앱 바로가기 정보

앱 바로가기를 사용하면 있습니다. 앱 아이콘이 표시되는 곳이라면 어디서든 해당 작업에 쉽게 액세스할 수 있습니다. 사용자의 만족도를 생산성을 향상하고 웹 참여도를 높입니다. 있습니다.

작업 표시줄에서 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하면 앱 바로가기 메뉴가 호출됩니다. (Windows) 또는 Dock (macOS)으로 삭제하거나 & 앱의 Android의 런처 아이콘

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

앱 바로가기 메뉴는 다음과 같은 프로그레시브 웹 앱에서만 표시됩니다. 사용자의 데스크톱이나 휴대기기에 설치되어 있다고 가정해 보겠습니다 설치를 확인하세요. 'PWA 배우기'에서 모듈을 참조하세요.

각 앱 바로가기는 사용자 인텐트를 나타내며, 각 앱 바로가기는 웹 앱 범위 내에 있는 URL 사용자가 활성화하면 URL이 열립니다. 앱 바로가기를 추가할 수 있습니다. 앱 바로가기의 예는 다음과 같습니다.

• 최상위 탐색 항목 (예: 홈, 타임라인, 최근 주문)
• 검색
• 데이터 입력 작업 (예: 이메일 또는 트윗 작성, 영수증 추가)
• 활동 (예: 가장 인기 있는 연락처와 채팅 시작)

웹 앱 매니페스트에서 앱 바로가기 정의

앱 바로가기는 선택사항으로 제공되는 JSON 파일인 웹 앱 매니페스트에서 브라우저에 웹 앱에 대한 정보와 웹 앱이 사용자의 데스크톱이나 휴대기기에 설치되어 있다고 가정해 보겠습니다 구체적으로는 shortcuts 배열 멤버에 선언되었습니다. 다음은 잠재적 웹 앱 매니페스트의 예입니다.

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

shortcuts 배열의 각 구성원은 하나 이상의 name 및 url 다른 멤버는 선택사항입니다.

name

인간이 읽을 수 있는 앱 바로가기 라벨입니다. 사용자에게 표시됩니다

short_name(선택사항)

공간이 제한된 경우에 사용되는 사람이 읽을 수 있는 라벨입니다. 권장 사용자가 그것을 제공하는 것이 선택사항입니다.

description(선택사항)

인간이 읽을 수 있는 앱 바로가기 용도입니다. 작성 당시에는 사용되지 않지만 보조 기술에 노출될 수 있습니다. 구현될 것입니다.

url

사용자가 앱을 활성화할 때 열리는 URL입니다. 단축키를 사용합니다. 이 URL은 웹 앱 매니페스트의 범위 내에 있어야 합니다. 다음에 해당하는 경우 상대 URL인 경우 기본 URL은 웹 앱 매니페스트의 URL이 됩니다.

icons(선택사항)

이미지 리소스 객체의 배열입니다. 각 객체는 src 및 sizes 속성을 포함합니다. 웹 앱 매니페스트 아이콘과 달리 이미지의 type는 선택사항입니다. 이 문서 작성 시점에는 SVG 파일이 지원되지 않습니다. 대신 PNG를 사용하세요.

완벽한 픽셀의 아이콘을 원하는 경우 48dp (즉 36x36, 48x48, 72x72, 96x96, 144x144, 192x192픽셀 아이콘)이어야 합니다. 그렇지 않은 경우 한 개의 192x192픽셀 아이콘을 사용합니다.

품질을 위해 아이콘은 화면에 기기 이상적인 크기의 절반 이상이 Android(48dp) 예를 들어 xxhdpi 화면에 표시하려면 아이콘 크기는 72x72픽셀 이상이어야 합니다. (이는 변환 공식.

앱 바로가기 테스트

앱 바로가기가 올바르게 설정되었는지 확인하려면 Manifest 창을 Application 패널로 이동합니다.

</ph>

이 창은 많은 매니페스트의 사람이 읽을 수 있는 버전을 제공합니다. 속성도 포함되어 있습니다. 이렇게 하면 모든 게시자가 단축키 아이콘이 있는 경우 제대로 로드됩니다.

프로그레시브 방식이므로 일부 사용자는 앱 바로가기를 바로 사용하지 못할 수도 웹 앱 업데이트는 하루에 한 번으로 제한됩니다. 자세히 알아보기: Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법을 참조하세요.

권장사항

우선순위별로 앱 바로가기 정렬

바로가기는 매니페스트에서 정의한 순서대로 표시됩니다. 앱 바로가기의 순서는 표시되는 앱 바로가기의 수는 플랫폼에 따라 다릅니다. Chrome 및 Edge 사용 예를 들어 Windows에서는 앱 바로 가기의 수를 10개로 제한하는 반면, Chrome for Education에서는 Android 전용 디스플레이 3. Android 7용 Chrome 92 이전에는 4개의 버전이 허용되었습니다. 크롬 92는 사이트 설정에 바로가기를 추가하여 사용 가능한 단축키 중 하나를 사용합니다. 있습니다.

고유한 앱 바로가기 이름 사용

앱 바로가기를 구별하기 위해 아이콘에 의존해서는 안 될 수 있습니다. 항상 표시되어야 합니다. 예를 들어 macOS는 도크에서 아이콘을 지원하지 않음 단축키 메뉴 앱 바로가기마다 고유한 이름을 사용합니다.

앱 바로가기 사용 측정

다음과 같이 앱 바로가기 url 항목에 주석을 달아야 합니다. 분석을 목적으로 start_url (예: url: "/my-shortcut?utm_source=homescreen").

브라우저 지원

앱 바로가기는 아래 나열된 플랫폼 및 버전에서 사용할 수 있습니다.

</ph>

신뢰할 수 있는 웹 활동 지원

Bubblewrap: 신뢰할 수 있는 웹을 사용하는 Android 앱을 빌드하는 데 권장되는 도구 활동: 웹 앱 매니페스트에서 앱 바로가기를 읽고 자동으로 Android 앱에 해당하는 구성을 생성합니다. 아이콘은 의 경우 앱 바로가기의 경우 필수이며 최소 96x96픽셀 버블랩

PWABuilder는 프로그레시브 웹 앱을 신뢰할 수 있는 앱으로 쉽게 전환할 수 있는 유용한 도구입니다. 웹 활동: 일부 주의사항이 있는 앱 바로가기를 지원합니다.

신뢰할 수 있는 웹 활동을 Android에 수동으로 통합하는 개발자의 경우 Android 앱 바로가기를 사용해 확인할 수 있습니다

샘플

앱 바로가기 샘플 및 소스를 확인하세요.

유용한 링크

• MDN
• 사양
• 앱 바로가기 샘플 | 앱 바로가기 샘플 소스
• 깜박임 구성요소: UI>Browser>WebAppInstalls