Web Share Target API ile paylaşılan verileri alma

Web Paylaşımı Hedef API'si ile mobil cihazlarda ve masaüstünde paylaşım basitleştirildi

Mobil cihazlarda veya masaüstü cihazlarda paylaşım, Paylaş düğmesini tıklayıp bir uygulama ve paylaşacağınız kişiyi seçmek kadar kolaydır. Örneğin, ilginç bir makaleyi arkadaşlarınıza e-postayla veya tweet'leyerek tüm dünyaya göndermek isteyebilirsiniz.

Önceden yalnızca platforma özgü uygulamalar, yüklü diğer uygulamalardan paylaşım almak için işletim sistemine kaydedebiliyordu. Ancak Web Share Target API ile yüklü web uygulamaları, paylaşılan içeriği almak için bir paylaşım hedefi olarak temel işletim sistemine kaydolabilir.

"Şununla paylaş" çekmecesi açık olan Android telefon.
Yüklü bir PWA'nın seçenek olarak sunulduğu sistem düzeyinde paylaşım hedefi seçici.

Web paylaşımı hedefini kullanma

  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 Chrome menüsünü kullanarak ana ekranınıza ekleyin.
  3. Paylaşımı destekleyen herhangi bir uygulamayı açın veya demo uygulamasındaki Paylaş düğmesini kullanın.
  4. Hedef seçiciden Web Paylaşımı Testi'ni seçin.

Paylaşımdan sonra, paylaşılan tüm bilgileri web paylaşımı hedef web uygulamasında görürsünüz.

Uygulamanızı paylaşım hedefi olarak kaydetme

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

Web uygulaması manifestinizi güncelleme

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ı intent seçiciye seçenek olarak eklemesini söyler. Manifest dosyasına 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
  • Dosya kabul etme

Temel bilgileri kabul etme

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

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

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

Sağlanmazsa method değeri varsayılan olarak "GET" olur. Bu örnekte gösterilmeyen enctype alanı, verilerin 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şikliklerini kabul etme

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

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

Dosya kabul etme

Uygulama değişikliklerinde olduğu gibi, dosyaların kabul edilmesi için method'ün "POST" olması ve enctype'nin mevcut olması gerekir. Ayrıca, enctype "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, iki üyesi olan girişlerdir: name alanı ve accept alanı. accept alanı bir MIME türü, dosya uzantısı veya her ikisini de içeren bir dizi alır. İşletim sistemleri tercih ettikleri MIME türü ve dosya uzantısında farklılık gösterdiğinden, hem MIME türü hem de dosya uzantısı içeren bir dizi sağlamak en iyisidir.

{
  "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 işlem yapacağınız size bağlıdır ve uygulamanıza göre değişir. Örneğin:

  • Bir e-posta istemcisi, e-postanın konusu olarak title'ü, gövde olarak da text ve url'yi birleştirerek yeni bir e-posta taslağı oluşturabilir.
  • Bir sosyal ağ uygulaması, title öğesini yok sayarak, mesajın gövdesi olarak text'ü kullanarak ve url öğesini bağlantı olarak ekleyerek yeni bir yayın taslağı oluşturabilir. text eksikse uygulama, gövdede url değerini de kullanabilir. url eksikse uygulama, text URL'sini tarayıp bir URL'yi bağlantı olarak ekleyebilir.
  • Bir fotoğraf paylaşım uygulaması, slayt gösterisi başlığı olarak title, açıklama olarak text ve slayt gösterisi resimleri olarak files'i kullanarak yeni bir slayt gösterisi oluşturabilir.
  • Bir kısa mesajlaşma uygulaması, text ve url'yi birleştirip title'yi çıkararak yeni bir mesaj taslağı oluşturabilir.

GET paylaşımları işleniyor

Kullanıcı uygulamanızı seçerse ve method değeriniz "GET" ise (varsayılan) tarayıcı, action URL'sinde yeni bir pencere açar. Ardından tarayıcı, manifest dosyasında sağlanan URL'ye kodlanmış 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'));
});

Kullanıcı çevrimdışı olsa bile hızlı bir şekilde yüklenip güvenilir bir şekilde çalışması için action sayfasını önceden önbelleğe almak amacıyla bir hizmet çalışanı kullandığınızdan emin olun. Workbox, hizmet çalışanınızda önbelleğe alma özelliğini uygulamanıza yardımcı olabilecek bir araçtır.

POST paylaşımları işleniyor

Hedef uygulamanız kayıtlı bir yer işaretini veya paylaşılan dosyaları kabul ediyorsa method değeriniz "POST" olur. Bu durumda, gelen POST isteğinin gövdesinde, manifest dosyasında sağlanan enctype değeri kullanılarak kodlanan, paylaşım uygulaması tarafından iletilen veriler bulunur.

Ön plan sayfası, bu verileri doğrudan işleyemez. Sayfa, verileri istek olarak gördüğü için verileri hizmet çalışanına iletir. Burada, bir fetch etkinlik işleyici ile müdahale edebilirsiniz. Buradan, verileri postMessage() kullanarak ön plan sayfasına geri aktarabilir veya sunucuya iletebilirsiniz:

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çerik içeren 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ğı garanti edilemez.

Örneğin, Android'de url alanı boş olur çünkü Android'in paylaşım sisteminde desteklenmez. 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ğıdaki şekilde desteklenir:

Paylaşılan verileri almak için potansiyel bir hedef olarak görünmesi amacıyla web uygulamanızın tüm platformlarda yüklenmesi gerekir.

Örnek uygulamalar

API'ye desteğinizi gösterin

Web Paylaşımı Hedefi API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

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