Web Share Target API ile paylaşılan verileri alma

Web Share Target API sayesinde mobil ve masaüstünde paylaşım basitleştirildi

Pete LePage

Joe Medley

Mobil veya masaüstü cihazlarda Paylaş düğmesini tıklayarak paylaşımı kolayca yapabilirsiniz. ve kiminle paylaşacağınızı belirlemenize yardımcı olur. Örneğin, ekip arkadaşlarınızın ilginç bir makaleyi arkadaşlarına e-posta ile veya tweet'le ilet sahip olacaksınız.

Eskiden yalnızca platforma özel uygulamalar işletim sistemine kaydolarak yüklü diğer uygulamalardan paylaşım alma. Ancak Web Share Target API ile Böylece, yüklenen web uygulamaları temel işletim sistemine paylaşılan içeriği almak için bir paylaşım hedefi olarak belirleyin.

Web Paylaşımı Hedefinin işleyiş şeklini görün

1. Android için Chrome 76 veya sonraki bir sürümü ya da Chrome 89 veya sonraki bir sürümünü kullanıyorsanız 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 bunu ana ekranınıza eklemek için Chrome menüsünü kullanın.
3. Paylaşımı destekleyen herhangi bir uygulamayı açın veya Paylaş düğmesini kullanın demo uygulamada açın.
4. Hedef seçiciden Web Share Test'i (Web Paylaşımı Testi) seçin.

Paylaştıktan sonra, paylaşılan tüm bilgileri web paylaşımı hedef web uygulaması.

Uygulamanızı paylaşım hedefi olarak kaydetme

Uygulamanızı bir paylaşım hedefi olarak kaydetmek için Chrome'un yüklenebilirlik ölçütlerini inceleyin. Ayrıca, bir kullanıcı ana ekranlarına eklemeleri gerekir. Bu, sitelerin kullanıcının paylaşım amacı seçicisine rastgele ekleyerek paylaşmak, kullanıcıların uygulamanızda yapmak istediği bir şeydir.

Web uygulaması manifestinizi güncelleyin

Uygulamanızı paylaşım hedefi olarak kaydetmek için web'e bir share_target girişi ekleyin uygulama manifest'ini inceleyin. Bu komut, işletim sistemine uygulamanızı bir seçenek sunulur. Manifest'e eklediğiniz veriler, verileri kontrol eder. bir şablon görevi görür. share_target için üç yaygın senaryo vardır giriş:

• 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 bağlantı gibi temel bilgileri kabul ediyorsa ve metin eklemek için aşağıdakini manifest.json dosyasına ekleyin:

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

Uygulamanızın zaten paylaşılan URL şeması varsa params öğesini değiştirebilirsiniz. değerlerini mevcut sorgu parametrelerinizle eşleştirin. Örneğin, paylaşım URL'niz şema text yerine body kullanır. "text": "text" yerine "text": "body" kullanabilirsiniz.

method değeri sağlanmazsa varsayılan olarak "GET" olur. enctype alanı, , verilerin kodlama türünü gösterir. "GET" yöntemi için enctype, varsayılan olarak "application/x-www-form-urlencoded" 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ştirirse (örneğin, bir hedef uygulamada yer işareti koyun: method değerini "POST" olarak ayarlayın ve enctype alanına girin. Aşağıdaki örnek, hedef uygulamada bir yer işareti oluşturur. Bu nedenle, method için "POST" ve"multipart/form-data" enctype:

{
  "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 değerinin "POST" olması gerekir enctype öğesinin mevcut olması. Ayrıca, enctype "multipart/form-data" ve bir files girişi eklenmelidir.

Ayrıca, uygulamanızın kabul ettiği dosya türlerini tanımlayan bir files dizisi eklemeniz gerekir. İlgili içeriği oluşturmak için kullanılan dizi öğeleri, name alanı ve accept olmak üzere iki üyeli girişlerdir girin. accept alanı bir MIME türü, dosya uzantısı veya dizi alır içerir. Hem MIME türü ve dosya uzantısıdır. Çünkü işletim sistemleri birbirinden tercih ederler.

{
  "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 verileri nasıl ele alacağınız size bağlıdır ve uygulamasını indirin. Örnek:

• Bir e-posta istemcisi,title text ve url, gövde olarak birleştirildi.
• Bir sosyal ağ uygulaması, şunu kullanarak title yok sayılarak yeni bir yayın taslağı oluşturabilir: text ve bağlantı olarak url eklenir. text ise yoksa uygulama, gövdede de url kullanıyor olabilir. url eksikse Uygulama, bir URL aramak için text alanını tarayabilir ve bunu bağlantı olarak ekleyebilir.
• Bir fotoğraf paylaşım uygulaması, title modunu kullanarak yeni bir slayt gösterisi oluşturabilir. slayt gösterisi başlığını, açıklama olarak text ve slayt gösterisi resimleri olarak files.
• Bir kısa mesaj uygulaması, text ve url ile yeni mesaj taslağı oluşturabilir title değeri düşürülüyor.

GET paylaşımları işleniyor

Kullanıcı uygulamanızı seçerse ve method metriğiniz "GET" ( varsayılan olarak), tarayıcı action URL'sinde yeni bir pencere açar. Ardından, 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. Bunu işlemek için bir DOMContentLoaded kullanın etkinlik işleyiciyi ön plan sayfanıza ekleyin 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 öğesini önbelleğe almak için bir hizmet çalışanı kullandığınızdan emin olun kullanıcı çevrimdışı olsa bile hızlı bir şekilde yüklenmesini ve güvenilir bir şekilde çalışmasını sağlayacak şekilde ayarlamak. Workbox, size yardımcı olacak bir araçtır hizmet çalışanınızda önbelleğe almayı uygulayın.

POST paylaşımları işleniyor

method metriğiniz "POST" ise hedef uygulamanız kayıtlı bir paylaşılan dosyaları içeriyorsa, gelen POST isteğinin gövdesinde paylaşım uygulaması tarafından geçirilen ve enctype değeri kullanılarak kodlanmış veriler manifest dosyasında sağlanmıştır.

Ön plan sayfası, bu verileri doğrudan işleyemez. Sayfa, verileri istek olduğunda sayfa bunu Service Worker'a iletir. Siz de kendi isteğiyle fetch yardımcı olur. Buradan, verileri tekrar ön plana aktarabilirsiniz postMessage() kullanarak veya sunucuya ilet:

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

Gelen verileri doğruladığınızdan emin olun. Maalesef diğer kullanıcıların uygulamalar, uygun içeriği doğru parametrede paylaşır.

Örneğin, Android'de url alanı boş olacaktır. Android'in paylaşım sisteminde desteklenmemektedir. Bunun yerine URL'ler genellikle text alanında veya bazen title alanında da gösterilir.

Tarayıcı desteği

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

Tüm platformlarda, web uygulamanızın paylaşılan verileri alma için potansiyel hedef anlamına gelir.

Örnek uygulamalar

• Squooş
• Albüm PWA'sı

API'ye desteğinizi gösterin

Web Share Target API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chromium ekibine yardımcı olur ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

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