Running ServiceWorker in Capacitor App on iOS

[merri-ment]

tl;dr

Essentially i need to set COOP/COEP headers to enable SharedArrayBuffer functionality in my Capacitor v3 iOS App and running a ServiceWorker to set the headers is the only solution i have found so far.

Background to the problem

Both Chrome Android and Safari iOS now support SharedArrayBuffer which now means Ffmpeg.wasm can utilise multi-threading. SharedArrayBuffer requires a secure context to enable functionality, this is done by setting the following headers;

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Further requirements;

• The site needs to be served over HTTPS or localhost
• And the headers have to be set server side (headers cannot be set using meta http-equiv=".." in the head tag)

I've found this problematic in Capacitor to implement.
My App is self contained (App files served locally), it doesn't require external http requests to serve the App files. This means setting the required headers server-side isn't an option.

The Work-around solution

The following solution suggests using a ServiceWorker to set the COOP/COEP headers client-side, which is exactly what i need. Enabling COOP/COEP without touching the server

The Problem

ServiceWorkers have their own set of requirements and this is where i'm stuck.

To enable this ServiceWorker API on iOS i'm using App-Bound Domains.

The following issue in github Support deploying a PWA with capacitor as native app outlines the steps required to implement App-Bound Domains in Capacitor.

Which include;

• Adding a list of your domains incl. server.hostname / localhost to Info.plist.
• Enabling limitsNavigationsToAppBoundDomains in your src - capacitor/capacitor.config.json

After setting App-Bound Domains i get the following error;

serviceWorker.register() must be called with a script URL whose protocol is either HTTP or HTTPS

This happens because Capacitor apps are served from capacitor:// in iOS.
Is there anyway around this? ( that does not require serving from a remote url).

Or has anyone discovered a better approach to setting COOP/COEP headers client-side in Capacitor?

Thanks Cam

[frissonlabs]

Hi @merri-ment , did you end up solving this? Running into the same obstacle as well!

[frissonlabs]

For anyone else, here's a barebones test app for demoing this issue:
https://github.com/frissonlabs/ionic-react-capacitor-sharedarraybuffer

SharedArrayBuffer is undefined in Android even though the COOP/COEP headers are set, not sure why this doesn't work.

[pwespi]

COOP/COEP heaaders are required for crossOriginIsolated capabilities, but they are not necessarily sufficient.
See whatwg/html#6098

[galaxyblur]

Also facing this issue and would appreciate any help from the Capacitor team or community! Particularly, we should be able to tap into the Capacitor http server and set headers as needed.

[marcelo-nagatomo]

hey all, I'm also facing this issue while trying to enable SharedArrayBuffer on capacitor-ios..
I kind of duplicated this issue here: #6182
And here are some findings I got while debugging in iOS: #6182 (comment)

I tested in Android Chrome opening the link below and SharedArrayBuffer seems to be available:
https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin

[marcelo-nagatomo]

It seems Android Chrome and Android Webview are 2 different things.... =/
Android WebView doesn't support site isolation so there's no way to enable SharedArrayBuffer on the webview today
More info:
https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#modes-and-availability

On iOS I was able to downgrade to [email protected] which uses GCDWebServer rather than WebKit's URLSchemeHandler. After changing its source code to add COEP/COOP headers I was able to enable cross-origin isolation.

A proper solution would be a new plugin that uses a local web server or wait to see if WebKit could one day allow the URLSchemeHandler to set response headers on local files.

[skijit]

@marcelo-nagatomo Can you clarify how you were able to downgrade to a different webview in a capacitor project? My initial tests have failed and it is listed as a known incompatible plugin in the capacitor documentation.

[patrickcorrigan]

Did you make any progress on this @skijit :)