在 iOS 上的 Capacitor 应用程序中运行 ServiceWorker
tl;dr
本质上，我需要设置 COOP/COEP 标头以在我的 Capacitor v3 iOS 应用程序中启用 SharedArrayBuffer 功能，并且运行 ServiceWorker 来设置标头是我迄今为止找到的唯一解决方案。
问题背景
Chrome Android 和 Safari iOS 现在都支持 SharedArrayBuffer 这意味着 Ffmpeg.wasm 可以利用多线程。 SharedArrayBuffer 需要一个安全上下文来启用功能，这是通过设置以下标头来完成的；
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
进一步要求；
- 该网站需要通过 HTTPS 或 localhost 提供
- 标头必须在服务器端设置（标头不能使用 head 标签中的
meta http-equiv=".."设置）
我发现了这个电容器的实施存在问题。我的应用程序是自包含的（应用程序文件在本地提供），它不需要外部http请求来提供应用程序文件。这意味着在服务器端设置所需的标头不是一个选项。
解决方案
以下解决方案建议使用 ServiceWorker 在客户端设置 COOP/COEP 标头，这正是我所需要的。 在不接触服务器的情况下启用 COOP/COEP
问题
ServiceWorkers 有自己的一套要求，这就是我陷入困境的地方。
要在 iOS 上启用此 ServiceWorker API，我使用 应用程序绑定域 。
github 中的以下问题 支持将带有电容器的 PWA 部署为本机应用 概述了所需的步骤在 Capacitor 中实现应用程序绑定域。
其中包括；
添加您的域列表，包括。 server.hostname / localhost 到 Info.plist。
在 src 中启用
limitsNavigationsToAppBoundDomains-capacitor/capacitor.config.json
设置应用程序绑定域后，我会出现以下错误；
serviceWorker.register() must be called with a script URL whose protocol is either HTTP or HTTPS
发生这种情况是因为 Capacitor 应用程序由 iOS 中的 capacitor:// 提供服务。
这附近还有吗？ （不需要从远程 URL 提供服务）。
或者有人发现了在 Capacitor 客户端设置 COOP/COEP 标头的更好方法吗？
谢谢卡姆
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
limitsNavigationsToAppBoundDomainsin 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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我看到很多关于电容器和服务人员的问题，人们试图使用它来升级应用程序。如果您的源是外部站点并且通过 Service Worker 加载代码，则 Service Worker 会很好。如果您在电容器中嵌入了文件，那么您有一些用于刷新代码的离子插件（不记得名称
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.