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.
Web paylaşımı hedefini kullanma
- 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 Chrome menüsünü kullanarak ana ekranınıza ekleyin.
- Paylaşımı destekleyen herhangi bir uygulamayı açın veya demo uygulamasındaki Paylaş düğmesini kullanın.
- 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 datext
veurl
'yi birleştirerek yeni bir e-posta taslağı oluşturabilir. - Bir sosyal ağ uygulaması,
title
öğesini yok sayarak, mesajın gövdesi olaraktext
'ü kullanarak veurl
öğesini bağlantı olarak ekleyerek yeni bir yayın taslağı oluşturabilir.text
eksikse uygulama, gövdedeurl
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 olaraktext
ve slayt gösterisi resimleri olarakfiles
'i kullanarak yeni bir slayt gösterisi oluşturabilir. - Bir kısa mesajlaşma uygulaması,
text
veurl
'yi birleştiriptitle
'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
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.