Çevrimdışı özellikli sayfalarınızı İçerik Dizine Ekleme API'si ile dizine ekleme

Hizmet çalışanlarının, hangi sayfaların çevrimdışı çalıştığını tarayıcılara bildirmesini sağlama

İçerik Dizine Ekleme API'si nedir?

Progresif web uygulaması kullanmak, uygulamalarınızın kullanıcıların önemsediği bilgiler (resimler, videolar, makaleler vb.) durumunu tamamen değiştirebilirsiniz. Service Worker, Önbellek Depolama API'si, ve IndexedDB size verileri saklamak ve sunmak için gereken yapı taşlarını bir PWA ile doğrudan etkileşimde bulunabiliyor. Ancak yüksek kaliteli, çevrimdışı öncelikli bir PWA oluşturmak hikayenin yalnızca bir kısmını oluşturuyor. Başkaları bir web uygulaması içeriğinin, çevrimdışıyken bile erişilebilir olsalar bile, kullandığınız işten tam olarak o işlevin uygulanmasıdır.

Bu bir keşif sorunudur; PWA'nız, kullanıcıların PWA'nızın farkında kullanıma uygun içerikleri keşfedip görüntüleyebilir mi? İlgili içeriği oluşturmak için kullanılan İçerik Dizine Ekleme API'si bu soruna çözüm sunar. Geliştiriciye yönelik bölüm hizmet çalışanlarına sunulan bir uzantıdır. Bu sayede, geliştiriciler çevrimdışı özellikli sayfaların URL'lerini ve meta verilerini Google tarafından sağlanan bir yerel dizine tarayıcı. Bu geliştirme, Chrome 84 ve sonraki sürümlerde kullanılabilir.

Dizin, PWA'nızın yanı sıra diğer yüklü olan PWA'lar, tarayıcı tarafından aşağıda gösterildiği gibi gösterilir.

Chrome'un yeni sekme sayfasındaki İndirilenler menü öğesinin ekran görüntüsü.
İlk olarak Chrome'un yeni sekme sayfasında İndirilenler menü öğesini seçin.
ziyaret edin.
'nı inceleyin.
Dizine eklenen medya ve makaleler.
Dizine eklenen medya ve makaleler, Size Özel Makaleler bölümü.

Ayrıca Chrome, bir Kullanıcı çevrimdışı.

İçerik Dizine Ekleme API'si, içeriği önbelleğe almanın alternatif bir yolu değildir. İnsanların hizmetiniz tarafından zaten önbelleğe alınmış sayfalar hakkında meta veri sağlamanın bir yolu Böylece, kullanıcılar işlem yapma olasılığı yüksek olduğunda tarayıcı bu sayfaları bunları görüntüleyebilirsiniz. İçerik Dizine Ekleme API'si, sayfalarınızın keşfedilmesine yardımcı olur. önbelleğe alınmış sayfalar.

İşleyiş şeklini görün

İçerik Dizine Ekleme API'si hakkında fikir edinmenin en iyi yolu bir örnek denemektir bir uygulamadır.

  1. Desteklenen bir tarayıcı ve platform kullandığınızdan emin olun. Şu anda, Android'de Chrome 84 veya sonraki sürümler ile sınırlıdır. Şunları görmek için about://version adresine gidin Chrome'un hangi sürümünü kullandığınızı öğrenin.
  2. https://contentindex.dev adresini ziyaret edin.
  3. Listedeki bir veya daha fazla öğenin yanındaki + düğmesini tıklayın.
  4. (İsteğe bağlı) Cihazınızın kablosuz ve hücresel veri bağlantısını devre dışı bırakın veya uçak modunun kullanılmasına izin verin.
  5. Chrome'un menüsünden İndirilenler'i seçin ve Sizin İçin Makaleler sekmesine geçin.
  6. Daha önce kaydettiğiniz içeriklere göz atın.

Örnek uygulamanın kaynağını GitHub'da görüntüleyebilirsiniz.

Başka bir örnek uygulama olan Scrapbook PWA , İçerik Dizine Ekleme API'sinin Web Paylaşımı Hedef API'si ile kullanımını göstermektedir. Kod, bir teknik İçerik Dizine Ekleme API'sini bir web uygulaması tarafından depolanan öğelerle senkronize tutmak için Önbellek Depolama API'sini kullanın.

API'yi kullanma

API'yi kullanmak için uygulamanızda bir hizmet çalışanı ve gezinilebilen URL'ler bulunmalıdır. çevrimdışı. Web uygulamanızın halihazırda bir Service çalışanı yoksa Workbox kitaplıkları basitleştirebilir oluşturacağım.

Hangi tür URL'ler çevrimdışı özellikli olarak dizine eklenebilir?

API, HTML dokümanlarına karşılık gelen URL'lerin dizine eklenmesini destekler. Önbelleğe alınan bir öğenin URL'si doğrudan dizine eklenemez. Bunun yerine medya görüntüleyen ve çevrimdışı çalışan bir sayfanın URL'si.

Önerilen kalıplardan biri "görüntüleyici" oluşturmaktır Şu kodu kabul edebilen HTML sayfası: bir sorgu parametresi olarak temel medya URL'sini dosyada ek kontrollere veya içeriğe sahip olabilir.

Web uygulamaları içerik dizinine yalnızca kapsam geçerli hizmet çalışanıdır. Başka bir deyişle, bir web uygulaması URL ekleyememiştir tamamen farklı bir alan adına ait olanları içerik dizinine ekleyin.

