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österilmesini sağlama

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

Web Share Target API, Aşamalı Web Uygulamanızın yüklendikten sonra kullanıcının sistem düzeyindeki paylaşım sayfasında gösterilmesini sağlar. İsteği alacak bir sunucunuz varsa bu yöntem çok iyi çalışır ancak sunucunuz yoksa bu yöntemi kullanmak çok daha zordur.

Bu makalede, web uygulamalarına çevrimdışı destek eklemek için kullanılan bir JavaScript kitaplıkları grubu olan Workbox'ı kullanarak tamamen hizmet çalışanı içinde yer alan bir paylaşım hedefi URL'si oluşturacağız. Bu sayede, statik siteler ve tek sayfalık uygulamalar, özel bir sunucu uç noktası olmadan paylaşım hedefi olarak kullanılabilir.

"Şu yolla paylaş" çekmecesinin açık olduğu bir Android telefon.
Share Target Test adlı yüklü bir PWA'nın seçenek olarak sunulduğu sistem düzeyinde paylaşım hedefi seçici.

Aynı sayfada

Web Share Target'ın işleyiş şeklini bilmiyorsanız Web Share Target API ile paylaşılan verileri alma başlıklı makalede ayrıntılı bilgi edinebilirsiniz. Kısaca özetleyelim.

Web paylaşım hedefi işlevini uygulama işlemi iki bölümden oluşur. Öncelikle, uygulamanızın yüklendiğinde paylaşım hedefi olmasını istediğinizi belirtmek için web uygulaması manifestinizi güncelleyin. Aşağıdaki örnekte, POST isteği aracılığıyla paylaşımlar /share URL'sine yönlendiriliyor. Başlığa name, metne description ve JPEG resimlere photos adı verilerek çok parçalı bir form olarak kodlanır.

…
"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şlenen bir paylaşım hedefi için isteği işlemek üzere doğrudan hizmet çalışanıza bir rota kaydetmek kullanabileceğiniz pratik bir yöntemdir. Bu sayede, uygulamanız arka uç olmadan paylaşım hedefi olabilir.

Bunu, hizmet çalışanın tarafından işlenen bir rotayı kaydederek Workbox'ta yaparsınız. 'workbox-routing' kaynağından registerRoute içe aktararak başlayın. /share rotası için kaydedildiğini fark edin. Bu rota, örnek web uygulaması manifestinde listelenen rotayla aynıdır. Buna karşılık shareTargetHandler() numarası aranı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, ardından medya dosyalarını 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 istediğiniz işlemi yapabilirsiniz. Bunları önbelleğe alabilirsiniz. Bir getirme isteğiyle bunları başka bir yere gönderebilirsiniz. Hatta diğer manifest seçeneklerini de kullanabilirsiniz. Örneğin, diğer paylaşılan öğeler için bazı sorgu parametreleri içeren bir sayfa sunabilir veya verileri ve medya işaretçilerini Cache Storage API ya da IndexedDB'de saklayabilirsiniz.

Bu özelliği örnek uygulama Fugu Journal'da deneyebilir ve hizmet çalışanı uygulamasını kaynak kodunda görebilirsiniz.

Sıkça yapılan bir işlem, daha iyi ağ bağlantıları kullanılabilir olana kadar paylaşılan kaynakları bekletmektir. Workbox, periyodik arka plan senkronizasyonunu da destekler.

Sonuç

Share Target API, Progresif Web Uygulamanızı kullanıcıların cihazlarına derinlemesine entegre etmenin basit bir yoludur. Bu API, uygulamalar arasında içerik paylaşma gibi kritik bir görevde Progresif Web Uygulamanızı platforma özel uygulamalarla eşit hale getirir. Ancak bunu yapmak için genellikle isteği alabilecek bir sunucu gerekir. Doğrudan hizmet çalışanı içinde bir paylaşım hedefi rotası oluşturmak için Workbox'tan yararlanarak uygulamanızı bu kısıtlamadan kurtarabilirsiniz. Böylece, paylaşım hedefi, uygulamalarda çevrimdışı olarak ve arka uç olmadan çalışabilir.

Elaine Casap'ın Unsplash'teki fotoğrafı