Uproszczone udostępnianie na urządzeniach mobilnych i komputerach dzięki interfejsowi Web Share Target API
Na urządzeniu mobilnym lub komputerze udostępnianie powinno być tak proste, jak kliknięcie przycisku Udostępnij. wybrać aplikację i określić, komu udostępnić. Możesz na przykład: udostępnić interesujący artykuł, wysyłając go znajomym pocztą e-mail lub wysyłając na na całym świecie.
Wcześniej tylko aplikacje działające na określonej platformie mogły zarejestrować się w systemie operacyjnym, otrzymywać udostępnienia z innych zainstalowanych aplikacji. Dzięki docelowemu interfejsowi Web Share Target API zainstalowane aplikacje internetowe mogą być rejestrowane w systemie operacyjnym, jako użytkowników, którym chcesz udostępniać udostępniane treści.
Zobacz działanie celu udziału w internecie
- Chrome w wersji 76 lub nowszej na Androida albo Chrome w wersji 89 lub nowszej. na komputerze, otwórz wersję demonstracyjną celu udostępniania w internecie.
- Gdy pojawi się odpowiedni komunikat, kliknij Zainstaluj, aby dodać aplikację do ekranu głównego. użyj menu Chrome, żeby dodać ją do ekranu głównego.
- Otwórz dowolną aplikację, która obsługuje udostępnianie, lub użyj przycisku Udostępnij w aplikacji w wersji demonstracyjnej.
- W selektorze elementów docelowych wybierz Test udostępniania w internecie.
Po udostępnieniu wszystkie informacje powinny być widoczne w docelowej aplikacji internetowej.
Rejestrowanie aplikacji jako celu udostępniania
Aby można było zarejestrować aplikację jako miejsce docelowe udostępniania, musi ona spełniać wymagania Chrome kryteria możliwości instalacji. Ponadto, zanim użytkownik będzie mógł udostępnić użytkownik musi dodać ją do ekranu głównego. Uniemożliwia to witrynom: losowo dodawanych do listy wyboru intencji udostępniania, to coś, co użytkownicy chcą zrobić z Twoją aplikacją.
Zaktualizuj plik manifestu aplikacji internetowej
Aby zarejestrować aplikację jako cel udostępniania, dodaj wpis share_target
do jej strony internetowej
manifestu aplikacji. Dzięki temu system operacyjny ma dodać aplikację jako
wybierz odpowiednią opcję w selektorze intencji. Elementy, które dodasz do pliku manifestu, sterują danymi
akceptowana przez aplikację. Istnieją 3 typowe scenariusze, w których przypadku share_target
wpis:
- Akceptacja podstawowych informacji
- Akceptuję zmiany w zgłoszeniu
- Akceptowanie plików
Akceptacja podstawowych informacji
Jeśli Twoja aplikacja docelowa akceptuje tylko podstawowe informacje, takie jak dane, linki
i tekst, do pliku manifest.json
dodaj:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
Jeśli Twoja aplikacja ma już schemat udziału URL, możesz zastąpić params
z dotychczasowymi parametrami zapytania. Na przykład, jeśli udostępniony adres URL
schemat używa body
zamiast text
, możesz zastąpić "text": "text"
elementem "text":
"body"
.
Jeśli nie zostanie podana, domyślna wartość method
to "GET"
. w polu enctype
, a nie
pokazany w tym przykładzie wskazuje typ kodowania danych.
W przypadku metody "GET"
enctype
przyjmuje wartość domyślną "application/x-www-form-urlencoded"
oraz
jest ignorowany, jeśli ma ustawioną inną wartość.
Akceptuję zmiany w zgłoszeniu
Jeśli udostępnione dane w jakiś sposób zmienią aplikację docelową – na przykład zapisanie
zakładka w aplikacji docelowej – ustaw wartość method
na "POST"
i dołącz
w polu enctype
. Ten przykład pozwala utworzyć zakładkę w aplikacji docelowej
więc używa "POST"
dla usług method
i "multipart/form-data"
dla
enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Akceptowanie plików
Tak jak w przypadku zmian w aplikacji, akceptowanie plików wymaga, aby method
miał wartość "POST"
i że element enctype
jest obecny. Dodatkowo pole enctype
musi być
Musisz dodać "multipart/form-data"
i files
.
Musisz też dodać tablicę files
określającą typy plików akceptowanych przez Twoją aplikację.
elementy tablicy to wpisy mające 2 elementy: pole name
i accept
. Pole accept
przyjmuje typ MIME, rozszerzenie pliku lub tablicę
które dotyczą obu tych elementów. Najlepiej jest podać tablicę, która zawiera zarówno
typu MIME i rozszerzenia pliku, ponieważ systemy operacyjne różnią się
w ich preferencjach.
{
"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"
}
]
}
}
}
Obsługa przychodzących treści
Sposób postępowania z przychodzącymi udostępnionymi danymi zależy od Ciebie i od Twoich . Na przykład:
- Klient poczty e-mail może utworzyć wersję roboczą nowego e-maila, używając
title
jako tematu wiadomości adres e-mail z elementamitext
iurl
połączonymi razem jako treść. - Aplikacja społecznościowa może utworzyć wersję roboczą nowego posta ignorującego
title
, wykorzystując przy tymtext
jako treść wiadomości i dodanieurl
jako linku. Jeślitext
to brakującego, aplikacja może używać elementuurl
w treści. Jeśli brakuje wartościurl
, aplikacja może przeskanowaćtext
w poszukiwaniu adresu URL i dodać go jako link. - Aplikacja do udostępniania zdjęć może utworzyć nowy pokaz slajdów, używając aplikacji
title
jako tytuł pokazu slajdów,text
jako opis ifiles
jako obrazy w pokazie slajdów. - Aplikacja do obsługi SMS-ów może utworzyć wersję roboczą nowej wiadomości za pomocą tych elementów:
text
iurl
scalone i usuwanetitle
.
Przetwarzanie udziałów GET
Jeśli użytkownik wybierze Twoją aplikację, a Twój element method
to "GET"
(parametr
domyślnie), przeglądarka otworzy nowe okno pod adresem URL action
. Przeglądarka wtedy
generuje ciąg zapytania przy użyciu wartości zakodowanych na potrzeby adresu URL podanych w pliku manifestu.
Jeśli na przykład aplikacja do udostępniania udostępnia title
i text
, ciąg zapytania to
?title=hello&text=world
Aby to zrobić, użyj DOMContentLoaded
detektor zdarzeń na pierwszym planie i przeanalizuj ciąg zapytania:
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'));
});
Pamiętaj, aby użyć skryptu service worker do wstępnego zapisywania w pamięci podręcznej action
aby szybko się wczytywała i działała niezawodnie nawet w trybie offline.
Workbox to narzędzie, które pomoże Ci
zaimplementuj wstępne zapisywanie w pamięci podręcznej w skrypcie service worker.
Przetwarzam udostępnienia POST
Jeśli method
to "POST"
, tak jakby aplikacja docelowa akceptuje zapisane
zakładki lub pliki udostępnione, treść przychodzącego żądania POST
zawiera
dane przekazywane przez aplikację do udostępniania (kodowanie z użyciem wartości enctype
)
podany w pliku manifestu.
Strona na pierwszym planie nie może bezpośrednio przetwarzać tych danych. Ponieważ dla strony dane są przedstawione jako
żądania, strona przekazuje je do skryptu service worker, gdzie można je przechwycić za pomocą
fetch
detektora zdarzeń. Możesz stąd przekazać dane z powrotem na pierwszy plan.
stronę za pomocą postMessage()
lub przekazać ją do serwera:
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);
})());
}
});
Weryfikowanie udostępnionych treści
Pamiętaj, aby zweryfikować przychodzące dane. Niestety, nie ma gwarancji, że inne aplikacje będą udostępniać odpowiednie treści z odpowiednim parametrem.
Na przykład na Androidzie pole url
będzie puste, ponieważ
nie są obsługiwane w systemie udostępniania na Androidzie. Zamiast tego adresy URL często występują w atrybutach
w polu text
lub czasami w polu title
.
Obsługa przeglądarek
Interfejs Web Share Target API jest obsługiwany w ten sposób:
Na wszystkich platformach musisz zainstalować aplikację internetową, aby wyświetlała się jako potencjalny cel otrzymywania udostępnionych danych.
Przykładowe aplikacje
Pokaż wsparcie dla interfejsu API
Czy zamierzasz korzystać z interfejsu Web Share Target API? Twoje publiczne wsparcie pomaga zespołowi Chromium nadaje priorytet funkcjom i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.
Wyślij tweeta na adres @ChromiumDev, używając hashtagu
#WebShareTarget
.
i daj nam znać, gdzie i jak go używasz.