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

Is the branded email feature available in France? What is the timeline?
Hello, I followed the instructions to set up a custom logo for our domain name Allogarage.fr, both for the brand and the domain. Everything appears to be correctly configured in Apple Business backend for several weeks now, but the logo still doesn’t show up in Mail. Is the branded email feature available in France? Are there any additional steps required?
0
0
87
Jun ’25
Failing Network Requests in Safari due to DNS cache.
We are seeing network errors in Outlook mail on iOS and MacOS safari browsers. As per current investigation, we notice these network error when the user tries to use outlook after leaving it open on Safari for a while. Observations: Issue present in both MacOS and iOS safari. Issue is not present in other webkit browsers like brave and edge on iOS. Issue is reproable on both mini and big owa on safari browser. Issue is not related to post requests being sent in different packets on safari browser. Requests are only blocked for outlook.office/outlook.live domains What does not fix this issue? Reloading the application Clearing cookie, local storage or session storage Unregistering service workers Redirecting to a different page and coming back to outlook domain Re authenticating the users What fixes this issue? Reconnecting to wifi or mobile network Reconnecting vpn Removing safari from background and reopening Flushing the dns in setting
0
2
137
Mar ’25
PWA pre-caching issue in devices.
PWA works perfectly fine in safari browsers in mac but in mobile devices it is not working it just shows, There is no internet connection. found a fix from ios release - https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes but actually it is not solving the issue. in my case even it is not throwing the issue - fix is - Fixed a cache miss bug in DOMCache that triggered service worker fetch errors. (115740959) (FB13188943)
0
0
453
Jan ’25
Notification sound (Web or PWA)
Good morning fellow developers, For a while i am struggeling with providing sound to my users on IOS (Safari on Mac is no problem and every other device is not a problem) (we have an existing phone system and made a chat as well), the case is very simple: the notification sound is only for users who are logged in and online for chat. i have tried multiple things: Audio play with javascript (start with mute, play when user clicks a button so the sound is familiar, play when user clicks a button and directly pause it and continue when needed) PWA: the dashboard has been made available as pwa and notifications using google firebase. The popup does show for notifcations to be allowed (and receiving the notifications does work on any other device) But any IOS device cannot register. The information i find is that notifications were supported with 16.4 or higher but also have been deprecated around IOS 17, auto play is not allowed. We have an app in development for our product as well were we will have a notification which will handle this, but that is not the solution we can use now. Long story, short question: is it still somehow possible to push a notification to the user when using the PWA or play a sound in the browser (based on an ajax function). The app/website wont be in the background, so it will always be on the screen. Languages we use: html/javascript (mostly vanilla)/php
0
0
80
Mar ’25
Why does ReactPlayer fail to play videos at 3x speed only on iOS Safari?
I'm encountering an issue with ReactPlayer where videos fail to play when the playback rate is set to 3x, but this problem only occurs on iOS. The same functionality works perfectly fine on Android devices and desktop browsers like Chrome and Firefox. Here are the details of my setup: ReactPlayer version: 2.16.0 Video format: [MP4, hls ] Tested devices: iPhone 13 Expected behavior: Videos should play smoothly at 3x speed. Actual behavior: Videos fail to load or play when playbackRate is set to 3.0. I've read that iOS Safari might have limitations regarding playback rate due to performance or energy efficiency, but I couldn't find any official documentation to confirm this. If anyone has faced a similar issue or knows the root cause (or a workaround), I'd really appreciate your insights. Additionally, if there are official resources or documentation about playback rate limitations on iOS Safari, please share them. Thanks in advance for your help!
Topic: Safari & Web SubTopic: General
0
0
284
Jan ’25
Safari Does Not Include topOrigin in WebAuthn clientDataJSON Despite crossOrigin: true
Hello, I’m working on a cross-origin WebAuthn implementation where a parent page embeds an iframe from a different origin to perform authentication. According to the WebAuthn Level 3 spec (Section 7.1.1), when crossOrigin is true, the clientDataJSON may include topOrigin—but Safari does not seem to populate this field. Observed Behavior: Chrome/Firefox: Include topOrigin in clientDataJSON when crossOrigin: true. Safari (macOS/iOS): Omits topOrigin even though crossOrigin is correctly set to true. Example clientDataJSON from Safari: { "type": "webauthn.get", "challenge": "...", "origin": "https://iframe-origin.example.com", "crossOrigin": true // Missing `topOrigin` (expected: parent origin) } Questions: Is this an intentional omission in Safari for privacy/security reasons? Are there specific requirements (e.g., HTTP headers, permissions policies) needed for Safari to expose topOrigin? Is there a known workaround to reliably obtain the top-level origin in cross-origin WebAuthn flows? System Info: Version 18.4 (20621.1.15.11.10) OS: Sequoia Version 18.4 (20621.1.15.11.10) Reproduction Steps: Parent page (https://parent.example.com) embeds an iframe (https://webauthn-rp.example.com). The iframe calls navigator.credentials.get() with a WebAuthn challenge. Safari returns clientDataJSON with crossOrigin: true but no topOrigin. Code Snippet (iframe): const credential = await navigator.credentials.get({ publicKey: { challenge: new Uint8Array(/* ... */), rpId: 'webauthn-rp.example.com', allowCredentials: [], hints: [], userVerification: "preferred", } }); console.log(JSON.parse(atob(credential.response.clientDataJSON))); Has anyone encountered this? Any insights would be greatly appreciated!
Topic: Safari & Web SubTopic: General
0
0
93
May ’25
Speech synthesis from Safari app extension
I'm making a Safari extension for learning languages. I need speech synthesis for any language the user chooses to learn. I initially tried to make this work within JavaScript, but Safari 18 doesn't reliably list voices for all languages on the web SpeechSynthesis API as described here: https://stackoverflow.com/questions/79179072/how-do-you-use-a-japanese-voice-with-speechsynthesis-in-safari-ios-18 As a workaround, I've had to use AVSpeechSynthesizer in SafariWebExtensionHandler (NSExtensionRequestHandling implementation for the extension). This works in the simulator but not on a real device. I've found this note from Apple in a StackOverflow reply: "Safari extensions are very short-lived, hence not fit for audio playback or speech synthesis. Not being able to validate an app extension in Xcode with a manually-added plist entry for background audio is the designed behavior. The general recommendation is to synthesize speech using JavaScript in conjunction with the Web Speech API." Unfortunately, the suggestion to use the Web Speech API is unsuitable as I just explained. Is there a way to set up a background process in the host app that can do speech synthesis? The app extension would need a way to communicate with this process, and start it if it's not running. Is that possible?
0
0
602
Dec ’24
Simulator 18.4 Webview CORS issues
I have a very specific issue that happens only on iOS Simulator version 18.4. It does NOT happen when I run my app on a real iOS 18.4 device through Testflight. My app displays a WebView (courtesy of Capacitor, url scheme capacitor://). Inside that Webview I'm using Firebase JS API (11.2.0) and calling signInWithEmailAndPassword, which works well in all other contexts, i.e. browser, Android webview, iOS webview in all other Simulator versions, and on real devices. Only when running in Simulator 18.4, I get a failed network request: cannot parse response Fetch API cannot load https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?... due to access control checks. Failed to load resource: cannot parse reponse error: FirebaseError: (auth/network-request-failed) Everything is working correctly for both: Capacitor app webview installed on a real 18.4 device with Testflight Safari (non-webview) in the 18.4 Simulator The issue is severe for us, because we are unable to develop our app and test it in the simulator on 18.4 Simulator before pushing it through Testflight internal release. Request headers on the failed request (no response status or headers available). Request Accept: / Content-Type: application/json Origin: capacitor://localhost Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: cross-site User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4 like Mac OS X) - AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 X-Client-Version: Mobile/JsCore/11.2.0/FirebaseCore-web X-Firebase-Client: (...)
0
1
276
Apr ’25
Guidance Needed: Safari ITP's Link Tracking Protection Impacts Legitimate App Functionality
Area: WebKit (Safari) Description: I am reporting an issue where our application's core functionality is being broken by Safari's Intelligent Tracking Prevention (ITP). ITP's "Link Tracking Protection" feature automatically strips specific query parameters from URLs. We understand this is an intentional privacy feature. However, our application requires these query parameters to carry essential, non-tracking data, such as authentication tokens or specific app-state information to function correctly. When a user navigates to our site, Safari strips these parameters, this means our client-side application never receives the necessary data, which breaks core features and leads to a failed user experience. This is a significant issue for our application as it prevents users from accessing their content. We are seeking guidance on how to resolve this. Questions for Apple: Is there a recommended way to identify and flag essential, non-tracking query parameters so that Safari's ITP does not strip them? Our parameters are critical for app functionality, not for third-party tracking. What is the recommended best practice for building web applications that rely on URL parameters while adhering to ITP's privacy-first model? We want to ensure our application is compatible with modern browser privacy features without compromising functionality. Could you provide a detailed explanation of what criteria ITP uses to decide which parameters to strip? Understanding the underlying logic would help us restructure our URLs to avoid this issue. Device Information: Operating System: iOS and macOS Safari Version: Latest stable versions on both platforms Device Models: All relevant models and device types
Topic: Safari & Web SubTopic: General
0
0
357
Aug ’25
Issue with Safari and webserver with unencrypted HTTP traffic
We seem to be having an issue with a webservice here which is used within our network and IOS Safari. For the service to work , we need to access it with an unencrypted HTTP API call, which acts as a trigger. The server does not respond to HTTPS requests. (the HTTP API call does not contain any data that is privacy sensitive or that can be abused) Since recently the service does not seem to work anymore properly, but this only happens with Safari and IOS. With all other browsers the service is still working normally, only with Safarai it fails. No matter what I do in the settings of the phone, the Safar browser seems to stop immediately after the HTTP request. What is going on here ?? The issue seems to occur only when you don't have an iCloud+ account. With an iCloud+ account I get the same issue when you switch Apple Private Relay on, but that make sense. When I have Apple Private Relay switched off, there is no issue.
Topic: Safari & Web SubTopic: General
0
0
148
Feb ’25
Issue with SFSafariViewController Not Always Detecting Redirect After Stripe Payment
I am using SFSafariViewController to process payments via a Stripe checkout URL. Once the payment is completed, the user is redirected to a success URL. I have also added associated domains for deep linking. Below is my implementation: func presentCheckout(url: String) { showProgressHUD() let checkoutURL = URL(string: url)! safariVC = SFSafariViewController(url: checkoutURL) safariVC.delegate = self self.present(safariVC, animated: true) } // Delegate method implementations func safariViewControllerDidFinish(_ controller: SFSafariViewController) { print("SafariViewController dismissed") // Handle dismissal } func safariViewController(_ controller: SFSafariViewController, initialLoadDidRedirectTo URL: URL) { print(URL.absoluteString) if URL.absoluteString.contains("xsworld/payment/stripe/checkout/success") { controller.dismiss(animated: true) { if URL.absoluteString.contains("/v1/resources/xsworld/payment/stripe/checkout") { NotificationCenter.default.post( name: Notification.Name("StripePaymentStatus"), object: nil, userInfo: ["url": URL] ) } } } else if URL.absoluteString.contains("xsworld/payment/stripe/checkout/cancel") { // Handle failure NotificationCenter.default.post( name: Notification.Name("StripePaymentStatus"), object: nil, userInfo: ["url": URL] ) } } func safariViewController(_ controller: SFSafariViewController, didCompleteInitialLoad didLoadSuccessfully: Bool) { if didLoadSuccessfully { print("Initial page loaded successfully") } else { print("Initial page load failed") } } Issue: The safariViewController(_:initialLoadDidRedirectTo:) method does not always get called after the payment is completed. Sometimes it works as expected, and sometimes it does not trigger at all. What I’ve Tried: Ensuring the associated domains for deep linking are correctly set up. Checking the success and failure URLs. Debugging to see if the redirect happens but is not detected. What I Need Help With: I want to ensure that the redirection always works after the payment process is completed, whether through deep linking or another reliable approach. How can I guarantee that my app correctly detects and handles the redirect every time? Any guidance or best practices would be greatly appreciated.
0
0
452
Feb ’25
Incorrect page zoom after pinch-to-zoom and orientation change on Bing search page
Steps to Reproduce: Open the Bing search page in Safari (example URL: https://www.bing.com/search?q=webkit&form=APIPH1&PC=APPL). Pinch-zoom in or out, then return the page to exactly 100% zoom. Rotate the device from portrait to landscape orientation. Observe that the page is incorrectly scaled to a value other than 100%. Rotate the device back to portrait orientation. The page remains at the incorrect zoom level. Expected Result: After returning the page to 100% zoom, changing orientation should keep the zoom level at exactly 100% in both portrait and landscape modes. Actual Result: After returning to 100% zoom, rotating to landscape changes the zoom to a non-100% value, and rotating back to portrait retains the incorrect zoom level.
Topic: Safari & Web SubTopic: General Tags:
0
0
112
Aug ’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
377
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
266
Mar ’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
Embed issue
When we embed some of the youtube videos are unable to load in the Mobile app but at the same time it works in Website. I need to allow it in both places. I have tried both embed and native sdk for youtube in iOS.
0
0
470
Jul ’25
Can't publish my app due to Mini apps
Hello Community, My application was rejected by Apple App Review, citing Guideline 4.7 and "non-embedded," which I believe is incorrect. All transactions are signed and sent directly through the app with explicit user permission. Additionally, there's an issue with min apps where users can access the functionality via a browser to interact with the service. This feature has been part of my old application and hasn't changed in the new update. It’s the same functionality as used by popular wallets like Metamask Uniswap Coinbase Which also employ web3 technology. Over the past two weeks, I've tried to communicate with Apple's support team but have been ignored or received only generic rejection emails. This has left me frustrated and concerned about the time and resources I’ve invested in developing and supporting this app. Could you please help me find a solution? Your assistance would be greatly appreciated!
0
0
67
Apr ’25