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.
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.
- 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://versionadresine gidin Chrome'un hangi sürümünü kullandığınızı öğrenin. - https://contentindex.dev adresini ziyaret edin.
- Listedeki bir veya daha fazla öğenin yanındaki
+düğmesini tıklayın. - (İ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.
- Chrome'un menüsünden İndirilenler'i seçin ve Sizin İçin Makaleler sekmesine geçin.
- 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şiyiwindowbağlamından (diğer bir deyişle, web'inizden) ararsanız sayfasında yer alıyorsa bu istek, hizmet çalışanınızda birfetchetkinliğ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ınfetchişleyicisini tetiklemez. Simgeler, Service Worker'ın müdahalesi olmadan doğrudan getirilir. Sakla simgelerinizfetchişleyicinize güveniyorsa, bunun nedeni muhtemelen ağda değil, yalnızca yerel önbellekte bulunur. Varsaadd()adlı kişiyi yalnızcawindowbağ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?
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.
- Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin
#ContentIndexingAPIve bunu nerede ve nasıl kullandığınıza ilişkin ayrıntılar.
İç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.