File Web Share Target

Я часто говорил, что для того, чтобы веб-приложения эффективно конкурировали в мире приложений, они должны быть интегрированы во все места, где пользователи ожидают, что приложения будут. Обмен данными между приложениями является одной из основных недостающих частей веб-платформы, и, в частности, одной из последних основных отсутствующих функций является общий data out of their silo на уровне: веб-приложения должны иметь возможность получать data out of their silo и data out of their silo в другие веб-сайты и приложения; они также должны иметь возможность получать данные из других собственных приложений и сайтов.

API File Share Target - это изменение в интерфейсе API, которое теперь доступно в Chrome Canary. API расширяет Web Share Target API , Web Share Target API приложениям и сайтам обмениваться простыми ссылками и текстом с веб-сайтами, интегрируя их в функции совместного использования систем.

Этот очень статичный файловый блог использует API-интерфейс Target Web Share, поэтому я могу быстро share links который мне интересен из любого приложения Android, а также I enabled the File Share Target API so that I can upload images to my blog directly from the Camera app on Android на прошлой неделе. Этот пост посвящен тому, как я это сделал (и украл некоторый код у Джейка Арчибальда - он разработал множество ошибок для интеграции, которую они делают в squoosh.app .)

File Share Target API - это очень новый API, который полностью прогрессивен. Если ваше приложение может обрабатывать запросы Form POST вы можете легко интегрироваться с этим API. Основной процесс заключается в следующем: когда пользователь выбирает ваше приложение из собственного средства выбора, Chrome отправит запрос Form POST на ваш сервер, и вам решать, что вы с ним делаете (обрабатываете работник службы или сервер).

Чтобы добавить поддержку обмена файлами в ваше веб-приложение, вам нужно сделать две вещи:

  1. Объявите о поддержке обмена файлами через файл манифеста,
  2. Обработайте запрос формы POST у вашего сервисного работника.

Манифест объявляет хост-системе, как должен быть отображен общий доступ из хост-приложения в веб-приложение. В приведенном ниже манифесте, в сущности, говорится: «Когда пользователь совместно использует файл типа 'image / *', отправьте POST-запрос формы в '/ share / image /' и назовите данные" file "".

  • Manifest.json *
{
  "name": "Blog: Share Image",
  "short_name": "Blog: Share Image",
  "start_url": "/share/image/",
  "theme_color": "#000000",
  "background_color": "#000000",
  "icons": [ {
      "sizes": "192x192",
      "src": "/images/me.png",
      "type": "image/png"
  }],
  "share_target": {
    "action": "/share/image/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "file",
          "accept": ["image/*"]
        }
      ]
    }
  },
  "display": "standalone",
  "scope": "/share/"
}

После того, как пользователь предоставит доступ к вашему веб-приложению, Chrome отправит веб-запрос на ваш сайт с данными файла в качестве полезной нагрузки.

Рекомендуется обрабатывать запрос POST внутри сервисного работника, чтобы 1) он был быстрым, 2) отказоустойчивым, чтобы сеть была недоступна. Вы можете сделать это следующим образом:

  • serviceworker.js * - demo
onfetch = async (event) => {
  if (event.request.method !== 'POST') return;
  if (event.request.url.startsWith('https://paul.kinlan.me/share/image/') === false) return;

  /* This is to fix the issue Jake found */
  event.respondWith(Response.redirect('/share/image/'));
  
  event.waitUntil(async function () {
    const data = await event.request.formData();
    const client = await self.clients.get(event.resultingClientId || event.clientId);
    // Get the data from the named element 'file'
    const file = data.get('file');

    console.log('file', file);
    client.postMessage({ file, action: 'load-image' });
  }());
};

Есть несколько интересных вещей, происходящих выше, которые можно быстро суммировать как:

  • Визуализировать пользовательский интерфейс как результат запроса POST , выполнив перенаправление.
  • Прочитайте данные, которые представлены через форму через event.request.formData()
  • Отправьте данные в открытое окно (это будет пользовательский интерфейс, на который мы перенаправили пользователя в первом пункте).

Это полностью зависит от вас, что вы делаете с данными, которые были отправлены вашему сервисному работнику, но в случае моего приложения мне нужно было показать их непосредственно в пользовательском интерфейсе, поэтому мне нужно найти окно, которое использует пользователь, и postMessage данные там.

  • index.html * - demo
navigator.serviceWorker.onmessage = (event) => {
  console.log(event);
  imageBlob = event.data.file;
  // Update the UI with the data that has been shared to it.
  imageShare.src = URL.createObjectURL(imageBlob);
};

И это все. Если у вас уже есть конечная точка API для ваших веб-форм, то это простое, но мощное дополнение, которое вы можете сделать на своем сайте.

Web Share Target API - невероятно мощный примитив платформы, который преодолевает еще один барьер, который веб-приложения имеют на своих хост-платформах.

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.