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

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.

"Üzerinde paylaş" seçeneği olan Android telefon çekmecesi açık.
Yüklü bir PWA'ya sahip sistem düzeyinde paylaşım hedefi seçici Share Target Test seçeneği sunulur.

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