4

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
  • 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 can 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

Cam
  • 960
  • 1
  • 12
  • 29
  • You might be able to get answers by asking in their Github issues. https://github.com/ionic-team/capacitor/issues – Stefnotch Mar 07 '22 at 13:20
  • Thanks @Stefnotch! yes, i will certainly give it a go. Thanks for putting together the ServiceWorker tutorial too, insightful. – Cam Mar 13 '22 at 22:42
  • https://github.com/ionic-team/capacitor/discussions/5502 – Cam Mar 14 '22 at 08:16

1 Answers1

0

I seen lot of questions about capacitor and service workers that people are trying to use it to upgrade the application. Service worker is good if your source is external site and you load the code trough service worker. If you have embedded files in capacitor then you have some ionic plugin for refreshing the code (don't remember the name ). The problem if you want to deliver code from external website is that apple store will ban it. This pattern is called TWA.

Marko Rakic
  • 36
  • 2