PoC: Feasibility of ‘Send to’ on Apple devices using a PWA

Ticket

https://dev.azure.com/av360/MAVERICK%20Platform/_boards/board/t/MAVERICK%20Platform/Features?workitem=30839

Summary

A pure PWA cannot act as a sharing target under iOS. On other platforms, it should be possible via the web sharing API, but support for this is still limited. See https://caniuse.com/mdn-html_manifest_share_target for more Informations.

However, by converting the PWA into a native app with the help of Capacitor, it is feasible. (https://capacitorjs.com/)

PWA Requieriments

Repository

https://dev.azure.com/av360/MAVERICK%20Platform/_git/ProofOfConcepts?path=/src/ios-sharing-to-maverick

Setup PWA

pnpx create-react-app pwa-maverick --template cra-template-pwa-typescript

(update all dependencies see package.json)

cd pwa-maverick
pnpm install

Check manifest.json Register service worker (serviceWorkerRegistration.ts and service-worker.ts)

Test PWA

Create a build (pnpm build)
cd build
http-server -p 3015 ./

Go to http://127.0.0.1:3015/ and check in Application Tab of console if Service Worker and Storage are registered.

Capacitor Requirements

• Node Lts
• Cocoapods (Check, if installed with "gem which cocoapods")

if Cocoapods are not installed:

sudo gem install cocoapods 
in my case I needed to install ruby completly: 
sudo gem install drb -v 2.0.6
sudo gem install activesupport -v 6.1.7.8)

Add / Install Capacitor

pnpm i install @capacitor/core @capacitor/cli
npx cap init --web-dir=build
pnpm i @capacitor/android @capacitor/ios @capacitor/app @capacitor/filesystem send-intent
npx cap add ios
npx cap sync (everytime you changed the build)

Add Share Extension in XCode

In the end, I used the Capacitor plugin send-intent (https://github.com/carsten-klaffke/send-intent ) to archive the sharing capability. You need to follow the instructions for this plugin, but here are some hints:

Set the activation rules in the Info.plist of your ShareExtension

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSExtension</key>
    <dict>
        <key>NSExtensionAttributes</key>
        <dict>
            <key>NSExtensionActivationRule</key>
            <dict>
                <key>NSExtensionActivationSupportsFileWithMaxCount</key>
                <integer>5</integer>
                <key>NSExtensionActivationSupportsImageWithMaxCount</key>
                <integer>5</integer>
                <key>NSExtensionActivationSupportsMovieWithMaxCount</key>
                <integer>5</integer>
                <key>NSExtensionActivationSupportsText</key>
                <true/>
                <key>NSExtensionActivationSupportsWebPageWithMaxCount</key>
                <integer>1</integer>
                <key>NSExtensionActivationSupportsWebURLWithMaxCount</key>
                <integer>1</integer>
                <key>NSExtensionActivationUsesStrictMatching</key>
                <false/>
            </dict>
        </dict>
        <key>NSExtensionMainStoryboard</key>
        <string>MainInterface</string>
        <key>NSExtensionPointIdentifier</key>
        <string>com.apple.share-services</string>
    </dict>
</dict>
</plist>

Add App Group

In order to allow sharing of files between the extension and your main app, you need to create a app group, with a unique app group id, which is checked for both your extension and main app. This is important to create same kind of storage between the SharingExtension and the App.

Update the code of the ShareViewController with the code in this repository.

Screenshots

Share Url

Share Url in Safari

Shared Url in MAVERICK PWA

---

Share Image

Share image in photo app

Shared image in MAVERICK PWA

---

Share PDF

Share PDF in data-app

Shared PDF in MAVERICK PWA

---