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

PWA'nızı sistem düzeyinde paylaşım kullanıcı arayüzlerinde platforma özgü uygulamaların yanında gösterme

Jeff Posnick

Joe Medley

Sam Richard

Web Share Target API, Progressive Web App'inizin yüklendikten sonra kullanıcının sistem düzeyindeki paylaşım sayfasında gösterilmesini sağlar. İstekleri 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.

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ısa bir özet:

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ığın name, metnin description ve JPEG resimlerin photos olarak adlandırıldığı ç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 istekleri işlemek için hizmet çalışanıza doğrudan bir rota kaydedebilirsiniz. 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' konumundan 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. Yanıt olarak shareTargetHandler() çağrısı yapılı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. Bu kullanıcıları bir getirme isteğiyle 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 kurtarabilir, böylece paylaşım hedefinin uygulamalarda çevrimdışı ve arka uç olmadan çalışmasını sağlayabilirsiniz.