Workbox ile PWA'ları yerleşik paylaşım kullanıcı arayüzlerine entegre edin

PWA'nızın sistem düzeyinde paylaşım kullanıcı arayüzlerinde platforma özgü uygulamaların yanında görünmesini sağlama

Jeff Posnick

Joe Medley

Sam Richard

Web Share Target API, yüklendikten sonra Progresif Web Uygulamanızı kullanıcının sistem düzeyindeki paylaşım e-tablosunda görüntülemenize olanak tanır. İsteği almak için kullanılabilen bir sunucunuz varsa bu yöntem çok işe yarar, ancak yoksa çalışmak çok daha zor olur.

Bu makalede, tamamen Service Worker'ınızda yer alan bir paylaşım hedefi URL'si oluşturmak amacıyla, web uygulamalarına çevrimdışı destek eklemek için bir dizi JavaScript kitaplığı olan Workbox'ı kullanacağız. Bu, statik sitelerin ve tek sayfalık uygulamaların özel bir sunucu uç noktası olmadan paylaşım hedefleri olarak işlev görmesini sağlar.

Aynı sayfada

Web Paylaşımı Hedefinin nasıl çalıştığını bilmiyorsanız Web Share Target API'yi kullanarak paylaşılan veriler almak başlıklı makaleyi inceleyerek bu konuda ayrıntılı bilgi edinebilirsiniz. Şimdi kısa bir özete geçelim.

Web paylaşımı hedef işlevini uygulamak iki bölümden oluşur. Öncelikle, web uygulaması manifestinizi, uygulamanız yüklendiğinde bir paylaşım hedefi olmasını istediğinizi belirtecek şekilde güncelleyin. Aşağıdaki örnek, POST isteği aracılığıyla paylaşımları /share URL'sine yönlendirir. Çok parçalı bir form olarak kodlanmıştır. Başlık name, metin description ve JPEG resimleri photos olarak adlandırılır.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Hizmet çalışanı hedefleri Workbox ile paylaşır

Normalde bir sunucu uç noktası tarafından yönetilse de, paylaşım hedefi için yapabileceğiniz en iyi işlem, isteği işlemek için doğrudan Service Worker'ınıza bir rota kaydetmektir. Bu, uygulamanızın arka uç olmadan paylaşım hedefi olmasını sağlar.

Bu işlemi Workbox'ta, hizmet çalışanınız tarafından işlenen bir rotayı kaydederek yaparsınız. 'workbox-routing' kaynağından registerRoute dosyasını içe aktararak başlayın. Örnek web uygulaması manifestinde listelenenle aynı olan /share rotası için kaydedildiğine dikkat edin. Yanıt olarak shareTargetHandler() çağırır.

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

shareTargetHandler() işlevi eşzamansızdır ve etkinliği alır, form verilerini bekler ve 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
};

Bu dosyalarla ilgili olarak istediğiniz her şeyi yapabilirsiniz. Bunları önbelleğe alabilirsiniz. Bunları, getirme isteği ile bir yere gönderebilirsiniz. Paylaşılan diğer öğelere ilişkin bazı sorgu parametrelerini içeren bir sayfa sunarak veya Cache Storage API ya da IndexedDB'de veri ve işaretçileri medyaya depolayarak diğer manifest seçeneklerini de kullanabilirsiniz.

Bunu örnek uygulama olan Fugu Journal'da deneyebilir ve kaynak kodunda Service Worker uygulamasını görebilirsiniz.

Yaygın olarak yapabileceğiniz bir şey, daha iyi ağ bağlantıları kurulana kadar paylaşılan kaynakları tutmaktır. Workbox, periyodik arka plan senkronizasyonunu da destekler.

Sonuç

Share Target API, progresif web uygulamanızı (pwa) kullanıcıların cihazlarına derin bir şekilde entegre etmenin basit bir yoludur. Bu uygulamaları, kritik görev için (uygulamalar arasında içerik paylaşımı) platforma özel uygulamalarla eşit hale getirir. Ancak bunu yapmak genellikle isteği almak için bir sunucuya sahip olmayı gerektirir. Doğrudan hizmet çalışanınızda bir paylaşım hedefi rotası oluşturmak için Workbox'ı kullandığınızda uygulamanız bu kısıtlamadan kurtulur ve Paylaşım Hedefi'nin çevrimdışıyken ve arka uçları olmadan uygulamalar için çalışmasına olanak tanır.

Fotoğraf: Elaine Casap'in Unsplash'teki fotoğrafı