PWA'nızın sistem düzeyindeki paylaşım kullanıcı arayüzlerinde platforma özgü uygulamaların yanında gösterilmesini sağlama
Web Paylaşımı Target API, Progresif Web Uygulamanızı Yüklendikten sonra, kullanıcının sistem düzeyinde paylaşım sayfası. Sunucunuz varsa ve almazsanız işe koyulmanız çok daha zor olur.
Bu makalede, Çalışma kutusu, bir JavaScript kümesi paylaşım hedef URL'si oluşturmak için web uygulamalarına çevrimdışı destek eklemeye yönelik kitaplıklar Bu özellikler tamamen Service Worker'ınızın içinde bulunur. Bu, statik sitelere ve Tek sayfalık uygulamalar, özel bir sunucu uç noktası olmadan paylaşım hedefleri olarak işlev görür.
Aynı sayfada
Web Paylaşımı Hedefinin nasıl çalıştığını bilmiyorsanız Web Paylaşımı ile paylaşılan verileri alma Target API size ayrıntılı bir giriş sağlıyor. Kısa bir özet geçelim.
Web paylaşımı hedef işlevini uygulamanın iki bölümü vardır. İlk olarak,
web uygulaması manifestinizi güncelleyerek uygulamanızın paylaşım kapsamında olmasını istediğinizi belirtin
hedef. Aşağıdaki örnek, paylaşımları /share
URL'sine yönlendirir
POST
isteği ile. Çok bölümlü bir form olarak kodlanmıştır ve başlığın adı
name
, metin description
ve JPEG resimleri photos
olarak adlandırılıyor.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
Çalışma kutusu ile hizmet çalışanı paylaşım hedefleri
Normalde bir sunucu uç noktası tarafından işlense de paylaşım için uygulayabileceğiniz bir püf noktası hedef, bir rotayı doğrudan hizmet çalışanınıza kaydetmektir. isteğinde bulunabilirsiniz. Bu, uygulamanızın arka uç olmadan bir paylaşım hedefi olmasını sağlar.
Bu işlemi Workbox'ta şu şekilde yapabilirsiniz:
hizmet çalışanınız tarafından işlenen bir rotayı kaydetme. İçe aktararak başlayın
registerRoute
, kalkış: 'workbox-routing'
. Bu alan adının
/share
rotası, örnek web uygulaması manifest dosyasında listelenen rotayla aynıdır. İçinde
shareTargetHandler()
yanıtını çağırıyor.
import { registerRoute } from 'workbox-routing';
registerRoute(
'/share',
shareTargetHandler,
'POST'
);
shareTargetHandler()
işlevi eşzamansızdır ve etkinliği alır ve
sonra da bu verilerden medya dosyalarını getirir.
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
};
Ardından bu dosyalarla ilgili istediğiniz işlemi yapabilirsiniz. Bu dosyaları önbelleğe alabilirsiniz. Siz getirme isteği ile bir yere gönderebilir. Aynı zamanda, diğeri için bazı sorgu parametreleri içeren bir sayfa sunabilir verilerin ve işaretçilerin medyaya depolanmasını veya bunların paylaşımlarının, Önbellek Depolama Alanı API veya IndexedDB.
Bunu örnek uygulama olan Fugu'da deneyebilirsiniz Günlük tutma ve hizmet çalışanını görüntüleme kaynağında uygulanması kodu kullanabilirsiniz.
Yapabileceğiniz yaygın işlemlerden biri, paylaşılan kaynakları daha iyi bir ağa sahip oluncaya kadar tutmaktır bağlantı mevcut. Çalışma Kutusu, periyodik arka planı da destekler senkronizasyon.
Sonuç
Share Target API, progresif web sitenizi ayrıntılı şekilde entegre etmenin basit bir yoludur. uygulamasını, kullanıcıların kullandığı platforma özgü uygulamalarla gibi kritik bir görevi yerine getirir. Ancak bunu yapmak için genellikle sunucuya istek gönderilir. Paylaşım oluşturmak için Workbox'ı kullanarak hedef rotayı doğrudan hizmet çalışanınızda uygulamazsanız uygulamanızda bu Böylece, Share Target'ın uygulamalar için çevrimdışı ve çevrimdışı olarak çalışmasına izin verir arka uçlar.
Fotoğraf: Elaine Casap, Unsplash'te