Web Share Target API ile paylaşılan verileri alma

Web Share Target API'yi kullanarak mobil ve masaüstünde paylaşım artık daha kolay

Mobil veya masaüstü cihazlarda paylaşma işlemi Paylaş düğmesini tıklama, bir uygulamayı ve kiminle paylaşacağınızı belirleme kadar basit olmalıdır. Örneğin, ilginç bir makaleyi arkadaşlarınıza e-posta ile göndererek veya tweet'leyerek herkesle paylaşmak isteyebilirsiniz.

Eskiden yalnızca platforma özgü uygulamalar yüklü diğer uygulamalardan paylaşım almak için işletim sistemine kaydolabiliyordu. Ancak Web Share Target API'si sayesinde yüklü web uygulamaları, paylaşılan içeriği almak için temel işletim sistemine paylaşım hedefi olarak kaydolabilir.

"Şu yolla paylaş" çekmecesi açık Android telefon.
PWA'nın yüklü olduğu sistem düzeyinde paylaşım hedefi seçicisi seçenek olarak sunulur.

Web Paylaşımı Hedefi'nin nasıl çalıştığını görün

  1. Android için Chrome 76 veya sonraki bir sürümü ya da masaüstünde Chrome 89 veya sonraki bir sürümü kullanarak Web Paylaşımı Hedefi demosunu açın.
  2. İstendiğinde, uygulamayı ana ekranınıza eklemek için Yükle'yi tıklayın veya ana ekranınıza eklemek için Chrome menüsünü kullanın.
  3. Paylaşımı destekleyen bir uygulama açın veya demo uygulamadaki Paylaş düğmesini kullanın.
  4. Hedef seçiciden Web Paylaşımı Testi'ni seçin.

Paylaştıktan sonra, web paylaşımı hedef web uygulamasında paylaşılan tüm bilgileri görmeniz gerekir.

Uygulamanızı paylaşım hedefi olarak kaydetme

Uygulamanızı paylaşım hedefi olarak kaydetmek için Chrome'un yüklenebilirlik ölçütlerini karşılaması gerekir. Ayrıca, bir kullanıcının uygulamanızla paylaşabilmesi için onu ana ekranına eklemesi gerekir. Bu, sitelerin kendilerini kullanıcının paylaşım amacı seçicisine rastgele eklemesini önler ve paylaşımın, kullanıcıların uygulamanızla yapmak istediği bir şey olmasını sağlar.

Web uygulaması manifest'inizi güncelleyin

Uygulamanızı paylaşım hedefi olarak kaydetmek için web uygulaması manifest dosyasına bir share_target girişi ekleyin. Bu, işletim sistemine uygulamanızı amaç seçiciye bir seçenek olarak eklemesini söyler. Manifest'e ekledikleriniz, uygulamanızın kabul edeceği verileri kontrol eder. share_target girişi için üç yaygın senaryo vardır:

  • Temel bilgileri kabul etme
  • Uygulama değişiklikleri kabul ediliyor
  • Dosyalar kabul ediliyor

Temel bilgileri kabul etme

Hedef uygulamanız yalnızca veri, bağlantı ve metin gibi temel bilgileri kabul ediyorsa manifest.json dosyasına aşağıdakileri ekleyin:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Uygulamanızda zaten bir paylaşım URL şeması varsa params değerlerini mevcut sorgu parametrelerinizle değiştirebilirsiniz. Örneğin, paylaşım URL'si şemanız text yerine body kullanıyorsa "text": "text" yerine "text": "body" kullanabilirsiniz.

method değeri sağlanmazsa varsayılan olarak "GET" olur. Bu örnekte gösterilmeyen enctype alanı, veriler için kodlama türünü belirtir. "GET" yöntemi için enctype, varsayılan olarak "application/x-www-form-urlencoded" değerine ayarlanır ve başka bir değere ayarlanırsa yoksayılır.

Uygulama değişiklikleri kabul ediliyor

Paylaşılan veriler hedef uygulamayı bir şekilde değiştiriyorsa (örneğin, hedef uygulamaya bir yer işareti kaydetmek) method değerini "POST" olarak ayarlayın ve enctype alanını ekleyin. Aşağıdaki örnek, hedef uygulamada bir yer işareti oluşturduğundan method için "POST" ve enctype için "multipart/form-data" kullanır:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

Dosyalar kabul ediliyor

Uygulama değişikliklerinde olduğu gibi, dosyaların kabul edilmesi için method öğesinin "POST" olması ve enctype öğesinin mevcut olması gerekir. Ayrıca, enctype öğesi "multipart/form-data" olmalıdır ve bir files girişi eklenmelidir.

