Skip to content

[Feature] Integrate Receiving data with the Webshare Target API resp. share_target attribute in manifest #525

@schlagmichdoch

Description

@schlagmichdoch

When installing snapdrop as PWA by adding it to home screen, snapdrop could register itself as a share target to the device.
By doing that files can simply be send via snapdrop from the native share menu.

The workflow for users would then be reduced to the following:

  1. User shares File(s)/Photo(s) directly from native share menu to the installed snapdrop PWA
  2. User taps on receiver to send files immediatly

For now this would be restricted mostly to Android devices and Chromium based browsers as Apple has not allowed this yet.

Integration would look like this:

  1. web manifest has a attribute share_target which tells the launcher to publish the PWA as a share target on install
{
  "share_target": {
    "action": "/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "url",
      "text": "text",
      "files": [
        {
          "name": "photos",
          "accept": ["image/*"]
        }
      ]
    }
  }
}

The files attribute would need to be filled with every filetype we accept. */* should work to accept everything.
2. The files shared should be saved to Cache or IndexDB via service worker on fetch event:

self.addEventListener("fetch", (event) => {
  // Regular requests not related to Web Share Target.
  if (event.request.method !== "POST") {
    event.respondWith(fetch(event.request));
    return;
  }

  // Requests related to Web Share Target.
  event.respondWith(
    (async () => {
      const formData = await event.request.formData();
      const files = formData.get("files") || "";
      const text = formData.get("text") || "";
      const url = formData.get("url") || "";
      // if files.length > 0 save files to IndexedDB or Cache
      // save url and text to IndexedDB or Cache
      // redirect to url with flag to directly enter share UI
      return Response.redirect("/?share-target=true", 303);
    })()
  );
});
  1. Redirect to sth like https://snapdrop.net/?share-target=true
  2. Detect share-target=true and enter Sharing UI to send contents files / text directly (similar to PasteUI on Implement Paste UI for selecting recipient peer and other paste related stuff #488 )
  3. When clicking a target peer, instead of opening an input menu the shared contents are send directly:
    if files exists: send files
    elseif url exists: append url to text and send as text
    else: send text
  4. clear files, text and url entries in Cache resp. IndexedDB and remove share-target attribute from url / location.history

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions