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

Apple Sign In - Double prompt issue
Hi, we have PWA for which we´ve built a wrapper using PWA Builder tool and we are experiencing an issue with apple sign in. When we try to redirect the user to "https://appleid.apple.com/auth/authorize?...params...", a bottom sheet login prompt appears and only once the user signs in using the prompt he is then redirected to the url where he needs to sign in again and then we get the callback. We want to get rid of that bottom sheet prompt. The code we´ve tried: ` iosButton.addEventListener('click', function () { window.location.href = "https://appleid.apple.com/auth/authorize?client_id=xxxxx&redirect_uri=xxxxx&response_type=code%20id_token&scope=name%20email&response_mode=form_post"; });` The alternative code we´ve tried for which it seems that nothing happens, we only see the "Started" alert, we´ve confirmed that there is no other error : ` <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script> <script> (function initAppleSignIn() { try { window.AppleID.auth.init({ clientId: "{{ env('APPLE_WEB_CLIENT_ID') }}", scope: "name email", redirectURI: window.location.origin +"/auth/apple/callback", usePopup: true }); } catch (e) { console.warn('Apple Sign-In init skipped:', e); } })(); function appleButtonClicked() { alert("Started"); try { const res = await window.AppleID.auth.signIn(); } catch (err) { alert("Got error"); } alert("Got here"); } </script>
2
0
678
Nov ’25
WebKit HTML Anchor download attribute ignored by PDF files
When trying to create an anchor with the download attribute it does not work for PDF files, it displays the files inline. Also when the download attribute is set the target attribute is ignored too. The tag: ... The behavior: It displaies the file in line. The correct behavior: The file should be downloaded and not displayed or at least displayed but with the "_blank" target (new tab). This is an issue when working with WebSockets which is closed when the file is opened inline.
2
0
281
Oct ’25
Chrome extension => Safari web extension packager
"The Safari web extension packager enables you to package and distribute your Safari extensions using App Store Connect from any web browser, without requiring a Mac or access to Xcode." I upload the unzipped folder I'd test in Chrome://extensions to the Safari web extension packager in App store connect. I get error: Embedded binary's bundle identifier is not prefixed with the parent app's bundle identifier. The only solution i've seen to this error involves xcode/a mac, being without which doesn't help
2
1
415
Oct ’25
High count of webview content process termination
Our iOS app uses React Native Webview (based on top of WKWebView) to display content. This webview stays in memory throughtout the app's lifecycle. We are observing a high number of webview content process terminations - around 15% of our sessions. (https://developer.apple.com/documentation/webkit/wknavigationdelegate/webviewwebcontentprocessdidterminate(_:)) What could be the reasons for it? Is there a way to know for sure? Is the 15% of sessions number something that other apps also experience, or should this be lower? Thanks!
Topic: Safari & Web SubTopic: General
2
0
99
May ’25
Safari App crashes when running with Safari extension intermittently
I have observed Safari App starts crashing when running with my safari extension. Our Safari extension polls the host app every 60s. The extension receives and completes requests in func beginRequest(with context: NSExtensionContext) (we always call context.completeRequest(...)). The crash is intermittent: beginRequest itself does not throw. Looking for guidance about likely causes. I am attaching the snippet from crash report. Crashed Thread: 0 Dispatch queue: com.apple.main-thread Exception Type: EXC_CRASH (SIGKILL) Exception Codes: 0x0000000000000000, 0x0000000000000000 Termination Reason: Namespace RUNNINGBOARD, Code 3490524077 Thread 0 Crashed:: Dispatch queue: com.apple.main-thread 0 libsystem_kernel.dylib 0x1856f5c34 mach_msg2_trap + 8 1 libsystem_kernel.dylib 0x1857083a0 mach_msg2_internal + 76 2 libsystem_kernel.dylib 0x1856fe764 mach_msg_overwrite + 484 3 libsystem_kernel.dylib 0x1856f5fa8 mach_msg + 24 4 CoreFoundation 0x185822cbc __CFRunLoopServiceMachPort + 160 5 CoreFoundation 0x1858215d8 __CFRunLoopRun + 1208 6 CoreFoundation 0x185820a98 CFRunLoopRunSpecific + 572 7 HIToolbox 0x1912c327c RunCurrentEventLoopInMode + 324 8 HIToolbox 0x1912c64e8 ReceiveNextEventCommon + 676 9 HIToolbox 0x191451484 _BlockUntilNextEventMatchingListInModeWithFilter + 76 10 AppKit 0x189745a34 _DPSNextEvent + 684 11 AppKit 0x18a0e4940 -[NSApplication(NSEventRouting) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 688 12 Safari 0x1b801cce4 -[BrowserApplication nextEventMatchingMask:untilDate:inMode:dequeue:] + 228 13 AppKit 0x189738be4 -[NSApplication run] + 480 14 AppKit 0x18970f2dc NSApplicationMain + 880 15 Safari 0x1b83dd0b0 SafariMain + 468 16 dyld 0x185396b98 start + 6076
2
1
525
Sep ’25
How to get tab/url's favicon in safari web extension natively?
I'm converting a Chrome Extension to a Safari Web Extension, I found it's not easy to get favicon of current tab/url natively. The tab object in Safari doesn't have favIconUrl. { &#9;"id": 121, &#9;"index": 6, &#9;"active": true, &#9;"width": 1324, &#9;"audible": false, &#9;"url": "https://github.com/", &#9;"mutedInfo": { &#9;&#9;"muted": false &#9;}, &#9;"windowId": 2, &#9;"title": "GitHub", &#9;"incognito": false, &#9;"pinned": false, &#9;"height": 935, &#9;"highlighted": true, &#9;"status": "complete" } &#9;&#9; 2. I didn't find Safari has similar thing like chrome://favicon 3. I found Safari's favicon caches in ~/Library/Safari/Favicon Cache/favicons but have no idea how to use them in Safari Web Extension.
2
0
1.5k
Mar ’25
Animation Ghosting with animation-timeline on 120HZ ProMotion Devices
On iOS Devices with ProMotion (120HZ) if you animate Elements on your Page with animation-timeline you get Ghosting Effects. You can not see the Ghosting with a Simulator or on Screenshots, only on real Devices. To Reproduce I made a Minimal Example: https://codesandbox.io/p/sandbox/120hztest-xrwgtc When you scroll quickly on the Page with an iOS 120HZ Device (https://en.wikipedia.org/wiki/List_of_smartphones_with_a_high_refresh_rate_display) you will see ghosting on the Top of the right Element (animation-timeline) and no ghosting on the other animated Element. (I edited the Screenshot, to Illustrate how the Effect looks like, since it is only visible on the real Display)
2
0
243
Jan ’26
No longe rable to obtain network name
We have a JavaScript api that queries our Secure Browser to get the network information – signal strength, network name, plugged in/wifi. Everything worked fine through the Tahoe betas, still does. Now we are getting on the network name and this is breaking our UI. Was this an intentional change or a bug? The other two properties still appear to be working. And it works in all lower MacOS versions. We are currently obtaining it through AppleScript try   set ssid to do shell script "system_profiler SPAirPortDataType | awk '/Current Network Information:/ {getline; sub(/^ +/, ""); sub(/:$/, ""); print}'"   if ssid is equal to "" then     return "Not connected to any Wi-Fi network."   else     return ssid   end if on error errMsg   return "Error: " & errMsg end try
Topic: Safari & Web SubTopic: General
2
0
380
Oct ’25
iOS Safari 26 select dismiss issue
We are seeing an issue in Safari on iOS 26 where the a automatic unfocus of on select box dismisses the second one. <select name="choice1" onblur="console.log('onblur1');" onfocus="console.log('onfocus1');"> <option value="first">First Value</option> <option value="second" selected>Second Value</option> <option value="third">Third Value</option> </select> <select name="choice2" onblur="console.log('onblur2');" onfocus="console.log('onfocus2')"> <option value="first">First Value</option> <option value="second" selected>Second Value</option> <option value="third">Third Value</option> </select> select something in choice1. quickly tap choice2 before onblur1 is logged. At the timing of onblur1 the selection menu for choice2 is dismissed. Anyone know how to fix this behavior?
Topic: Safari & Web SubTopic: General Tags:
2
0
326
Sep ’25
Launching MacOS app via Url Scheme
I'm looking for answer or documentation on gatekeeper and launching a MacOS app via a url scheme/custom protocol. Our application is delivered via a zip file downloaded from the web. We utilize a url scheme. The act of extracting the app from the zip registers the url scheme with the OS. From previous research/testing we found we had to break the gatekeeper lock (have the user move the app from the downloaded location) to ensure that the url is honored on first launch of the application. To ensure user compliance, we added a check to make sure that the lock has been removed by looking at the quarantine attribute. This flow is not ideal. I am looking for alternatives and was previously under the impression that if we were to move to a DMG then that would provide the user a better user experience for moving it. However, now that I am getting around to looking into it, I am seeing some implied statements that this is not the case and that the quarantine bit will just be moved from the DMG to the app. Questions: Does a DMG allow the app to be launched via custom protocol without prior launch or movement? With a notarized app, will the custom protocol work on a subsequent launch, even without prior movement?
Topic: Safari & Web SubTopic: General
2
0
332
Oct ’25
WebGL is crashing in IOS 18.2 and 18.3
Hello, We’ve been using the CesiumJS WebGL library for several years, both on our website and within embedded WebViews in our iOS application. Since upgrading to iOS versions 18.2 and 18.3, we’ve started receiving numerous user complaints regarding application crashes on various iPad and iPhone models when loading CesiumJS. The crashes occur as soon as the 3D view initializes, and the error consistently reported is: "WebGL context lost" This issue appears to be a WebGL-related crash potentially triggered by GPU memory handling or allocation limits. However, we are not detecting any abnormal memory consumption prior to the crash, and the same setup works perfect on older iOS versions and on all Android devices and versions. Steps to Reproduce: Open: https://www.flightradar24.com/30.47,-94.84/8 Click on any aircraft icon on the map. In the aircraft details panel at the bottom, click on the “3D view” tab. On iOS 18.2 or 18.3, the page will crash shortly after initializing CesiumJS WebGL. Affected Devices: This issue is occurring across a wide range of devices, including: iPad 9th Generation iPad Pro (11-inch, 2nd Gen) iPhone SE (2020 and 2022) iPhone 11, 11 Pro iPhone XR iPhone Mini All of the above are running iOS 18.2 or 18.3. The problem does not occur on Android or previous iOS versions. Request: Has anyone else encountered similar issues with WebGL context loss after upgrading to iOS 18.2 or 18.3? Are there any known changes in memory limits or WebGL behavior in these recent iOS updates? We’d appreciate any insight or suggestions on workarounds or potential fixes. Thank you!
2
1
413
Mar ’25
Safari: Sticky element with bottom: 0 does not follow viewport when toolbar hides on scroll
Device: iPhone 15pro, ios26.0 (23A 341) IOS version: 26.0 (23A 341) When using position: sticky; bottom: 0, the div is expected to stick to the bottom of the viewport when the browser toolbar hides while scrolling. However, it stops at the height where the toolbar was, instead of moving down with the disappearing toolbar. In the image below, the red-bordered navigation shows the situation where it does not stick to the bottom. i
1
2
467
Sep ’25
Clicking on Quit and Open Safari Extensions Preferences... does nothing
I am trying to build and run a Safari Web Extension from Xcode and I have enabled "Allow unsigned extensions" in Safari settings. However, I see the below pop up: And, if click on the "Quit and Open Safari Extensions Preferences..." button, the project stops running on Xcode and nothing happens. What can be the issue? The extension works and runs fine if I get it from the Mac App Store and this only happens when running from Xcode. I even tried completely uninstalling the mac app store version and still facing the same issue.
1
0
170
Apr ’25
I want to specify the background color for the header notch and footer indicator area when opening the browser in Safari on iOS 26.
When I open the browser in Safari on iOS 26, I want to specify the background color for the header notch (where the time, battery, etc. are displayed) and the footer indicator area. Specifying the theme color in HTML as shown below did not change anything. <meta name="theme-color" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ff0000"> The HTML below specifies the background color as green, but is it necessary to specify the background color directly in the body like this? Or is there some kind of metadata, like theme color? <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="theme-color" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ff0000"> <title>サンプル</title> </head> <body style="background:#00ff00"> <main> <p>テキスト</p> </main> <div id="overlay" role="dialog" aria-modal="true" data-test-id="health-warning-modal" style=" color:#000000; position:fixed; inset:0; z-index:30000; background:#2563eb; display:grid; /* 初期表示:表示中 */ align-items:center; justify-content:center; overflow-y:auto; " > <div style=" padding:60px 16px; display:flex; flex-direction:column; gap:20px; width:100%; box-sizing:border-box; " > <p style=" font-weight:700; text-align:center; margin-top:20px; font-size:28px; line-height:1.4; " > オーバーレイ </p> </div> </div> </body> </html>
1
0
524
Sep ’25
Unable to send a message from website to Safari web extension
I've been unable to successfully get a webpage to send a message to a Safari web extension, no matter what I try doing. I've added the following to my manifest.json file, and it's running manifest v3 { "externally_connectable": { "matches": [ "*://mywebsite.com/*", "*://localhost:3000/*" ] } } My web page executes the following code snippet. I've tried this both while running my site locally (on localhost) and pushed to production. let safariExtensionId = "co.companyname.productname.Extension (ABCD1234)" browser.runtime.sendMessage(safariExtensionId, { greeting: "hello"}, function(response) { console.log("Received response from background page"); console.log(response.farewell); } ); In the Safari web extension's background.js file, I've added the following onMessageExternal listener: browser.runtime.onMessageExternal.addListener((message, sender, sendResponse) => { console.log("Received message from the sender."); console.log(message.greeting); sendResponse({ farewell: "Goodbye!" }); }); This is directly copied from the instructions in this WWDC video: https://developer.apple.com/documentation/safariservices/messaging-between-a-webpage-and-your-safari-web-extension It's also extremely difficult to debug what's happening since the extensions service working frequently does not appear in the Web Extension Background Content menu Is there something I'm doing wrong, or a bug I'm not aware of?
1
0
182
May ’25
Safari Is Unusable
I have had zero luck anywhere else and it’s at this point infuriating. February 23rd of this year I submitted a ticket in Feedback regarding how Safari for me has been broken. I can’t load any website at all, I have cleared cache, data, you name it. I have reset the phone after doing so and as I type this today on a brand new iPhone 17 Pro Max it still doesn’t work. Every single app that prompts a Safari window to sign in also doesn’t work and crashes just as Safari the app does. Sometimes I get a message that pops up that says “Webkit encountered an internal error” before it crashes. I can’t provide a screen recording or screen shots because Safari just crashes. I genuinely don’t know what to do or where to go for an answer and i’ve submitted seven updates to my open Feedback ticket since February 23rd 2025, spanning months from that original date and yet no change or help has came from it. I am clueless on how to even begin to go about fixing it and agitated because it’s been so long, so many other apps effected by this, even on a brand new device Safari still does not work for me. Any help at all would be greatly appreciated I used to have a 15 Pro Max but now on the 17 Pro Max and throughout the entire time i’ve been on the developer beta. Maybe that is the issue i’m unsure because now i’m just on iOS 26 so I don’t know if it’s just stuck like this forever. Again any help would be appreciated. I have not went physically to Apple yet to get this solved it‘s been a last resort, considering my options I might have to clear time to go. I’ve been using Chrome ever since this issue.
1
0
568
Sep ’25
Apple Pay on Web in Cross-Origin iFrame: Merchant Validation Failure Due to Referrer Header Reliance (Custom API Integration)
Hi Apple Developer Community and Support, We are implementing Apple Pay on the Web and are encountering a persistent issue with merchant validation when the ApplePaySession is initiated from a JavaScript application running within a cross-origin iframe. Our Setup: Top-Level Domain: https://application.my.com/ (where the Apple Pay button is displayed, and the iframe is embedded) iFrame Content Origin: https://cashier.my.com/ (Our custom JavaScript application that handles the Apple Pay integration and directly calls our Payment Service Provider's (PSP) API for merchant validation). iFrame allow attribute: The iframe correctly includes allow="payment *". The Problem: When a user clicks the Apple Pay button, the ApplePaySession is successfully created and the Apple Pay sheet opens in Safari iOS. This suggests the browser recognizes the allow="payment *" attribute and allows the API calls. However, during the session.onvalidatemerchant callback, our JavaScript code makes a direct API call to our PSP (Nuvei)'s endpoint. This call consistently fails with an "Invalid domain name!" error, and the Apple Pay sheet then shows "Payment Not Completed." PSP's Diagnosis: Our PSP (Nuvei) has investigated and stated that for this specific endpoint (getAppleValidationApiFlow.do), "there is no explicit way to pass domain to the endpoint and domain for which session is issued is based on 'Referer' header." Our Question for Apple: Given that Safari 17+ now supports allow="payment" for cross-origin iframes to enable Apple Pay APIs, we have the following questions: What is Apple's official guidance or expectation regarding the Referer header for ApplePaySession.onvalidatemerchant calls when the ApplePaySession is instantiated from a cross-origin iframe? Is it expected that the Referer header for calls originating from the iFrame will always be the iFrame's origin? Does Apple's merchant validation process (when the PSP calls apple-pay-gateway.apple.com/paymentservices/startSession) itself rely on or interpret the Referer from the initial client-to-PSP call? Are there recommended best practices or standard approaches for PSP integrations in this cross-origin iFrame scenario to ensure the Referer validation (or equivalent domain validation) is correctly satisfied? We're trying to understand if our PSP's specific reliance on the Referer for this validation is a standard requirement implicitly set by Apple for this flow, or if there are other architectural approaches that should allow this scenario to work seamlessly. Thank you for any insights or guidance you can provide.
1
0
273
May ’25
Sign in with Apple JS inside an iframe
Hi everyone, My web application has two services: myapp.com and account.myapp.com. The first manages all app content, while the latter handles the authentication, with Sign In with Apple included. The tech stack is mainly composed of React, JS, and Express. We'd like to allow users to authenticate inside a dialog on some pages of myapp.com. To avoid replicating stuff from one service to another, we put an iframe inside the dialog to show the authentication standard page from account.myapp.com. Email and Facebook processes work fine, but we have the following issues with Sign in with Apple: On desktop, not Safari, a pop-up window opens when you click on the Apple button, and it works as expected. On desktop Safari, the pop-up window is blocked. We want the native Apple pop-up to show instead of a generic browser new window. On mobile, nothing happens on click Obviously, outside the iframe, everything works as expected. I can't seem to find anything related to an iframe constraint in the Sign in with Apple docs. Is this feasible?
1
0
161
May ’25