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

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

Pete LePage

Joe Medley

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.

Uwaga: interfejs Web Share Target API to tylko połowa magii. Aplikacje internetowe mogą udostępniać dane, plików, linków i tekstu za pomocą interfejsu Web Share API. Zobacz Interfejs Web Share API.

Selektor miejsca docelowego udostępniania na poziomie systemu z opcją zainstalowanej aplikacji PWA.

Zobacz działanie celu udziału w internecie

1. 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.
2. 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.
3. Otwórz dowolną aplikację, która obsługuje udostępnianie, lub użyj przycisku Udostępnij w aplikacji w wersji demonstracyjnej.
4. 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

.

Uwaga: jeśli chcesz udostępnić plik manifestu, możesz mieć tylko 1 share_target na plik manifestu. w różnych miejscach w aplikacji, jako opcję udostępniania docelowej strony docelowej (strony określonej we wpisie url).

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 elementami text i url połączonymi razem jako treść.
• Aplikacja społecznościowa może utworzyć wersję roboczą nowego posta ignorującego title, wykorzystując przy tym text jako treść wiadomości i dodanie url jako linku. Jeśli text to brakującego, aplikacja może używać elementu url w treści. Jeśli brakuje wartości url, 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 i files 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 i url scalone i usuwane title.

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

Przykładowa aplikacja docelowa udostępniania.

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

• Skuosh
• Aplikacja PWA notatnika

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.