서비스 워커가 오프라인으로 작동하는 페이지를 브라우저에 알릴 수 있도록 지원
Content Indexing API란 무엇인가요?
프로그레시브 웹 앱을 사용하면 이미지, 동영상, 기사 등 사람들이 관심을 가지는 정보를 네트워크 연결의 현재 상태를 보다 정확히 파악할 수 있습니다. 서비스 워커, Cache Storage API를 사용하면 및 IndexedDB 데이터를 저장하고 서빙하기 위한 빌딩 블록을 제공하므로 PWA와 직접 상호작용할 수 있습니다. 그러나 고품질의 오프라인 우선 PWA를 빌드하는 것은 이야기의 일부분에 불과합니다. 사람들이 웹 앱의 콘텐츠가 사용하면 작업을 온전히 활용할 수 없기 때문에 이러한 기능을 구현하는 데 집중할 수 있습니다
이는 탐색 문제입니다. PWA에서는 어떻게 하면 사용자에게 어떤 콘텐츠를 찾아서 볼 수 있도록 오프라인 지원 콘텐츠를 표시해야 할까요? 이 Content Indexing API가 이 문제를 해결할 수 있습니다. 개발자 대상 부분 서비스 워커에 대한 확장으로, 이를 통해 개발자는 오프라인 기능이 있는 페이지의 URL과 메타데이터를 있습니다. 이 개선사항은 Chrome 84 이상에서 사용할 수 있습니다.
색인이 PWA의 콘텐츠와 PWA가 설치된 경우 아래와 같이 브라우저에 표시됩니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">또한 Chrome은 사용자가 오프라인 상태입니다.
Content Indexing API는 콘텐츠를 캐시하는 다른 방법이 아닙니다. 그것은 서비스에서 이미 캐시한 페이지에 대한 메타데이터를 제공하는 방법 그렇게 하면 사람들이 작업을 할 가능성이 높을 때 브라우저가 해당 페이지를 표시할 수 있습니다. 확인할 수 있습니다 Content Indexing API를 사용하면 확인할 수 있습니다.
실제 사례 보기
Content Indexing API를 익히는 가장 좋은 방법은 샘플 애플리케이션입니다.
- 지원되는 브라우저와 플랫폼을 사용 중인지 확인합니다. 현재,
Android의 Chrome 84 이상에서만 사용할 수 있습니다.
about://version에서 확인하세요. 현재 사용 중인 Chrome의 버전을 확인할 수 있습니다 - https://contentindex.dev로 이동합니다.
- 목록에서 하나 이상의 항목 옆에 있는
+버튼을 클릭합니다. - (선택사항) 기기의 Wi-Fi 및 모바일 데이터 연결을 사용 중지하거나 사용 설정합니다. 브라우저를 오프라인으로 전환하는 것을 시뮬레이션합니다.
- Chrome 메뉴에서 다운로드를 선택한 다음 추천 기사 탭으로 전환합니다.
- 이전에 저장한 콘텐츠를 찾습니다.
GitHub에서 샘플 애플리케이션 소스를 확인할 수 있습니다.
또 다른 샘플 애플리케이션인 스크랩북 PWA는 는 Content Indexing API를 Web Share Target API와 함께 사용하는 방법을 보여줍니다. 코드는 Content Indexing API를 웹 앱에 저장된 항목과 동기화 상태로 유지 Cache Storage API를 사용하여 데이터를 캐시합니다.
API 사용
API를 사용하려면 앱에 서비스 워커와 탐색 가능한 URL이 있어야 합니다. 있습니다. 웹 앱에 현재 서비스 워커가 없는 경우 Workbox 라이브러리를 사용하여 만듭니다.
오프라인 지원으로 색인을 생성할 수 있는 URL 유형은 무엇인가요?
API는 HTML 문서에 해당하는 URL의 색인 생성을 지원합니다. 캐시된 사본의 URL은 예를 들어 미디어 파일의 색인은 직접 생성할 수 없습니다. 대신 미디어를 표시하고 오프라인에서 작동하는 페이지의 URL입니다.
권장되는 패턴은 '뷰어' HTML 페이지를 허용합니다. 쿼리 매개변수로 기본 미디어 URL을 가져온 다음 파일에 하위 요소가 있을 수 있으며, 여기에 추가 컨트롤이나 콘텐츠가 포함될 수도 있습니다.
웹 앱은 범위 서비스 워커의 첫 번째 레이어입니다. 즉, 웹 앱은 URL을 추가할 수 없으며 완전히 다른 도메인에 속하는지 확인합니다.
개요
Content Indexing API는 추가, 나열,
메타데이터 삭제 이러한 메서드는 새 속성인 index에서 노출됩니다.
이
ServiceWorkerRegistration
인터페이스에 추가되었습니다.
콘텐츠 색인 생성의 첫 단계는
ServiceWorkerRegistration navigator.serviceWorker.ready를 사용하는 것이 가장 간단한 방법입니다.
const registration = await navigator.serviceWorker.ready;
// Remember to feature-detect before using the API:
if ('index' in registration) {
// Your Content Indexing API code goes here!
}
서비스 워커 내에서 Content Indexing API를 호출하는 경우
ServiceWorkerRegistration를 참조할 수 있습니다.
registration를 통해 직접 연결할 수 있습니다. 이미 정의되어 있음
ServiceWorkerGlobalScope.에 포함됨
색인에 추가 중
URL 및 관련 메타데이터의 색인을 생성하려면 add() 메서드를 사용합니다. 원하는 만큼
항목을 색인에 추가할 시점을 선택할 수 있습니다. 광고 항목의
색인 생성(예: '오프라인 저장' 클릭) 버튼을 클릭합니다. 또는 귀하
메커니즘을 통해 캐시된 데이터가 업데이트될 때마다 자동으로 항목을 추가할 수 있음
(예: 주기적 백그라운드 동기화)
await registration.index.add({
// Required; set to something unique within your web app.
id: 'article-123',
// Required; url needs to be an offline-capable HTML page.
url: '/articles/123',
// Required; used in user-visible lists of content.
title: 'Article title',
// Required; used in user-visible lists of content.
description: 'Amazing article about things!',
// Required; used in user-visible lists of content.
icons: [{
src: '/img/article-123.png',
sizes: '64x64',
type: 'image/png',
}],
// Optional; valid categories are currently:
// 'homepage', 'article', 'video', 'audio', or '' (default).
category: 'article',
});
항목을 추가하면 콘텐츠 색인에만 영향을 미칩니다. 어떤 것도 추가되지 않고 캐시 에 저장됩니다.
특이 사례: 아이콘이 fetch 핸들러를 사용하는 경우 window 컨텍스트에서 add() 호출
add()를 호출하면 Chrome에서 다음을 요청합니다.
이를 위해 각 아이콘의 URL에
색인이 생성된 콘텐츠 목록을 표시합니다.
window컨텍스트 (즉, 웹)에서add()를 호출하는 경우 페이지)가 포함된 경우 이 요청은 서비스 워커에서fetch이벤트를 트리거합니다.서비스 워커 내에서 (아마도 다른 이벤트 내에서)
add()를 호출하는 경우 핸들러에 전달) 요청이 서비스 워커의fetch핸들러를 트리거하지 않습니다. 아이콘은 서비스 워커의 개입 없이 직접 가져옵니다. 유지 아이콘이fetch핸들러에 의존하는 경우 이 점을 염두에 두시기 바랍니다. 로컬 캐시에만 존재하고 네트워크에는 존재하지 않습니다. 작동하는 경우window컨텍스트에서만add()를 호출합니다.
색인 콘텐츠 나열
getAll() 메서드는 색인이 생성된 항목의 반복 가능한 목록에 관한 프로미스를 반환합니다.
메타데이터를 제공합니다 반환된 항목에는
add()
const entries = await registration.index.getAll();
for (const entry of entries) {
// entry.id, entry.launchUrl, etc. are all exposed.
}
색인에서 항목 삭제
색인에서 항목을 삭제하려면 항목의 id를 사용하여 delete()를 호출합니다.
삭제:
await registration.index.delete('article-123');
delete() 호출은 색인에만 영향을 미칩니다. Kubernetes에서
캐시 에 저장됩니다.
사용자 삭제 이벤트 처리
브라우저에서 색인 생성된 콘텐츠를 표시할 때 브라우저 자체 사용자를 포함할 수 있습니다. 인터페이스를 삭제 메뉴 항목이 있는 이전에 색인이 생성된 콘텐츠를 볼 수 있습니다. 삭제 작업은 인터페이스는 Chrome 80에서 다음과 같이 표시됩니다.
누군가 해당 메뉴 항목을 선택하면 웹 앱의 서비스 워커가
contentdelete 이벤트 이 이벤트를 처리하는 것은 선택사항이지만
서비스 워커가 '정리'할 가능성 로컬에 캐시된 미디어와 같은 콘텐츠
다른 사용자가 완료했다고 표시한 파일 등이 포함됩니다.
내부에서 registration.index.delete()를 호출할 필요는
contentdelete 핸들러 이벤트가 시작된 경우 관련 색인
브라우저에서 이미 삭제 작업을 수행했습니다.
self.addEventListener('contentdelete', (event) => {
// event.id will correspond to the id value used
// when the indexed content was added.
// Use that value to determine what content, if any,
// to delete from wherever your app stores it—usually
// the Cache Storage API or perhaps IndexedDB.
});
API 설계에 대한 의견
API에 어색하거나 예상대로 작동하지 않는 부분이 있나요? 또는 아이디어를 구현하는 데 필요한 누락된 부분이 있나요?
Content Indexing API 설명 GitHub 저장소에서 문제를 신고하거나 의견을 추가하세요. 추가할 수 있습니다
구현에 문제가 있습니까?
Chrome 구현에서 버그를 발견하셨나요?
https://new.crbug.com에서 버그를 신고합니다. 최대한
재현을 위한 간단한 안내와 구성요소
Blink>ContentIndexing님에게 보냅니다.
API를 사용할 계획이신가요?
웹 앱에서 Content Indexing API를 사용할 계획이신가요? 공익 활동 Chrome이 기능의 우선순위를 정하는 데 도움이 되며, 다른 브라우저 공급업체에 이 기능이 얼마나 중요한지 보여줍니다. 갖출 수 있습니다
- 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다.
#ContentIndexingAPI사용 위치 및 방법에 대한 세부정보를 제공합니다
콘텐츠 색인 생성이 보안 및 개인정보 보호에 미치는 영향
정답을 확인하세요. W3C의 보안 및 개인 정보 보호 설문지에 대한 응답으로 제출됩니다. 만약 더 궁금한 점이 있으면 프로젝트의 GitHub 저장소를 통해 토론을 시작하세요.
히어로 이미지: 막심 카할리츠키(Unsplash)