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

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Created

Video Volume Issue on Ipad
we are using angular and Html5 to develop our application, in our application we play videos that are placed on s3. Video when played on desktop borwser are adequatley audible but when played on iPad their volume is too low to be audible. I have tried video.volume =1 but it does not work for iPad because this property is only readable for ios devices. I have tried using javascript audioContext. It worked for my local machine. But when code is deployed on some hosted environments, it just does not work. Did anyone face the same issue? Any help regarding it will be appreciated.
0
0
523
Dec ’24
How does the Reddit app detect Safari’s Private Browsing mode when opening a Universal Link?
I’m trying to understand how the Reddit app knows to open in its anonymous mode when a link is opened from Safari’s Private Browsing mode. Does Safari explicitly pass any flag or metadata indicating the request originated from Private Browsing? Or is it inferred by the absence of shared cookies, session tokens, or other stateful data? If the detection is based on the absence of cookies, could this logic misidentify other stateless scenarios as ‘private’?
1
0
580
Dec ’24
Removing Cookie HTTP Header via declarativeNetRequest
I'm porting to Safari a Chrome/Firefox Extension that makes use of declarativeNetRequest.updateDynamicRules to remove some HTTP headers from requests to a specific URL. This works mostly fine, except for some headers for which this is not allowed by WebKit, such as the Priority header (which is however served by Safari). An annoying corner-case I found is that of the Cookie header. When trying to remove it from the request by adding the following rule { id: <rule id>, priority: <rule priority>, action: { type: "modifyHeaders", requestHeaders: [{ "header": "Cookie", "operation": "remove" }] }, condition: { urlFilter: <my url>, resourceTypes: ["main_frame", "sub_frame"] } } nothing error is thrown, yet the Cookie header is still being sent. This rule however works for other headers, such as Referer. Changing "Cookie" for "cookie" does not help. Questions: Is there an alternative way of removing the Cookie header from the HTTP request? Is this just a bug in WebKit? Is there any way of removing "unsupported" headers such as Priority? Any help or references are appreciated. Edited: more specific description of the corner-case.
0
0
515
Dec ’24
Console Snippets with JavaScript
Hey there guys! I'm new to this, and have been learning JavaScript on Udemy. I'm trying to do everything inside of Safari, instead of using Chrome. But I'm stuck on something that I feel is kind of small, but has been nagging at the back of my brain. When I go to the 'Inspector Developer Tools' (command + option + i), then go to 'Sources', and go to 'Console Snippets', I'm trying to figure out how to delete any JavaScript files from the Console Snippets selection. In Chrome, when you navigate to the Chrome equivalent, if I right click on the file, there's an option to remove the file, but on Safari the only option I get is to Run Console Snippet. Does anyone know how to remove or delete a JavaScript file from the Console Snippets section in Safari? I have no extensions installed.
2
0
523
Dec ’24
WKWebView cannot load non-app-bound domains
Hi, We have configured WKAppBoundDomains and are using limitsNavigationsToAppBoundDomains to enable Service Workers, which works perfectly. However, we are now unable to load a WKWebView with any domain that is not included in the app-bound domains. For these other WKWebView instances, we have explicitly set config.limitsNavigationsToAppBoundDomains = false, but it doesn’t seem to have any effect. We don’t require access to the restricted APIs enabled by app-bound domains for these instances—we simply want them to load and perform basic website functionality. Is there a way to enable Service Workers selectively in some WKWebView instances while allowing others to remain unaffected by the App-Bound Domains restriction? Thank you for your help! Best regards, Rose Ding
2
0
418
Dec ’24
Strong password masking
Styling overlap occurs between the input field style and the generated strong password field in Safari browser. Is there a way to completely override the original input field style with the styling of the filled strong password?
Topic: Safari & Web SubTopic: General
0
0
262
Dec ’24
Help with implementing "Sign in with Apple" in Safari Web Extension popup for MacOS
Hi everyone, I'm developing a minimal Safari web extension for macOS and trying to implement "Sign in with Apple" directly from the extension popup, as per Apple's guidelines it's prohibited to open a new tab/window: Guideline 4.0 - Design: The user is taken to a new Safari window or tab to sign in or register for an account, which provides a poor user experience. What I've Done So Far Created an App ID with "Sign in with Apple" enabled and configured. Created a Service ID with the "Sign in" feature enabled. Enabled "Sign in with Apple" for native targets in Xcode Added the following JavaScript code in my popup.html file to initialize the Apple JS API and handle authentication via a popup: &lt;script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"&gt;&lt;/script&gt; &lt;script&gt; // have tried many different configurations here - nothing works! AppleID.auth.init({ clientId: '&lt;valid client ID&gt;', redirectURI: '&lt;valid URL&gt;', usePopup: true, }); document.getElementById('sign-in-button-apple') .addEventListener('click', () =&gt; { AppleID.auth.signIn().then((response) =&gt; { console.log('Success', response) }).catch((error) =&gt; { console.error('Error', error) }); }); &lt;/script&gt; I also added event listeners for AppleID events: document.addEventListener('AppleIDSignInOnSuccess', (event) =&gt; { console.log('Success', event); }); document.addEventListener('AppleIDSignInOnFailure', (event) =&gt; { console.log('Error', event); }); Issue When I click the "Sign in" button in the popup, a native macOS dialog appears for authorization. However, after confirming sign-in, the modal just closes and no response (success or error) is logged in the console. Expected behavior To receive a success message or an error in the console about the authorization process result. Questions Service ID Configuration: Since the popup's location URL is safari-web-extension://&lt;random-url&gt;, I can't add it to the supported redirect URLs in the Service ID settings. Is there a way to work around this? Safari Web Extension Setup: Are there specific configurations required in Xcode to enable "Sign in with Apple" within a Safari web extension? Sign-In Method: Am I correctly implementing the signIn method in the JavaScript code? Could there be any constraints or special considerations for running it within an extension popup? I would greatly appreciate any guidance, examples, or documentation that can help resolve this issue. Thank you in advance!
1
0
477
Dec ’24
Open Graph Metadata & SSL Issue on iOS/macOS
Hi Team, We’re encountering an issue where Open Graph metadata (e.g., og:image) isn’t rendering properly on iOS/macOS platforms or WhatsApp previews. Here’s a brief summary of the problem: SSL Configuration: Our SSL Labs report shows a grade of B due to: Improper certificate chain setup. Outdated cipher suites (e.g., TLS_RSA_WITH_3DES). Support for deprecated TLS protocols (1.0/1.1). Frontend Observations: Metadata (e.g., og:image) is not reliably picked up on iOS/macOS crawlers. Crawlers may have issues accessing assets due to CORS or TLS limitations. What We Need: Guidance on resolving Open Graph preview issues specific to iOS/macOS environments. Best practices for ensuring compatibility with Apple’s crawlers and WhatsApp on iOS. Suggestions for optimizing server-side SSL/TLS configurations and frontend setup to improve metadata visibility. We’re currently using Next.js 14 for the frontend. Any insights or debugging tips are greatly appreciated! Thanks in advance!
1
0
458
Dec ’24
Where can I find the new safari docs?
I am working on some open source documentation genereator tools which should support pwa on apple. I want to check whether some private apple meta tags are still supported like apple-touch-icon, I can only found some archived docs: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html I searched for almost an hour but I can not find anything related to safari and it's behavior in the new documentation. So I want to ask: do I miss anything? or apple is dropping docs for safari?
Topic: Safari & Web SubTopic: General
0
0
303
Dec ’24
XSRF-TOKEN can not be set in Safari 17.0 over IPv6
Hi, When we using Safari on MacOS with IPv6 we found that the XSRF-TOKEN can be set into the cookies. We have set-cookie in the authentication response headers 'Set-Cookie: XSRF-TOKEN=*******; SameSite=Strict; Secure'. It works by using Safari with IPv4. And also works with Chrome/FireFox with IPv4/IPv6. And also worked with Safari 15.6.1 over IPv6. May I know if this an issue or by design? Anyone aware of this? Thanks.
0
0
376
Dec ’24
Your browser preventing this app to open “URL”
Hi Apple developers, I am very new to XCode and Swift, I am planning to build an app for iOS from a web. I tried to use WKWebView to handle the web , I managed to redirect some of the links to Safari, however some button/links didn't trigger .linkActivated function and encounter the error as "Your browser preventing this app to open “URL”. If I copy the URL to Safari is able to open, I trying to research on web but can't find any related solution for my case. Here is the code in my app: import UIKit import WebKit import SafariServices class ViewController: UIViewController, WKNavigationDelegate { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() // Initialize WKWebView let webConfiguration = WKWebViewConfiguration() //enable javascript webConfiguration.preferences.javaScriptEnabled = true webView = WKWebView(frame: self.view.frame, configuration: webConfiguration) webView.navigationDelegate = self self.view.addSubview(webView) // Load a web page as webview if let url = URL(string: "https://myurl") { let request = URLRequest(url: url) webView.load(request) } //console log webView.evaluateJavaScript("console.log('Button clicked!')") { result, error in if let error = error { print("Error executing JavaScript: \(error.localizedDescription)") } else { print("JavaScript result: \(String(describing: result))") } } } func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { if let url = navigationAction.request.url, navigationAction.navigationType == .linkActivated { // Check if URL is external and open it in Safari if UIApplication.shared.canOpenURL(url) { UIApplication.shared.open(url, options: [:], completionHandler: nil) decisionHandler(.cancel) // Prevent loading the link in the WebView } else { decisionHandler(.allow) // Allow loading if URL cannot be opened in Safari } } else { decisionHandler(.allow) // Allow the WebView to load the URL normally } } }
1
0
724
Dec ’24
navigator.mediaDevices.getUserMedia() Report an error
When using WKWebview to load the following html on iOS17.5 Simulator, navigator.mediaDevices.getUserMedia reports an error (A MediaStreamTrack ended due to a capture failure), but the then branch can be executed. The video cannot be loaded. There is no problem with iOS17 Simulator and iOS18 Simulator. Thank you very much for answering the question. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"> <title>WebKit Camera Preview</title> </head> <body> <div id="content" style="margin-top:env(safe-area-inset-top);background-color:blue"> <button style="width:200;height:40px;" onclick="doClick()">open camara</button> </div> <video playsinline id="myVideo" ></video> <script> var ggstream = null function doClick(){ const content = document.getElementById("content") content.style.backgroundColor = "red" navigator.mediaDevices.getUserMedia({ video : true}) .then(stream => { const video = document.getElementById('myVideo'); video.srcObject = stream; video.play() }) .catch(err => { console.error('Error accessing media devices.', err); }); } </script> </body> </html>
Topic: Safari & Web SubTopic: General
1
0
516
Dec ’24
LocalStorage sometimes disappears in WKWebView
I am currently publishing an application that uses WebView, I am currently publishing an application that uses WebView, but I am having trouble with data in LocalStorage sometimes disappearing. The website displayed in WebView is made with PHP, By writing the following code in JavaScript, When WKWebView is opened, localStorage is saved and retrieved. window.localStorage.setItem('isAlreadyAgree', true); window.localStorage.getItem('isAlreadyAgree'); The problem is that sometimes this getItem does not get the data. ・This is not reproducible and does not always occur when some process is performed. ・Is it possible that the storage of the application is cleared due to distribution using MDM? ・Is it possible to store too much data in UserDefault, which would cause the LocalStorage space to be overwhelmed and disappear? I would appreciate any hints you can give me. Thank you in advance.
0
0
468
Dec ’24
PWA Web Push not arriving on iOS 18.0 - solved
Update: turns out the testphone with iOS 18 was set to 'Do not disturb'. Case closed. Hi all, I created a progressive web app. I is hosted on an actual live domain, served over https. When installed on an iPhone homescreen on iOS 17.7.2, sending web push notifications works fine: the response from the push service endpoint has a status code of 201, indicating all is good. In the service worker of the PWA, an eventlistener for the 'push' event is trigggered and displays an OS notification. On iOS18.0 however, even though the response from the push service endpoint has a status code of 201, there is no notification showing. Even though permission has been granted, and registration.pushManager.subscribe() is successful. When working locally, I've setup my server to run on localhost in https mode as well by following this excellent Technical Note to setup my own Certificate Authority, have it be trusted by my iOS test devices and have the CA issue a certificate so TLS can be set up. On this locally running https server, web push notifications do arrive for iOS 17.7.2, but also not for iOS18.0. I'm not sure how to start debugging this, as I can't seem to get the webinspector to show for the service worker most times, and when I can, there is no console.log() output visible. This still stands: So really, I'm looking for a (reliable) way to be able to debug this issues in safari, or find some documentation on what changed for Safari on iOS 18 that requires changes. Any help or thoughts on this matter?
1
0
865
Dec ’24
Web application using Rafael JS crashes on Safari and Chrome after updating to iOS 18.2
After updating my phone to iOS 18.2 2 days ago, I noticed that a website I'm working on that uses Rafael JS(https://dmitrybaranovskiy.github.io/raphael) to do some svg rendering which used to work before I updated just stopped working. I notice that Safari tries to load website tries to load 2 or 3 times before showing the error: A problem repeatedly occurred on <website> which I find really odd since this used to work before and I haven't made any changes to the code. This also happens in Chrome on iOS 18.2.
2
0
616
Dec ’24
A problem repeatedly occurred on website
We are having an issue on our website whilst using Iphones. A soon as the page loads it crashes and the it seems A problem repeatedly occurred to display page. This has been happening lately. This is the link. Can someone tell us what could be the issue? https://www.showshappening.com/TheTravellers/Travellers-Concert-2024 Thanks
Topic: Safari & Web SubTopic: General
1
0
482
Dec ’24
Not displaying some websites properly after iOS 18.2
After the iOS 18.2 update, I can no longer see the some website as I could see it on the desktop. ( for example Jeostok . Com)I have tried this in many browsers. For example, I get the same result in browsers such as Safari Chrome Firefox opera and edge. The home page is not displayed properly. It was displaying properly before the update and now it is not displaying properly. This website is my website. I frankly do not know how to solve this problem, if anyone knows, I am waiting for your help.
3
0
1.1k
Dec ’24
Unable to Override "Link with Highlight" in WKWebView
Hello everyone, I'm working on an app that uses WKWebView. My app uses a custom menu and we disable the default menu by overriding with: WKWebAction.canPerformAction() However, with the new iOS 18.2 release, I am no longer able to override the "Copy Link with Highlight" option that pops up when highlighting a selection as can be seen from the screenshot: Has anyone found a work around/bypass for this? Environment iOS Version: iOS 18.2 Device: iPhone 13 Pro App platform: iOS Xcode version: 16.1 MacOS: 14.5
5
5
1.2k
Dec ’24