Ayrıca, uygulamanızın kabul ettiği dosya türlerini tanımlayan bir files dizisi eklemeniz gerekir. Dizi öğeleri, name alanı ve accept alanı olmak üzere iki üyeli girişlerdir. accept alanı; bir MIME türü, dosya uzantısı veya her ikisini de içeren bir dizi alır. Hem MIME türü hem de dosya uzantısı içeren bir dizi eklemek en iyisidir. Çünkü işletim sistemlerinin tercih ettiği işletim sistemi farklılık gösterir.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

Gelen içeriği işleme

Gelen paylaşılan verilerle nasıl başa çıkacağınıza siz ve uygulamanıza bağlıdır. Örneğin:

  • Bir e-posta istemcisi, e-posta konusu olarak title ile gövde olarak text ve url birleştirilen yeni bir e-posta taslağı hazırlayabilir.
  • Bir sosyal ağ uygulaması, title yok sayılan, mesajın gövdesi olarak text ve bağlantı olarak url eklenen yeni bir yayın taslağı hazırlayabilir. text eksikse uygulama, gövdede de url kullanabilir. url eksikse uygulama, text dosyasını tarayarak bir URL arayabilir ve bunu bir bağlantı olarak ekleyebilir.
  • Bir fotoğraf paylaşma uygulaması, slayt gösterisi başlığı olarak title, açıklama olarak text ve slayt gösterisi görüntüleri olarak files öğesini kullanarak yeni bir slayt gösterisi oluşturabilir.
  • Bir kısa mesaj uygulaması, text ile url birleştirilip title değerini çıkararak yeni bir mesaj taslağı hazırlayabilir.

GET paylaşımları işleniyor

Kullanıcı uygulamanızı seçer ve method ayarınız "GET" (varsayılan) ise tarayıcı, action URL'sinde yeni bir pencere açar. Daha sonra tarayıcı, manifest dosyasında sağlanan URL kodlamalı değerleri kullanarak bir sorgu dizesi oluşturur. Örneğin, paylaşım uygulaması title ve text sağlıyorsa sorgu dizesi ?title=hello&text=world olur. Bunu işlemek için ön plan sayfanızda bir DOMContentLoaded etkinlik işleyici kullanın ve sorgu dizesini ayrıştırın:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

action sayfasını önbelleğe almak için Service Worker kullandığınızdan emin olun. Böylece, kullanıcı çevrimdışı olsa bile sayfanın hızlı bir şekilde yüklenmesi ve güvenilir bir şekilde çalışması sağlanır. Workbox, hizmet çalışanınızda önbelleğe almayı uygulamanıza yardımcı olabilecek bir araçtır.

POST paylaşımları işleniyor

method öğeniz "POST" ise (hedef uygulamanız kayıtlı bir yer işaretini veya paylaşılan dosyaları kabul ediyorsa) gelen POST isteğinin gövdesi, paylaşım uygulaması tarafından iletilen verileri, manifest dosyasında sağlanan enctype değeri kullanılarak kodlanmış şekilde içerir.

Ön plan sayfası bu verileri doğrudan işleyemez. Sayfa, verileri istek olarak gördüğünden, bunları Service Worker'a iletir. Burada, verilere bir fetch etkinlik işleyici ile müdahale edebilirsiniz. Buradan, postMessage() yardımıyla verileri ön plan sayfasına geri aktarabilir veya sunucuya aktarabilirsiniz:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

Paylaşılan içerik doğrulanıyor

Paylaşılan içeriğe sahip demo uygulamayı gösteren bir Android telefon.
Örnek paylaşım hedefi uygulaması.

Gelen verileri doğruladığınızdan emin olun. Maalesef diğer uygulamaların uygun içeriği doğru parametreyle paylaşacağının garantisi yoktur.

Örneğin, Android'in paylaşım sisteminde desteklenmediği için Android'de url alanı boş olur. Bunun yerine, URL'ler genellikle text alanında veya bazen title alanında görünür.

Tarayıcı desteği

Web Share Target API, aşağıda açıklandığı şekilde desteklenir:

Web uygulamanızın, paylaşılan verileri alma potansiyel bir hedef olarak görünmesi için tüm platformlarda yüklenmesi gerekir.

Örnek uygulamalar

API'ye desteği gösterin

Web Share Target API'yi kullanmayı düşünüyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.

#WebShareTarget hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.