Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

General Documentation

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

Issue with External Browser on Sign In (Privy SDK limitation)
Hello Apple App Review Team, We are using Privy to enable sign in with Farcaster in our app. Privy is a 3rd party authentication SDK, and it currently opens the authentication URL using the system browser. Unfortunately, this behavior is handled internally by Privy and we do not have access or control to override it in order to present the sign-in flow in-app using SFSafariViewController. We understand the importance of maintaining a seamless and secure user experience, and we fully support the use of SFSafariViewController or ASWebAuthenticationSession. However, since Privy does not expose an option to change this behavior at the moment, we are limited by their current implementation. We have reached out to the Privy team requesting a change or improvement that would allow us to use SFSafariViewController instead of the external browser. In the meantime, we would appreciate your guidance on how to proceed, or whether an exception could be granted due to this 3rd party SDK limitation. Thank you for your understanding and support.
0
0
205
Jul ’25
Missing Cookies in Set-Cookie Header in webRequest.onHeadersReceived callback in Safari Web Extension
We’re seeing an issue in our Safari Web Extension where not all cookies from the Set-Cookie response header are accessible. We are using macOS 15.4 and Safari 18.4. In the webRequest.onHeadersReceived callback, the Set-Cookie header returned by Safari only includes some of the cookies set by the server. If multiple Set-Cookie headers are present, we seem to receive only a partial list, some cookies are missing entirely. In Chrome and Firefox, the same callback provides all cookies set by the server without issue. We are looking for assistance in fixing these issues and having our Safari Extension function the same as it does in Firefox and Chrome.
0
1
170
Apr ’25
Push Notifications Not Working in iOS App or Safari Browser Created via PWA Builder
Push Notification Issue in iOS PWA App We’ve been trying to implement push notifications in our iOS app, which is a wrapper around a Vite PWA built using PWA Builder. Here's a detailed overview of the issues we’re facing: Problem Summary We originally had a working Vite PWA and used Firebase Cloud Messaging (FCM) for push notifications. When converting this PWA to an iOS app using PWA Builder: The notification permission prompt did not behave as expected in Safari. Even after requesting permission via a user gesture (e.g., button press), FCM token was not received. On Safari (both Mac and Windows), permission sometimes works, but the token isn’t saved until Safari is closed and reopened. In the iOS PWA app, the FCM token never gets retrieved. We tried the same process on Chrome, and everything works flawlessly there. What We’ve Tried Wrapped the permission request and FCM token logic in a user gesture (e.g., button click), as recommended. Confirmed our manifest includes all necessary fields (see below). Tested across macOS, Windows, Safari (desktop), and the iOS app. Manifest.json { "name": "Periscopio", "short_name": "Periscopio", "start_url": "/", "display": "standalone", "background_color": "#f2f2f2", "lang": "en", "scope": "/", "description": "Facilitates the collection of primary data for market research purposes.", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/maskable_icon_x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/maskable_icon_x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "edge_side_panel": { "preferred_width": 400 }, "display_override": [ "window-controls-overlay", "standalone" ], "theme_color": "#08244c", "orientation": "portrait" } Core Logic (Plain TypeScript) 1. Request Notification Permission + FCM Token async function handleRequestPermission(): Promise<string | null> { try { console.log("Requesting notification permission..."); const permission = await Notification.requestPermission(); console.log("Notification permission result:", permission); if (permission === "denied") { console.error("Notification permission was denied."); return null; } const token = await requestFCMToken(); console.log("FCM Token:", token); if (token) { console.log("Notification setup successful."); return token; } else { console.error("Failed to retrieve FCM token."); return null; } } catch (error) { console.error("Error requesting FCM token:", error); return null; } } 2. FCM Token Logic async function requestFCMToken(): Promise<string | undefined> { try { let permission = Notification.permission; if (permission === "default") { console.log("Requesting notification permission..."); permission = await Notification.requestPermission(); } if (permission === "granted") { console.log("Notification permission granted."); const isSupportedBrowser = await isSupported(); if (!isSupportedBrowser) { console.error("This browser does not support FCM."); return; } const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js"); console.log("Service Worker registered:", registration); const token = await getToken(cloudMessaging, { vapidKey: "YOUR_PUBLIC_VAPID_KEY_HERE", serviceWorkerRegistration: registration, }); if (token) { console.log("FCM Token:", token); localStorage.setItem("fcmToken", token); return token; } else { console.warn("No registration token available. Request permission to generate one."); return; } } else if (permission === "denied") { console.warn("Permission to notify was denied."); return; } else { console.warn("Notification permission not granted."); return; } } catch (error) { console.error("Error getting FCM token:", error); return; } } Request for Help We’d really appreciate support from anyone who’s successfully implemented FCM push notifications in a Vite PWA wrapped as an iOS app using PWA Builder. Is there something we’re missing about how iOS Safari handles push permissions in PWA mode? Could there be an issue with the service worker or the manifest setup that causes the token not to register? Any Safari-specific quirks to be aware of? Thanks in advance!
Topic: Safari & Web SubTopic: General
0
0
93
Apr ’25
XMLHttpRequest cannot load https://demo2.artios.cz/app37g/v105/php/endpoint.php due to access control checks
Hi, we are experiencing a strange issue with our Web App. Our web app runs entirely on the same domain , and we are making several AJAX requests to the same server. The Error occurs only on Iphones, the app works completely fine on androids and computers. Most of the requests work fine, but suddenly, one specific request always fails with the following error: XMLHttpRequest cannot load https://demo2.artios.cz/app37g/v105/php/endpoint.php due to access control checks What we have checked so far: ✅ CORS headers seem correct. Also we operate entirely on the same domain, client and server. ✅ The same request works fine in computer and android devices. ✅ The issue occurs only on iPhone (tested on Chrome and Safari). ✅ Some requests to the same endpoint pass, but suddenly, this specific request always fails. ✅ There is no OPTIONS preflight request logged in the network tab, but we use only simple requests. ✅ We are making a POST request with multipart/form-data. What is Your advice, or where I can find more info about this error? We do not think the CORS is the problem. We have tried to inspect with WebInspector but with no relevant answers. Thank You very much!
0
1
556
Feb ’25
iOS 26 WKWebView load url contain “#” will cancel when start load
0x158c2ce18 - [pageProxyID=33, webPageID=34, PID=883] WebPageProxy::didFailProvisionalLoadForFrame: frameID=4294967298, isMainFrame=1, domain=NSURLErrorDomain, code=-999, isMainFrame=1, willInternallyHandleFailure=0 Error Domain=NSURLErrorDomain Code=-999 "已取消" UserInfo={_NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <9A09D8F8-351D-4BE3-A1F7-0E2E325DC7BA>.<4>, _NSURLErrorRelatedURLSessionTaskErrorKey=( "LocalDataTask <9A09D8F8-351D-4BE3-A1F7-0E2E325DC7BA>.<4>" ), NSLocalizedDescription=已取消, _WKRecoveryAttempterErrorKey=<WKReloadFrameErrorRecoveryAttempter: 0x159acf6c0>, networkTaskDescription=LocalDataTask <9A09D8F8-351D-4BE3-A1F7-0E2E325DC7BA>.<4>, NSErrorFailingURLStringKey=https://oamobile.zmmc.com.cn:28385/pages/Reports/ZBReport.aspx?ShowInLegend=true&appid=69b487001fcc11bc30c7344e50768c3c&userid=9784299b-cced-4702-91b0-0476511ba8d2, NSErrorFailingURLKey=https://oamobile.zmmc.com.cn:28385/pages/Reports/ZBReport.aspx?ShowInLegend=true&appid=69b487001fcc11bc30c7344e50768c3c&userid=9784299b-cced-4702-91b0-0476511ba8d2, networkTaskMetricsPrivacyStance=Unknown} Failed to terminate process: Error Domain=com.apple.extensionKit.errorDomain Code=18 "(null)" UserInfo={NSUnderlyingError=0x159bd1830 {Error Domain=RBSRequestErrorDomain Code=3 "No such process found" UserInfo={NSLocalizedFailureReason=No such process found}}} After upgrade to ios 26, if WKWebView load url which did not contain "#" will always ok. but load url contain “#” will cancel when start load, then result in white screen
Topic: Safari & Web SubTopic: General Tags:
0
0
254
Jun ’25
iOS Mobile Video Audio Playback Issues in React
I'm experiencing issues with audio playback in my React video player component specifically on iOS mobile devices (iPhone/iPad). Even after implementing several recommended solutions, including Apple's own guidelines, the audio still isn't working properly on iOS Safari. It works completely fine on Android. On iOS, I ensured the video doesn't autoplay (it requires user interaction). Here are all the details: Environment iOS Safari (latest version) React 18 TypeScript Video files: MP4 with AAC audio codec Current Implementation const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, autoplay = true, }) => { const videoRef = useRef<HTMLVideoElement>(null); const isIOSDevice = isIOS(); // Custom iOS detection const [touchStartY, setTouchStartY] = useState<number | null>(null); const [touchStartTime, setTouchStartTime] = useState<number | null>(null); // Handle touch start event for gesture detection const handleTouchStart = (e: React.TouchEvent) => { setTouchStartY(e.touches[0].clientY); setTouchStartTime(Date.now()); }; // Handle touch end event with gesture validation const handleTouchEnd = (e: React.TouchEvent) => { if (touchStartY === null || touchStartTime === null) return; const touchEndY = e.changedTouches[0].clientY; const touchEndTime = Date.now(); // Validate if it's a legitimate tap (not a scroll) const verticalDistance = Math.abs(touchEndY - touchStartY); const touchDuration = touchEndTime - touchStartTime; // Only trigger for quick taps (< 200ms) with minimal vertical movement if (touchDuration < 200 && verticalDistance < 10) { handleVideoInteraction(e); } setTouchStartY(null); setTouchStartTime(null); }; // Simplified video interaction handler following Apple's guidelines const handleVideoInteraction = (e: React.MouseEvent | React.TouchEvent) => { console.log('Video interaction detected:', { type: e.type, timestamp: new Date().toISOString() }); // Ensure keyboard is dismissed (iOS requirement) if (document.activeElement instanceof HTMLElement) { document.activeElement.blur(); } e.stopPropagation(); const video = videoRef.current; if (!video || !video.paused) return; // Attempt playback in response to user gesture video.play().catch(err => console.error('Error playing video:', err)); }; // Effect to handle video source and initial state useEffect(() => { console.log('VideoPlayer props:', { src, loadingState }); setError(null); setLoadingState('initial'); setShowPlayButton(false); // Never show custom play button on iOS if (videoRef.current) { // Set crossOrigin attribute for CORS videoRef.current.crossOrigin = "anonymous"; if (autoplay && !hasPlayed && !isIOSDevice) { // Only autoplay on non-iOS devices dismissKeyboard(); setHasPlayed(true); } } }, [src, autoplay, hasPlayed, isIOSDevice]); return ( <Paper shadow="sm" radius="md" withBorder onClick={handleVideoInteraction} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} > <video ref={videoRef} autoPlay={!isIOSDevice && autoplay} playsInline controls crossOrigin="anonymous" preload="auto" onLoadedData={handleLoadedData} onLoadedMetadata={handleMetadataLoaded} onEnded={handleVideoEnd} onError={handleError} onPlay={dismissKeyboard} onClick={handleVideoInteraction} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} {...(!isFirefoxBrowser && { "x-webkit-airplay": "allow", "x-webkit-playsinline": true, "webkit-playsinline": true })} > <source src={videoSrc} type="video/mp4" /> </video> </Paper> ); }; Apple's Guidelines Implementation Removed custom play controls on iOS Using native video controls for user interaction Ensuring audio playback is triggered by user gesture Following Apple's audio session guidelines Properly handling the canplaythrough event Current Behavior Video plays but without sound on iOS mobile Mute/unmute button in native video controls doesn't work Audio works fine on desktop browsers and Android devices Videos are confirmed to have AAC audio codec No console errors related to audio playback User interaction doesn't trigger audio as expected Questions Are there any additional iOS-specific requirements I'm missing? Could this be related to iOS audio session handling? Are there known issues with React's handling of video elements on iOS? Should I be implementing additional audio context initialization? Any insights or suggestions would be greatly appreciated!
0
0
385
Mar ’25
Embedded Power BI reports crashes in mobile layout using iOS
We're embedding the Power BI reports into our portal by using JS library. While testing them, we found that mobile layout of the reports don't work as we expect on iOS devices (tested in Chrome and Safari). There are two principals issues: 1) the site is automatically refreshed when the users filter the data (we reduced them to lower expression) and 2) the site also crashes after a while using the dashboard by applying different filters.
0
0
56
Mar ’25
Mailto href is not working in iOS 18.3.2
Hi Team, I'm using the simple mailto functionality in the demo page and when I tested the same via Safari mailto functionality is not working. However, the same feature is working as expected via Chrome. Demo: https://jsfiddle.net/xut0ed4y/ Kindly help.me to resolve this issue.
Topic: Safari & Web SubTopic: General Tags:
0
0
269
Mar ’25
Worker load was blocked by Cross-Origin-Embedder-Policy
Hello, I am developing a website which starts a web worker using the js code: const zarrWorker = new Worker('./zarr_file.js', { type: 'module' });. The script 'zarr_file.js' is served from the same origin with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin and it is importing external modules through the import statement (e.g. import * as zarr from "https://cdn.jsdelivr.net/npm/zarrita/+esm";). All the external modules are blocked by Safari with the error Worker load was blocked by Cross-Origin-Embedder-Policy, although I can see (by running curl on them) that they correctly set cross-origin-resource-policy: cross-origin`. The same website works fine in Chrome and Firefox. Is it a bug or is Safari implementing stricter policies? In the latter case what would be the solution?
0
0
116
Aug ’25
Smart App Banner not appearing
I'm trying to set up a smart app banner for my app, but it doesn't appear on the website when I try to test it. I have the meta tag on my website: <meta name="apple-itunes-app" content="app-id=6740216045" /> When I inspect the website, I can see that the meta tag is showing up in the head, but the banner is nowhere to be found. I tried clearing website data but still no dice.
0
0
282
Jan ’25
How to Use Apple Web Payment Merchant Certificate?
Doc URL: https://developer.apple.com/documentation/applepayontheweb/requesting-an-apple-pay-payment-session How can I send a POST request using PHP, and what certificates are required? Currently, I have downloaded the following files on the backend: merchant_id.cer, apple_pay.cer, and a local cert.p12 file This my code: But,run error:cURL Error: unable to set private key file: '***/private.pem' type PEM%
0
0
100
Apr ’25
Safari doesn't seem to respect cache-control on fetch redirects
I am calling fetch with a POST on page1 in Safari. No special cache parameters on the fetch call. The response from the server is a 303 redirect to page2 The second page -- page2 -- is in my browser's cache with cache-control "public, max-age=31536000, immutable". For some reason, the page2 redirect is causing a server hit to re-GET the second page every time instead of pulling from cache. If I instead directly get the second page by doing a fetch on page2, there is no server hit. If I do this on Chrome or Firefox, it behaves as I would expect, pulling page2 from the cache with no server hit. In case it matters, the fetch is coming from within an iFrame. Also, if I change the original POST to a GET, the problem still happens. I am using a pretty old version of Safari on my Mac, so I could chalk it up to that, but I am getting the same behavior with Safari on my iPhone with iOS 18.3.2 Any ideas? Thanks.
Topic: Safari & Web SubTopic: General Tags:
0
0
51
Mar ’25
WebXR Consent Dialog
Based on the "Build immersive web experiences with WebXR"-Video for visionOS there is no way to disable the consent prompts for entering an immersive experience or consent hand-tracking. For the microphone it's possible to "greenlight" specific websites for mic input, which works great. I'd welcome it, if it were possible to add specific websites in the settings, in which those consent dialogs aren't shown each time. In my opinion, the user interaction through a button that launches the experience would be sufficient to not disorient.
0
1
93
Jun ’25
Suggestions for OAuth2 in Swift
Hello! I have a few questions about integrating an OAuth2 API into my Swift application. I am using this API to access user data from the website (users will authenticate themselves within the app). I have seen other apps use this API in the way that I am describing it so I know that it is possible. However, I am not sure how to implement it. Are there any recommended ways to use an OAuth2 API in my application? The API that I am using does not specifically say that it supports PKCE. However, I have heard from some sources that it does. If it does not support PKCE, how do I still create a secure app infrastructure that will pass App Store Review? At a more basic level, what is the difference between OAuth2 and PKCE? What should I use in my app? Are there any resources to learn a little bit more about these protocols so that I understand them better? Thanks!
0
0
68
Jun ’25
Web AR stopped working after the IOS 18.4 update for iPad gen9
So I have web Augmented Reality apps hosted on AWS S3. It worked fine for a month, but as soon as the IOS 18.4 update was installed they stopped working. It works on every other device and IOS versions. The URLs for the mentioned AR experiences: digitechonline.in/solsprefimaginewt8/ digitechonline.in/solsprefimaginewt8p2/ digitechonline.in/orocarear/ These AR experiences get stuck on the loading screen and either reload or give an error. Ideally the camera is supposed to open. I have tested it on Safari, Microsoft Edge and Google Chrome browsers. They were created through Unity webgl and hosted on AWS S3 bucket. Please provide a quick solution to this.
0
0
101
Apr ’25
Camara preview High probability failed on iOS17.5
When using WKWebview to load the following url on iOS17.5, The Camara preview page is likely to not display the image, but there is no error report. The video cannot be loaded. There is no problem with iOS17 and iOS18. I can't find the cause of the error, How to avoid this problem? I hope you can provide some suggestions. I want a way to avoid the error,Thanks STEPS TO REPRODUCE Run iOSTest.xcodeproj on iOS17.5 Tap WKWebview(Camara) Waiting webview load url tap 手持设备训练 立即开始 download demo https://github.com/xuty/Report22/raw/refs/heads/main/iOSTest_1_url.zip
Topic: Safari & Web SubTopic: General
0
0
274
Jan ’25
Repeated Camera Permission Prompts in Web App on Safari (iOS)
Hi everyone, We're building a web application using Next.js that captures around 40 images across different routes as part of a guided user flow. At the beginning of the process, we explicitly request camera permission using navigator.mediaDevices.getUserMedia(...), and the user grants it successfully. However, as users proceed through the flow (navigating between routes), Safari on iOS intermittently re-prompts for camera access—despite the initial permission already being granted and the origin (domain) remaining unchanged. This repeated prompting interrupts the user experience significantly. What we’ve tried: Ensuring camera access is requested only once and reused where possible. Using persistent media stream across routes (where feasible). Testing across different iOS versions to confirm consistency. Questions: Is there a known workaround or best practice to persist camera access across route transitions in a SPA/PWA context on iOS? Are there any Safari-specific behaviors or restrictions related to WebRTC / getUserMedia we should be aware of? Would embedding the camera view in an iframe or maintaining a persistent component help avoid re-prompting? Any guidance or shared experience would be greatly appreciated. Thanks in advance!
Topic: Safari & Web SubTopic: General
0
0
58
Jun ’25
iOS 26/MacOS 26 - PWA App Icons: Dark,Clear,Tinted Appearance
Hi everyone, I'm exploring the new app icon appearance options (Clear, Dark, Tinted) for Progressive Web Apps (PWAs) on iOS26, iPadOS26, and macOS26. Currently, PWA icons don't seem to render well with these new appearances, particularly in Clear and Tinted modes, resulting in very very poor visual quality. You can hardly see anything. Has support for these icon appearances been fully implemented for PWAs? If so, could someone point me to the relevant Apple Developer documentation or provide guidance on how to configure PWA icons to support Clear, Dark, and Tinted appearances? I've searched the Apple Developer Forums, Stack Overflow, and Reddit but haven't found clear information on this topic.A possible solution is a png file with transparent areas, but if the pattern is dark, nothing will be visible in dark mode. Any insights or resources would be greatly appreciated. Thanks! (plz don't give up on PWA😭) Reference: https://developer.apple.com/forums/thread/761615 https://stackoverflow.com/questions/78780916/is-there-a-way-to-provide-light-dark-and-tinted-variants-of-apple-touch-icon https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
0
2
433
Jun ’25