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

Web Paylaşımı Hedef API'si, İlerlemeli Web Uygulamanızı yüklendikten sonra kullanıcının sistem düzeyindeki paylaşım sayfasında göstermenize olanak tanır. İsteği alabilecek bir sunucunuz varsa bu yöntem mükemmel bir şekilde çalışır. Sunucunuz yoksa bu yöntemi kullanmanın çok daha zor olduğunu unutmayın.

Bu makalede, web uygulamalarına çevrimdışı destek eklemek için kullanılan bir JavaScript kitaplığı grubu olan Workbox'u kullanarak tamamen hizmet çalışanınızda bulunan 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 hedefleri olarak sunulabilir.

"Paylaş" çekmecesinin açık olduğu Android telefon.
Share Target Test adlı yüklü bir PWA'ya sahip sistem düzeyinde paylaşım hedefi seçici.

Aynı sayfada

Web Paylaşımı Hedefi'nin işleyiş şekli hakkında bilginiz yoksa Web Paylaşımı Hedefi API'si ile paylaşılan verileri alma başlıklı makalede ayrıntılı bir giriş bulabilirsiniz. Aşağıda kısa bir özet verilmiştir.

Web paylaşımı hedef işlevini uygulamak iki bölümden oluşur. Öncelikle, web uygulaması manifest dosyanızı, uygulamanızın yüklüyken bir paylaşım hedefi olmasını istediğinizi belirtecek şekilde güncelleyin. Aşağıdaki örnekte, paylaşımlar bir POST isteği aracılığıyla /share URL'sine yönlendirilmektedir. Başlık name, metin description ve JPEG resimler photos olarak adlandırılan ç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"]
      }
    ]
  }
}

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

Normalde bir sunucu uç noktası tarafından ele alınan paylaşım hedefleri için yapabileceğiniz kullanışlı bir işlem, isteği işlemek üzere doğrudan hizmet çalışanınıza bir rota kaydetmektir. Bu sayede uygulamanız, arka uç olmadan bir paylaşım hedefi olabilir.

Bunu, hizmet çalışanınız tarafından işlenen bir rota kaydederek Workbox'ta yapabilirsiniz. 'workbox-routing''dan registerRoute'ü içe aktararak başlayın. Örnek web uygulaması manifestinde listelenen /share rotası için kayıtlı olduğunu unutmayın. Buna karşılık 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ı buradan 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
};

Ardından bu dosyalarla istediğinizi yapabilirsiniz. Bunları önbelleğe alabilirsiniz. Getirme isteğiyle bunları bir yere gönderebilirsiniz. Diğer manifest seçeneklerini de kullanabilirsiniz. Örneğin, diğer paylaşılan öğeler için bazı sorgu parametreleri içeren bir sayfa yayınlayabilir veya verileri ve medya işaretçilerini Cache Storage API ya da IndexedDB'de saklayabilirsiniz.

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

Yapabileceğiniz yaygın bir işlem, daha iyi ağ bağlantıları sağlanana kadar paylaşılan kaynakları bekletmektir. Workbox, periyodik arka plan senkronizasyonunu da destekler.

Sonuç

Paylaşım Hedefi API'si, Progressive Web Uygulamanızı kullanıcı cihazlarına derinlemesine entegre etmenin basit bir yoludur. Bu sayede, uygulamalar arasında içerik paylaşımı gibi kritik bir görevde kullanıcı cihazları platforma özgü uygulamalarla aynı seviyeye getirilir. Ancak bunu yapmak için genellikle isteği alabilecek bir sunucu gerekir. Doğrudan hizmet çalışanınızda bir paylaşım hedefi yolu oluşturmak için Workbox'tan yararlanarak uygulamanız bu kısıtlamadan kurtulur. Bu sayede, Paylaşım Hedefi, uygulamalar için çevrimdışıyken ve arka uç olmadan çalışır.

Unsplash'taki Elaine Casap tarafından çekilen fotoğraf