Odbieranie udostępnionych danych za pomocą interfejsu Web Share Target API

Udostępnianie na urządzeniach mobilnych i komputerach uproszczone dzięki interfejsowi Web Share Target API

Na komputerze lub urządzeniu mobilnym udostępnianie powinno być tak proste jak kliknięcie przycisku Udostępnij, wybranie aplikacji i wskazanie osób, którym chcesz udostępnić plik. Możesz na przykład udostępnić ciekawy artykuł, wysyłając go e-mailem do znajomych lub tweetując go na cały świat.

Wcześniej tylko aplikacje na konkretne platformy mogły rejestrować się w systemie operacyjnym, aby otrzymywać udostępnienia z innych zainstalowanych aplikacji. Dzięki interfejsowi Web Share Target API zainstalowane aplikacje internetowe mogą zarejestrować się w podstawowym systemie operacyjnym jako docelowe miejsce udostępniania, aby otrzymywać udostępniane treści.

Telefon z Androidem z otwartą szufladą „Udostępnij przez”.
Selektor udostępniania na poziomie systemu z opcją zainstalowanej progresywnej aplikacji internetowej.

Jak działa kierowanie na użytkowników, którzy udostępniają treści w internecie

  1. Jeśli używasz Chrome w wersji 76 lub nowszej na Androida albo Chrome w wersji 89 lub nowszej na komputerze, otwórz prezentację dotyczącą celu udostępniania w internecie.
  2. Gdy pojawi się odpowiedni komunikat, kliknij Zainstaluj, aby dodać aplikację do ekranu głównego. Możesz też użyć menu Chrome, aby dodać aplikację do ekranu głównego.
  3. Otwórz dowolną aplikację obsługującą udostępnianie lub użyj przycisku Udostępnij w aplikacji demonstracyjnej.
  4. W selektorze kierowania wybierz Test udostępniania w internecie.

Po udostępnieniu wszystkie informacje powinny być widoczne w docelowej aplikacji internetowej udziału w internecie.

Rejestrowanie aplikacji jako miejsca docelowego udostępniania

Aby zarejestrować aplikację jako docelowe miejsce udostępniania, musi ona spełniać kryteria instalacji Chrome. Ponadto zanim użytkownik będzie mógł udostępniać treści do Twojej aplikacji, musi ją dodać do ekranu głównego. Zapobiega to przypadkowemu dodawaniu witryn do opcji udostępniania użytkownika i zapewnia, że udostępnianie jest czymś, co użytkownicy chcą robić w Twojej aplikacji.

Aktualizowanie pliku manifestu aplikacji internetowej

Aby zarejestrować aplikację jako docel udostępniania, dodaj do jej pliku manifestu aplikacji internetowej wpis share_target. Wskazuje to systemowi operacyjnemu, że Twoja aplikacja ma być uwzględniona jako opcja w oknie wyboru intencji. To, co dodasz do pliku manifestu, steruje danymi akceptowanymi przez aplikację. W przypadku elementu share_target występują 3 typowe scenariusze:

  • Akceptowanie podstawowych informacji
  • Akceptowanie zmian w aplikacji
  • Akceptowanie plików

Akceptacja podstawowych informacji

Jeśli docelowa aplikacja akceptuje tylko podstawowe informacje, takie jak dane, linki i tekst, dodaj do pliku manifest.json:

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

Jeśli Twoja aplikacja ma już schemat udostępniania adresów URL, możesz zastąpić wartości params swoimi parametrami zapytania. Jeśli na przykład schemat udostępniania adresu URL używa parametru body zamiast text, możesz zastąpić "text": "text" parametrem "text": "body".

Jeśli nie podasz wartości method, zostanie ona domyślnie ustawiona na "GET". Pole enctype, które nie jest widoczne w tym przykładzie, wskazuje typ kodowania danych. W przypadku metody "GET" parametr enctype ma domyślnie wartość "application/x-www-form-urlencoded" i jest ignorowany, jeśli zostanie ustawiony na inną wartość.

Akceptowanie zmian w aplikacji

Jeśli udostępnione dane w jakiś sposób zmieniają aplikację docelową (np. zapisują w niej zakładkę), ustaw wartość method na "POST" i uwzględnij pole enctype. Przykład poniżej tworzy zakładkę w aplikacji docelowej, więc używa "POST" dla method"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, akceptacja plików wymaga, by pole method miało wartość "POST" i był dostępny enctype. Dodatkowo enctype musi być "multipart/form-data", a musi zostać dodany wpis files.

