Web Share Target API sayesinde mobil ve masaüstünde paylaşım basitleştirildi
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
- 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.
- İ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.
- Paylaşımı destekleyen herhangi bir uygulamayı açın veya Paylaş düğmesini kullanın demo uygulamada açın.
- 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
veurl
, 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ı olarakurl
eklenir.text
ise yoksa uygulama, gövdede deurl
kullanıyor olabilir.url
eksikse Uygulama, bir URL aramak içintext
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 olaraktext
ve slayt gösterisi resimleri olarakfiles
. - Bir kısa mesaj uygulaması,
text
veurl
ile yeni mesaj taslağı oluşturabilirtitle
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
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.