Genel Bakış

İçerik Dizine Ekleme API'si üç işlemi destekler: ekleme, listeleme ve meta verileri kaldırma. Bu yöntemler, index adlı yeni bir mülkten gösterilmektedir. adlı kişi, ServiceWorkerRegistration kullanır.

İçeriği dizine eklemenin ilk adımı, ServiceWorkerRegistration. navigator.serviceWorker.ready kullanmak en basit yöntemdir:

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!
}

Bir hizmet çalışanının içinden İçerik Dizine Ekleme API'sine çağrı yapıyorsanız web sayfasının içinde değil, ServiceWorkerRegistration doğrudan registration aracılığıyla. Önceden tanımlanmıştır ServiceWorkerGlobalScope. kapsamında

Dizine ekleniyor

URL'leri ve bunlarla ilişkili meta verileri dizine eklemek için add() yöntemini kullanın. Size dizine ne zaman ekleneceklerini seçebilirsiniz. Her bir ekip üyesinin "çevrimdışı kaydet"i tıklamak gibi bir girişe yanıt olarak dizin düğmesini tıklayın. Ya da önbelleğe alınan veriler bir mekanizma aracılığıyla her güncellendiğinde otomatik olarak öğe ekleyebilir Örneğin, periyodik arka plan senkronizasyonu.

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',
});

Giriş eklemek yalnızca içerik dizinini etkiler; hiçbir şey eklemiyor, önbelleğe bakın.

Uç durum: Simgeleriniz bir fetch işleyicisini kullanıyorsa window bağlamından add() çağrısı yapın

add() adlı kişiyi aradığınızda Chrome, şunun için istekte bulunacak: her simgenin URL'sini işaretleyerek her simgenin, dizine eklenmiş içeriğin listesini gösterir.

  • add() adlı kişiyi window bağlamından (diğer bir deyişle, web'inizden) ararsanız sayfasında yer alıyorsa bu istek, hizmet çalışanınızda bir fetch etkinliğini tetikler.

  • Hizmet çalışanınızda add() çağrısı yaparsanız (örneğin başka bir etkinlik içinde) işleyici) tarafından ayarlanırsa istek, hizmet çalışanının fetch işleyicisini tetiklemez. Simgeler, Service Worker'ın müdahalesi olmadan doğrudan getirilir. Sakla simgeleriniz fetch işleyicinize güveniyorsa, bunun nedeni muhtemelen ağda değil, yalnızca yerel önbellekte bulunur. Varsa add() adlı kişiyi yalnızca window bağlamından çağırıyorsunuz.

Dizin içeriğini listeleme

getAll() yöntemi, dizine eklenen girişlerin yinelenebilir bir listesi için bir taahhüt döndürür. ve meta verileri. Döndürülen girişler, add()

const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Öğeler dizinden kaldırılıyor

Bir öğeyi dizinden kaldırmak için öğenin id ile delete() çağrısını şu şekilde yapın: kaldır:

await registration.index.delete('article-123');

delete() işlevinin çağrılması yalnızca dizini etkiler. Bu işlem önbelleğe bakın.

Kullanıcı silme etkinliğini işleme

Dizine eklenen içerik tarayıcı tarafından görüntülendiğinde kendi kullanıcısını içerebilir Sil menü öğesine sahip. Bu da kullanıcılara istediklerini belirtmek için daha önce dizine eklenmiş içerikleri tamamladıysa. Silme işlemi bu şekilde arayüz, Chrome 80'de nasıl görünür?

Sil menü öğesi.

Birisi bu menü öğesini seçtiğinde, web uygulamanızın hizmet çalışanı contentdelete etkinliği. Bu etkinliğin işlenmesi isteğe bağlı olsa da, isteğe bağlı olarak hizmet çalışanınızın "temizleme" olasılığı yerel olarak önbelleğe alınmış medya gibi içerikler belirten bir uyarı alır.

registration.index.delete() öğesini contentdelete işleyici; etkinlik tetiklendiyse ilgili dizin silme işlemi tarayıcı tarafından zaten gerçekleştirildi.

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 tasarımıyla ilgili geri bildirim

API ile ilgili tuhaf olan veya beklendiği gibi çalışmayan bir şeyler mi var? Alternatif olarak: fikrinizi uygulamak için gereken eksik parçalar var mı?

Content Indexing API'si açıklayıcı GitHub deposunda sorun bildirin veya düşüncelerinizi ekleyin bir sorundur.

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu?

https://new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok dahil et ve yeniden üretmek için basit talimatlar oluşturun ve Bileşenleri'ni ayarlayın. kime: Blink>ContentIndexing.

API'yi kullanmayı mı planlıyorsunuz?

Web uygulamanızda İçerik Dizine Ekleme API'sini kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz Chrome'un özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunun ne kadar önemli olduğunu gösterir bir ekip olması gerekiyor.

İçerik dizine eklemenin güvenlik ve gizliliğe ilişkin etkileri nelerdir?

Yanıtlara göz atın W3C'nin Güvenlik ve Gizlilik anketi doğrultusunda sağlanmıştır. Şu durumda: başka sorularınız varsa lütfen projenin GitHub deposunda bir tartışma başlatın.

Maksym Kaharlytskyi'nin Unsplash'teki hero resim.