Musisz też dodać tablicę files definiującą typy plików akceptowanych przez aplikację. Elementy tablicy to wpisy z 2 składowymi: polem name i polem accept. Pole accept przyjmuje typ MIME, rozszerzenie pliku lub tablicę zawierającą oba te elementy. Najlepiej jest podać tablicę zawierającą zarówno typ MIME, jak i rozszerzenie pliku, ponieważ różne systemy operacyjne preferują.

{
 
"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

To, jak potraktujesz przychodzące dane, zależy od Ciebie i Twojej aplikacji. Na przykład:

  • Klient poczty e-mail może utworzyć nowy e-mail, którego tematem będzie title, a treść będzie zawierać połączone ze sobą ciągi znaków text i url.
  • Aplikacja do obsługi sieci społecznościowych może utworzyć nowy post ignorujący title, używając tekstu text jako treści wiadomości i dodając url jako link. Jeśli text jest nieobecny, aplikacja może użyć url w treści. Jeśli brakuje elementu url, aplikacja może skanować text w celu znalezienia adresu URL i dodania go jako linku.
  • Aplikacja do udostępniania zdjęć może utworzyć nowy pokaz slajdów, używając pola title jako tytułu pokazu, text jako opisu i files jako obrazów w pokazie slajdów.
  • Aplikacja do obsługi wiadomości tekstowych może utworzyć nową wiadomość, łącząc texturl, a następnie odrzucając title.

Przetwarzanie udostępnień GET

Jeśli użytkownik wybierze Twoją aplikację, a wartość parametru method to "GET" (wartość domyślna), przeglądarka otworzy nowe okno z adresem URL action. Następnie przeglądarka generuje ciąg zapytania, używając wartości zakodowanych w adresie URL i podanych w pliku manifestu. Jeśli na przykład aplikacja do udostępniania udostępnia funkcje title i text, ciąg zapytania to ?title=hello&text=world. Aby przetworzyć tę wartość, użyj na stronie z przodu detektora zdarzeń DOMContentLoaded 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ć mechanizmu Service Worker do wstępnego zapisywania strony action w celu jej szybkiego ładowania i poprawnego działania, nawet gdy użytkownik jest offline. Workbox to narzędzie, które może Ci pomóc w wdrożeniu wcześniejszego buforowania w skrypcie service worker.

Przetwarzanie udostępnień POST

Jeśli method to "POST", co oznacza, że aplikacja docelowa akceptuje zapisane zakładki lub udostępnione pliki, treść przychodzącego żądania POST zawiera dane przekazane przez aplikację do udostępniania, zakodowane za pomocą wartości enctype podanej w manifeście.

Strona na pierwszym planie nie może przetwarzać tych danych bezpośrednio. Strona widzi dane jako żądanie, więc przekazuje je do skryptu service worker, w którym możesz je przechwycić za pomocą detektora zdarzeń fetch. Możesz stąd przekazać dane z powrotem na stronę na pierwszym planie za pomocą funkcji postMessage() lub przekazać je na serwer:

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

Telefon z Androidem z aplikacją demonstracyjną z udostępnionymi treściami.
Przykładowa aplikacja docelowa do udostępniania.

Pamiętaj, aby weryfikować przychodzące dane. Niestety nie ma gwarancji, że inne aplikacje udostępnią odpowiednie treści w odpowiednim parametrze.

Na przykład na Androidzie pole url będzie puste, ponieważ nie jest obsługiwane w systemie udostępniania na Androidzie. Zamiast tego adresy URL często pojawiają się w polu text lub czasami w polu title.

Obsługa przeglądarek

Interfejs Web Share Target API jest obsługiwany w sposób opisany poniżej:

Na wszystkich platformach aplikacja internetowa musi być zainstalowana, aby mogła się wyświetlać jako potencjalny odbiorca udostępnianych danych.

Przykładowe aplikacje

Pokaż informacje o pomocy dotyczącej interfejsu API

Zamierzasz używać interfejsu Web Share Target API? Twoja publiczna pomoc pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta do @ChromiumDev, używając hashtaga #WebShareTarget, i podaj, gdzie i jak go używasz.