Web Paylaşımı Hedef API’si, Aşamalı Web Uygulamanızı bir kullanıcının sistem düzeyinde paylaşımında görüntülemenizi sağlar çarşaf kurulduktan sonra. İsteği almak için uygun bir sunucunuz varsa harika çalışsa da, yoksa çalışmaya başlamak çok daha zordur.
Bu yazıda kullanacağız çalışma kutusu, tamamen hizmet çalışanınızın içinde yer alan bir paylaşım hedefi URL’si oluşturmak için web uygulamalarına çevrimdışı destek eklemek için bir dizi JavaScript kitaplığı. Bu, statik sitelerin ve tek sayfalık uygulamaların, özel bir sunucu uç noktası olmadan paylaşım hedefleri olarak hizmet etmesine olanak tanır.
Share Target Test bir seçenek olarak.Aynı sayfada #
Web Share Target’ın nasıl çalıştığını bilmiyorsanız, Web Share Target API ile paylaşılan verileri almak size derinlemesine bir giriş sağlar. İşte hızlı bir inceleme.
Web paylaşımı hedef işlevselliğini uygulamanın iki bölümü vardır. Öncelikle, uygulamanızın yüklendiğinde bir paylaşım hedefi olmasını istediğinizi belirtmek için web uygulaması bildiriminizi güncelleyin. Aşağıdaki örnek, paylaşımları şuraya yönlendirir: /share url aracılığıyla POST rica etmek. Başlığın çağrıldığı çok parçalı bir form olarak kodlanmıştır. namemetin aranıyor descriptionve çağrılan JPEG görüntüleri photos.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
Workbox ile hizmet çalışanı paylaşım hedefleri #
Normalde bir sunucu uç noktası tarafından işlenirken, bir paylaşım hedefi için yapabileceğiniz güzel bir numara, isteği işlemek için doğrudan hizmet çalışanınıza bir yol kaydetmektir. Bu, uygulamanızın arka uç olmadan bir paylaşım hedefi olmasını sağlar.
Bunu içinde yapıyorsun çalışma kutusu servis çalışanınız tarafından yönetilen bir rotayı kaydederek. İçe aktararak başlayın registerRoute itibaren 'workbox-routing'. için kayıtlı olduğuna dikkat edin. /share örnek web uygulaması bildiriminde listelenen rotanın aynısı. Yanıt olarak çağırır shareTargetHandler().
import { registerRoute } from 'workbox-routing';registerRoute(
'/share',
shareTargetHandler,
'POST'
);
bu shareTargetHandler() işlev eşzamansızdır ve olayı alır, form verilerini bekler, ardından medya dosyalarını bundan alır.
async function shareTargetHandler ({event}) {
const formData = await event.request.formData();
const mediaFiles = formData.getAll('media');for (const mediaFile of mediaFiles) {
// Do something with mediaFile
// Maybe cache it or post it back to a server
});
// Do something with the rest of formData as you need
// Maybe save it to IndexedDB
};
Daha sonra bu dosyalarla ne istersen yapabilirsin. Bunları önbelleğe alabilirsiniz. Onları bir getirme isteği ile bir yere gönderebilirsiniz. Diğer bildirim seçeneklerini bile kullanabilirsiniz, belki diğer paylaşılan öğeler için bazı sorgu parametreleri içeren bir sayfa sunabilir veya verileri ve işaretçileri Önbellek Depolama API’sinde ortama depolayabilir veya IndexedDB.
Örnek uygulamada deneyebilirsiniz Fugu Günlüğü ve hizmet çalışanı uygulamasını kendi içinde görün kaynak kodu.
Yapabileceğiniz yaygın bir şey, daha iyi ağ bağlantıları bulunana kadar paylaşılan kaynakları tutmaktır. Workbox ayrıca periyodik arka plan senkronizasyonunu da destekler.
Çözüm #
Share Target API, Aşamalı Web Uygulamanızı kullanıcıların cihazlarına derinlemesine entegre etmenin basit bir yoludur ve bu cihazları, uygulamalar arasında içerik paylaşma gibi kritik bir görev için platforma özel uygulamalarla aynı seviyeye getirir. Ancak bunu yapmak genellikle isteği almak için uygun bir sunucu gerektirir. Doğrudan hizmet çalışanınızda bir paylaşım hedefi rotası oluşturmak için Workbox’tan yararlanarak, uygulamanız bu kısıtlamadan kurtulur ve Share Target’in uygulamalar için çevrimdışıyken ve arka uçlar olmadan çalışmasına izin verir.
fotoğrafı çeken Elaine Casap Açık Unsplash