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.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=6&hl=tr)
Web Paylaşımı Hedefi'nin nasıl çalıştığını görün
- 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.
- İ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.
- Paylaşımı destekleyen bir uygulama açın veya demo uygulamadaki Paylaş düğmesini kullanın.
- 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 olaraktext
veurl
birleştirilen yeni bir e-posta taslağı hazırlayabilir. - Bir sosyal ağ uygulaması,
title
yok sayılan, mesajın gövdesi olaraktext
ve bağlantı olarakurl
eklenen yeni bir yayın taslağı hazırlayabilir.text
eksikse uygulama, gövdede deurl
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 olaraktext
ve slayt gösterisi görüntüleri olarakfiles
öğesini kullanarak yeni bir slayt gösterisi oluşturabilir. - Bir kısa mesaj uygulaması,
text
ileurl
birleştiriliptitle
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.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=6&hl=tr)
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.