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

React Native Deeplink Issue
I am working in React Native and trying to use Deeplink. When app is installed code is working fine but when app is not installed not redirecting to App Store in Safari instead of that in Chrome that is working fine in safari when i click i got this error message "safari cannot open the page because the address is invalid" this is my apple-app-site-association file code { "applinks": { "apps": [], "details": [ { "appID": "CS666P223.com.seecard", "paths": [ "", "/recover/", "/settings/*" ] } ] } , "webcredentials": { "apps": [ "CS666P223.com.seecard" ] } } and this is my code in next "use client" export default function Home() { // Helper function for device detection // const isiOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent); const isAndroid = () => /Android/i.test(navigator.userAgent); const isiOS = () => { const userAgent = navigator.userAgent || navigator.vendor; return ( /iPhone|iPad|iPod/.test(userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ); }; const openAndSaveCard = () => { try { // let fallbackLink = ''; if (isiOS() || isAndroid()) { const card_id = "3434bee9675ee44b3dc65"; const card_owner_id = "34349675ee44b3dc43"; const card_for_saved = { "cardId": card_id, "ownerId": card_owner_id }; console.log("=-=-card_for_saved",card_for_saved) const encodedData = encodeURIComponent(JSON.stringify(card_for_saved)); window.location.href = `saveseecard://open?id=${encodedData}`; const androidAppStoreLink = 'https://play.google.com/store/apps/details?id=com.seecard'; const iosAppStoreLink = 'https://apps.apple.com/np/app/seecard/id6502513661'; fallbackLink = isAndroid() ? androidAppStoreLink : iosAppStoreLink; const timeout = setTimeout(function () { if (document.hasFocus()) { window.location.href = fallbackLink; } }, 2000); window.addEventListener('blur', () => { clearTimeout(timeout);; }); } else { alert("Your device doesn't support deep linking for this app."); } } catch (e) { console.log("Error:", e); } }; return ( <div className="cIcon ml-10 purpleBg" // onClick={() => { openAndSaveCard() }} onClick={openAndSaveCard} > <p className="container-text">Save Card</p> </div> </main> </div> ); }
Topic: Safari & Web SubTopic: General
3
0
383
Feb ’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
95
May ’25
Can't use Clipboard API after sending a message to the background script?
Hi, I’m encountering an unexpected issue in Safari. Specifically, navigator.clipboard.writeText() fails when called from a content script in my extension immediately after sending a message to background.js while it works fine in Chrome and Firefox. Is this expected? Environment Safari 18.2 (20620.1.16.11.8) Technology Preview 210 macOS Sequoia 15.2 (24C101) Example This is a minimal reproducible example, which adds a button to example.com: https://github.com/mshibanami/ClipboarAPIIssueExample Below is the related code: // content.js copyButton.addEventListener('click', async () => { // 👇️ This call seems to trigger the issue await chrome.runtime.sendMessage({}); try { await navigator.clipboard.writeText(text); alert(`✅ Copied '${text}' to clipboard!`); } catch (err) { alert(err + '\n\n' + `navigator.userActivation.isActive: ${navigator.userActivation.isActive}`); } }); // background.js chrome.runtime.onMessage.addListener(() => { }); When I click the button, I expect the text to be copied successfully. However, I receive an error in Safari.: Interestingly, if I remove chrome.runtime.sendMessage(), the clipboard operation works without any problems. Also, note that navigator.userActivation.isActive is true, which might mean it's not related to the User Activation API. Misc. This might be related to another question I posted here: https://developer.apple.com/forums/thread/772275
0
0
540
Jan ’25
Public Contact Info
I wanted to create a public contact card so when my clients click a button on my website it traverses them through the iMessage API and instantly adds a contact card with photo and name as a background task. If there is implications my next question was going to be if there is a possible way to create a public contact card where for example I could redirect a client to iMessage and when starting a new conversation if they type in a name it pops up instead of needing to utilize a phone number? I am trying to explain my thought process as much as possible but I have been typing for hours. In simple terms is there a possibility to create a public contact card that can be accessed or texted by anyone who types in a name into new conversation bar?
1
0
508
Dec ’24
Safari Web Extension - ES6 Module Imports Not Working After Enabling "type": "module"
I'm trying to use ES6 module imports in a Safari Web Extension, but despite enabling "type": "module" in the manifest, imports are not functioning as expected. Specifically when working with a project structure that includes multiple directories. A root directory containing the manifest.json and main entry point scripts A scripts/ folder housing core functionality modules A common/ directory for shared utilities, constants, and helper functions A background.js file in the root that attempts to import from these various directories When trying to import modules from the scripts/ and common/ directories into my background.js, I'm encountering complete import failures. How can I correctly implement cross-directory module imports in Safari Web Extensions?
1
0
125
Mar ’25
Safari Extension Error: “Non-persistent background content cannot listen to webRequest events.” after macOS 15.4 / Safari 18.4 Update
Safari Extension Error: “Non-persistent background content cannot listen to webRequest events.” after macOS 15.4 / Safari 18.4 Update We’re seeing the following error in the Safari Extensions tab after updating to macOS 15.4 and Safari 18.4: “Non-persistent background content cannot listen to webRequest events.” This error did not appear prior to the update, and we haven’t found any official documentation stating that webRequest API is no longer supported in Safari. In our extension (Manifest V3), we are using the webRequest.onHeadersReceived callback to intercept response headers and read updated cookies. While the functionality itself still works as expected. we’re able to access the response headers and this error is now shown in the Extension settings page. We are not seeing this issue in other browsers (Chrome, Firefox) using the same Manifest V3 setup. Is there any plan to deprecate webRequest support in Manifest V3 for Safari? We’d appreciate any clarification or guidance on how to handle this going forward.
0
0
224
Apr ’25
Universal Link failures in Safari with EventListener
Hi everyone! We encountered an issue with universal links where the link failed to open the iOS application from Safari when triggered by an event listener. However, when we modified the code to open the link directly via a user click, the application launched as expected. Based on our testing, this issue seems to occur only when there is information for the application cached in Safari. Our previous flow that resulted in the broken universal link included: Data is loaded and a screen with a button to open the universal link is available for the user When the data is loaded it sets a state variable to true for DataLoaded The user clicks on the button to open the universal link When the user clicks the button to open the link it sets a variable to true for ButtonClicked When DataLoaded and ButtonClicked are true then the universal link is opened Our new flow that results in the successful universal link includes: Data is loaded and the user is hit with a loading screen until it is finished The user clicks on the button to open the universal link and the universal link is opened directly Does anyone have insights into why universal links must be triggered by direct user action, and in what scenarios this behavior is enforced?
1
0
1.1k
Jan ’25
Notify web extension native process of user default changes
My Mac app and its Safari web extension share an app group, and I want to notify the web extension native process when the app makes a change to the app group NSUserDefaults, but I can't find a good way to do this. According to the documentation, "You can use key-value observing to register observers for specific keys of interest in order to be notified of all updates, regardless of whether changes are made within or outside the current process." In my testing, however, this doesn't work in the web extension process. I'm using NSUserDefaults addObserver forKeyPath, but observeValueForKeyPath never gets called. I've also tried NSDistributedNotificationCenter, but the web extension process doesn't receive the notifications sent by the main app. Are either of these supposed to work? If not, are there any alternatives?
0
0
55
Apr ’25
I cannot log in using 'Sign in with Apple' on iOS 12.
Our service includes the Apple web login feature to support "Sign in with Apple" on iOS 12. However, at some point, an error started occurring on the Apple login page in iOS 12, preventing users from proceeding further. Upon checking the Web Inspector console, we found the following error: Failed to load resource: the server responded with a status of 503 (Service Temporarily Unavailable) Please help us resolve this issue so that users can continue using "Sign in with Apple" on iOS 12.
2
0
573
Jan ’25
Unable to Add Non-Standard Headers Using Declarative Net Request Rule (DNR) in Safari
We’re encountering an issue when trying to add non-standard headers to outgoing requests using Declarative Net Request (DNR) rules in our Safari Web Extension. Tested on macOS 15.4 with Safari 18.4. Specifically, when attempting to add a custom header such as "X-Custom-Header" using a DNR rule, the header does not appear in the request. We are able to add standard headers like "Authorization" and "Cookie" to the request successfully using the same method. This behavior suggests that Safari may be filtering or blocking non-standard headers when set via DNR rules, unlike other browsers. In Chrome and Firefox, the same rule adds the "X-Custom-Header" header without any 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.
2
0
131
Apr ’25
LocalOverride Request regular expression broke dev tools
Hello, I'm using Safari 18.2 on Sonoma 14.6.1. I was using the Developer Tools to do a Local Request Override in the Source tab for a CSS file that had a changing query string. I thought I had a good regular expression to catch all variants, but apparently it was too generic and possibly wrong, and made both Source and Network tabs no longer work in my Safari. The regular expression I entered for the Local Request Override was: //build/style.css(?.*)?$ Now my dev tools is broken to the extent that the Source and Network tabs no longer work. The slide-out panel on Source that shows Breakpoints, LocalOverrides, etc no longer shows. The toggle for it does, but does nothing now. UI in general looks a little wack on both tabs. So, since I can't turn off the Local Request Override, I've been trying to locate where Safari may have stored it to manually delete it. Not having a lot of luck on that front. It seems to me that Safari was unable to escape my regular expression correctly and it then causes additional issue. Just a guess though. Any advice or help in getting Safari Source & Network working again / manual removal of the LocalOverride would be greatly appreciated. I'm fluent in OSX and Linux, but grep was not much help surfacing anything that worked. Thanks in Advance, possibly a Safari bug as well.
2
0
480
Oct ’25
crossorigin="anonymous" Prevents Rendering and Canvas Access for Custom Scheme and HTTP Images on iOS 18
On iOS 18, when setting the src attribute of an tag to a custom scheme (e.g., myapp://image.png) or an HTTP URL (http://example.com/image.png), if crossorigin="anonymous" is applied, the image fails to load. Additionally, images affected by this issue cannot be drawn to a , as the browser treats them as tainted and blocks access to their pixel data. This issue did not occur in previous iOS versions and seems to be a regression in iOS 18. Steps to Reproduce: Open an HTTPS-hosted H5 page in Safari on iOS 18. Add an tag with crossorigin="anonymous" and set src to either: A custom scheme: <img src="myapp://image.png" crossorigin="anonymous"> An HTTP URL (even from the same origin): <img src="http://example.com/image.png" crossorigin="anonymous"> Observe that the image does not load. Attempt to draw the image onto a and retrieve its data: const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "anonymous"; img.src = "http://example.com/image.png"; // or "myapp://image.png" img.onload = () => { ctx.drawImage(img, 0, 0); try { console.log(canvas.toDataURL()); // Expect base64 image data } catch (error) { console.error("Canvas is tainted:", error); } }; Notice that the image is blocked, and any attempt to access pixel data results in a CORS error. Expected Behavior: * The image should be displayed if it is accessible under normal CORS rules. * The API should allow access to the image data unless explicitly blocked by the server’s CORS policy. Actual Behavior: The image fails to load when crossorigin="anonymous" is applied. The API does not allow access to the image data, treating it as tainted. Removing crossorigin="anonymous" allows the image to display in some cases, but this is not a viable workaround when CORS enforcement is required. Regression: Works correctly on: iOS 17 and earlier Broken on: iOS 18 Environment: Device: iPhone/iPad iOS Version: 18.0+ Browser: Safari Suggested Fix: Apple should investigate this regression and allow custom schemes and HTTP images to be correctly handled under CORS policies when crossorigin="anonymous" is set. If the source allows cross-origin requests, Safari should not block the image or its use in .
3
0
1.3k
Feb ’25
Memory leak in WebKit caused by KVO and @StateObject
Hi! My SwiftUI app is a rather complex browser app. Starting with iOS 18, the app crashes due to repeted reloads of the WkWebView. I’ve tracked the issue as far as I can, but I still haven’t found the root cause. My app is structured like this: MainView holds a cuple of subviews. It also holds a @StateObject called viewModel that holds a lot of @Published vars. The viewModel is passed as a enivormentObject. Example from ViewModel: @MainActor class ViewModel: NSObject, ObservableObject { @Published public var isLoading: Bool = false @Published public var loadProgress: Double? = 0 public func setIsLoading(_ value: Bool) async { self.isLoading = value } public func setLoadProgress(_ value: Double?) async { self.loadProgress = value } } WebView is a subview of MainView, which holds a navigation bar, and a UIViewRepresentable, which is a WkWebView. The WkWebView pushes some states to the ViewModel as the underlying values of the WkWebView changes, i.e. estimaedProgress, and isLoading. This is done via KVO and works like this: estimatedProgressObservation = self.parent.webView.observe(\.estimatedProgress) { webView, progress in Task { await parent.viewModel.setLoadProgress(webView.estimatedProgress) } } isLoadingObservation = self.parent.webView.observe(\.isLoading) { webView, value in Task { await parent.viewModel.setIsLoading(webView.isLoading) } } By using a timer in WkWebViews Coordinator, i trigger a load after a configurable amount of time :
 func loadUrl(url: URL) { DispatchQueue.main.async { console.info("Load URL: ...", sensitive: "Load URL: \(url.absoluteString)") let policy: NSURLRequest.CachePolicy if self.parent.settings.noCache { policy = .reloadIgnoringLocalAndRemoteCacheData } else { policy = .useProtocolCachePolicy } let request = URLRequest(url: url, cachePolicy: policy) self.parent.webView.load(request) } } Running the app with the automatic reload enabled freezes the app after a couple of hours. It also seems to freeze Safari on the device. The device needs to be rebooted. If I inspect the device's running processes, hundreds of ”com.apple.webkit. web content " processes are running. Removing await parent.viewModel.setLoadProgress(webView.estimatedProgress) and await parent.viewModel.setIsLoading(webView.isLoading) fixes the issue, but it is necessary for other app functions. Therefore, is suspect that the viewModel somehow causes the bug. The issue arises after a couple of loads 5-10. The debugger shows a message when the processes start to pile up. I suspect its related. Failed to terminate process: Error Domain=com.apple.extensionKit.errorDomain Code=18 "(null)" UserInfo={NSUnderlyingError=0x12d0e7f60 {Error Domain=RBSServiceErrorDomain Code=1 "Client not entitled" UserInfo={RBSEntitlement=com.apple.runningboard.terminateprocess, NSLocalizedFailureReason=Client not entitled, RBSPermanent=true}}} How can I find out what causes the suspected memory leak? Instruments gives me nothing of value. The memory leak wasn't present in iOS 17. Is this a bug in iOS 18, or was something intentionally changed?
0
0
457
Mar ’25
Unexpected Behavior: PointerEvents do not permit simultaneous pencil and multitouch at the same time. Discussing Workarounds
For many years, I've noticed that although in native code I can handle continuous and simultaneous Apple pencil and touch inputs using UIKit, Safari and WKWebView's PointerEvents only seem to allow you to use one input type at a time. i.e. Apple Pencil down blocks touch input until lifted and touch input blocks Apple Pencil input. It's as though requiresexclusivetouchtype has been set in the underlying webkit implementation. There's decades of research (e.g. https://dl.acm.org/doi/10.1145/1866029.1866036 ) and several existing native applications in production showing that multimodal inputs open-up many unique and useful applications and interactions. Even a simple "hold object with finger" + "draw with stylus" controls are the norm. I recently built a native application using multimodal simultaneous inputs, but this is impossible to port to web due to the unexpected behavior of PointerEvents (and touch events, and mouse events; any variant exhibits the same behavior). I've researched and attempted to apply every possible flag, change, and css code to get this working, but I think the behind-the-scenes implementation is what's blocking the simultaneous touch types. This is unexpected and undesired behavior because it's inconsistent with the native behavior. If it's unintended, it's a big priority to fix for creating better user experiences on the iPad. If it's intended, I do not believe that's reasonable (even if it might be more complex and used for more advanced applications). Please expose a way to support simultaneous touch types in iPadOS/iOS in both Safari and WKWebView. At minimum, may we have a discussion on how to support the desired behavior? The simplest solution I can think of is to provide a webkit-platform-specific boolean in Safari and WKWebView called requiresExclusiveTouchType, which is set to False by default to keep the current behavior, and settable to True to get the more flexible behavior I'm expecting.
2
0
631
Jan ’25
HTMLAudioElement on iOS is paused when video plays again
On iOS (iPhone or iPad) the following behaviour happens: when both an HTML video element and an HTML audio element are playing on a page, and the video source ends, and the video source is programmatically forced to play again then the system will automatically pause the audio. See following stackblitz project for a sample: https://stackblitz.com/edit/ios-audio-paused-on-video-playing?file=README.md Steps to reproduce Feel free to try with both another audio and video source, here limited by the available space in Stackblitz plan. On an iPhone/iPad device or simulator, in Safari: browse to index.html when on iPhone, press iPhone Load to force preloading video. Not needed on iPad press Play to start playing both audio and video wait until clip ends and then restarts from 0:00 Expected Audio should keep on playing and eventually loop. Actual When clip restarts from 0, audio is put to pause by the system. Further details This does not happen e.g. on Mac Safari nor on another device/browser. Also, some alternative scenarios: when HTML video element has the muted attribute, the issue disappears and audio is not paused when HTML audio element is replace with Web Audio API, the issue disappears and audio is not paused
Topic: Safari & Web SubTopic: General Tags:
0
0
327
Jan ’25
Add background.js to Safari App Extension
I develop a tab manager extension: https://apps.apple.com/ua/app/tab-finder-for-safari/id6741719894 It's written purely in Swift. All Safari interactions are done solely inside a SFSafariExtensionHandler . But now i'm considering adding some features from Google Chrome's Extension API like window switching. Is it possible to add a background.js worker to my existing Safari App Extension to have access to the beginRequest method override inside SFSafariExtensionHandler? Without converting my extension from Safari App Extension to Safari Web Extenion?
1
0
248
Mar ’25
Apple Pay on the Web fails with an "AbortError" in production
Apple Pay fails with an "AbortError" when the dialog for the fingerprint sensor opens. How do I find the cause of the "AbortError" which only occurs in the web integration in our production environment? In the sandbox environment, Apple Pay works flawlessly. This concerns a web integration of Apple Pay using the Apple Pay SDK, one version before 1.2.0. The error occurs when I call the show() method on the PaymentRequest object. The Apple Pay dialog opens with the fingerprint icon, but after one second, an exclamation mark appears, and the Apple Pay dialog closes again while throwing the "AbortError". I know that our Apple Pay integration worked for multiple customers in the production environment already. The current problem is that Apple's error message, called "AbortError," provides no indication of the cause. This could be greatly improved. One affected customer, for example, is the one with the Merchant ID … (Is it safe to post a Merchant ID in this forum?) I can reproduce the "AbortError" issue at any time using my iPhone with iOS 16.7.8.
0
0
381
Jan ’25