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%
Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Hi folks!! Anyone here experienced issues with video not showing up in webview?
I have a simple index.html with a video tag but its doesn't load why?
Hi. I'm a developer of Tab Finder (https://apps.apple.com/us/app/tab-finder/id6741719894)
My problem is that every time i switch from my first window to a second window, the tabs in the validateToolbarItem() are INcorrect on a first call, but when I switch back from the second window to my main window, the tabs are CORRECT even on a first call.
To demonstrate it, i recorded a video: https://youtu.be/RwskzrSJ8u0
To run the same sample extension from the video, you can get the code from this GitHub repo: https://github.com/kopyl/test-tabs-change
Its only purpose is to log URLs of an active page of all tabs.
The SafariExtensionHandler's code of the sample app is very simple:
import SafariServices
func printOpenTabsHost(in window: SFSafariWindow) async {
let tabs = await window.allTabs()
log("Logging tabs for a new window: \(window.hashValue)")
for tab in tabs {
let page = await tab.activePage()
let properties = await page?.properties()
let url = properties?.url
log(url?.absoluteString ?? "No URL")
}
}
class SafariExtensionViewController: SFSafariExtensionViewController {
static let shared = SafariExtensionViewController()
}
class SafariExtensionHandler: SFSafariExtensionHandler {
override func validateToolbarItem(in window: SFSafariWindow, validationHandler: @escaping ((Bool, String) -> Void)) {
Task {
await printOpenTabsHost(in: window)
}
validationHandler(true, "")
}
override func popoverViewController() -> SFSafariExtensionViewController {
return SafariExtensionViewController.shared
}
}
Could you please tell if i'm missing something and how to see the actual tabs inside the overridden validateToolbarItem call of the SafariExtensionHandler (or in any other way, I'm okay with any implementation as long as it works).
Topic:
Safari & Web
SubTopic:
General
Tags:
Extensions
Safari Services
Safari and Web
Safari Extensions
After the first installation (out of AppStore) of the extension in the browser, the content script is correctly inserted into the page (twice for some reason) and a message is sent from the root of the content script to the background script, which responds correctly.
However, if an event handler is registered within the content script, within which the message is also sent to the background script, it will never reach the background script.
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source !== window) {
return;
}
if (event.data.source && event.data.source === appIdentification) {
browser.runtime.sendMessage(event.data);
}
}, false);
It does not matter with what delay the event handler is called (i.e. the background script is not asleep). If I refresh the page or close and reopen the browser and reload the page, everything works correctly and the message sent from the event handler is already delivered to the background script.
The event handler is used so that the extension code is uniform for all browsers (Chrome, Safari, Edge, Opera, Firefox), i.e. it is not intended to use externally_connectable for sending messages from the webpage directly to the background script, which Safari should support. The expected behavior is that the extension will work even after the first installation, as is the case with other browsers.
Procedure:
Enter the test website: https://www.mssf.cz/testapp/check_client.aspx
Do the initial installation of the extension (could be downloaded from here: https://1drv.ms/f/c/76f4c93826df41a0/Ej5MQX9ctyhHv_P9_t_6uAwB05ET-nzXuMhPeu56nOgkWg?e=cudqRJ)
Set a breakpoint in the event handler for "message" within the content script, open the background script and set a breakpoint in the event handler for onMessage
Click on the "Validate certificate" button on the page loaded in point 1
Step through the content script to the point where the message is sent to the background script, the breakpoint within the background script is never hit, which is an error, the message should come to the background script
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)
Hi!
I'm working on a web extension for Safari and I need to send messages from the containing application to JavaScript. For this I use the method
class func dispatchMessage(
withName messageName: String,
toExtensionWithIdentifier identifier: String,
userInfo: [String : Any]? = nil
) async throws
of the SFSafariApplication class. If the site is opened in Safari in normal mode, everything works as expected. However, if the site is "docked", the messages are not transmitted to this "Web App".
Title: Content Overlapping Address Bar After Clicking Links in Safari, tested on iPhone 11 (iOS 18.1.1)
Description:
When browsing in Safari on iPhone (iOS 18.1.1), the one-tab bar (address bar) collapses as expected when scrolling down a page. However, after clicking on a link and loading the next page, the content appears to overlap the collapsed address bar. This results in parts of the content being hidden or obscured by the address bar, which affects the user experience, especially on mobile devices with limited screen space. This issue is reproducible on Next.js applications and can be observed on websites such as rotterdam.nl and halderberge.nl.
Steps to Reproduce:
Enable the One-Tab Bar: Go to Settings > Safari and enable the one-tab bar feature.
Open the website rotterdam.nl or halderberge.nl in Safari on an iPhone 11 (iOS 18.1.1).
Scroll down the page so that the top address bar collapses.
Click on any link on the page to load a new one.
Once the new page loads, observe that the content appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured.
Expected Result:
The content should not overlap or be hidden behind the collapsed address bar after the page reloads. The layout should adjust properly without interference from the address bar, providing a smooth user experience.
Actual Result:
When the new page loads, the content overlaps or appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured.
Device(s) Affected:
iPhone 11 running iOS 18.1.1.
OS Version:
iOS 18.1.1
Technical Notes:
To address this issue, the following solutions have been attempted with no success:
Viewport Meta Tag:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
This was added to help ensure proper layout on mobile devices, but did not resolve the issue.
CSS Safe Area Insets:
body {
padding-top: env(safe-area-inset-top);
}
This CSS rule was applied to account for the safe area and prevent content from being hidden under the address bar, but it did not solve the overlapping issue.
Scroll Position Adjustment (for scroll-to-top button):
Adjusting the scroll behavior by changing the scroll position to {top: 1} instead of {top: 0} was a successful workaround to keep the address bar collapsed when clicking the "scroll to top" button. However, this did not resolve the issue when navigating between pages or changing routes, where the content still overlaps the collapsed address bar.
Posting this here since Apple Discussion Forums kept deleting this citing it was a "developer issue" even though it's not and there's no way to appeal. Can someone help me?
I can't get 2FA SMS/Email Codes to autofill in Brave or Chrome as of this writing. Has anyone else had this issue?
Topic:
Safari & Web
SubTopic:
General
iOS 26 introduced a significant step back for PWAs - you now need at least five taps to add a PWA to your home screen.
Android has excellent PWA support - it takes 1 tap to install an app, and the platform support is great, and web apps feel amazing. The gap between the platforms has now increased even further.
My team and I were hoping for better PWA support, but now we are very worried about the direction - it puts us in a difficult situation.
I'm sure many developers face a similar challenge.
What's the current status of PWAs in iOS? Is Apple aiming to improve its support in the near future? Is there a roadmap, tech previews, or betas addressing the issue?
Topic:
Safari & Web
SubTopic:
General
Hello,
As previous reports have already shown, there seems to be a few issues on the latest version of Safari, mainly around:
Modals taking up the full viewport
Elements positioned at the bottom of the screen
This also seems to affect the modals on apple.com/iphone.
I've recently done an analysis of what can and can't be done in code to work with the new liquid glass UI and thought I'd share my findings here.
The full write up, along with screenshots and the demos I used are available in this repository:
https://github.com/stevenocchipinti/liquid-glass-spike
A brief summary of the findings:
The conditions for a fullscreen modal overlay element to cover the entire screen with a position: fixed; seems to be:
The background must be semi-transparent
Solid colours, linear-gradients, etc. don't work
The container must be empty
This also means the standard and ::backdrop don't seem to work.
The conditions for a bottom sheet to cover the entire screen, including the area around the Safari toolbar seems to be:
The element must be positioned within 3px from the bottom of the viewport
The height must be within a certain threshold
If I've missed anything, please let me know.
It would be really nice to have some official documentation on these issues to explain to developers how to do this properly.
Is it a specification that the Service Worker doesn’t work in an internal iframe only when the parent page in a WebView is file://? It works in Mobile Safari under the same conditions, and we couldn’t find any specification that says Service Worker-like behavior doesn’t work with this combination.
Step to reproduce:
We use Vite to develop the application.
For the iframe in Webview,
Install vite-plugin-pwa with version ^0.20.5
Add VitePWA({...}) to plugins[] array in vite.config.ts
Build and preview the app: npm run build && npm run preview.
We open a Webview with file:// and then open the iframe with the URL to which we preview the app (We use ngrok to create the URL).
Then we open Safari and inspect the Webview but inside the Developer > Service workers tab doesn’t have a registered service worker.
For safari, we do the same step 1-3,
We open Safari browser with the URL that we have deployed the app (The same URL we used in the iframe in Webview).
We go inside the Developer > Service workers tab and it has a registered service worker.
Environment:
Simulator: IOS 18.2
Safari: MacOS 15.2
Expectation: Safari and the iframe in Webview should have a registered service worker inside the Developer > Service workers.
Please!
is there an app or anything I can do
ive posted multiple times.
Ive researched all that I can
even with screen time on and web limits it still lets u swipe to delete history! Yes it’s grayed out but u can still swipe and delete it!!
I've been using Sign In with Apple for Web for the last six months, and it works well enough.
Now, I'm updating the domain of the main application (we got the .com! yeah!)
However, I can't find a way in the configuration UI to update the allowed redirect URLs for the application.
I go to Identifiers -> My App -> Capabilities -> Sign In with Apple -> Edit button.
It just allows me to edit whether this is a primary ID, or grouped ID, plus a callback URL (which I'm not currently using.)
Hello all,
I'm building a web application in ASP.NET MVC (.NET Framework 4.7.2), from this web app I need to send push notifications to users. For the ones who are logged in with windows/android, everything works as expected, but I can't manage to get it work on the apple side.
If I use the same methods to subscribe to push notifications, it shows me the popup that asks the user to enable push notifications, and then I get an endpoint like this:
https://web.push.apple.com/QKC1Muic0H7...
It doesn't work using this (taking the part after https://web.push.apple.com/), I keep getting "Bad device token" (trying to send the notification via APNS).
Then I found out that there is another method to register the device from the frontend, and this one should give me the real device token:
window.safari.pushNotification.requestPermission
But this one doesn't show me the popup, it gives me "denied" without a reason.
I'm trying to a test application which is here https://pwa.vctplanner.it, the web push id is web.it.vctplanner, I created a push package downloadable from POST https://pwa.vctplanner.it/api/v2/PushPackages/web.it.vctplanner, and the code from the frontend is this:
function registerSafariPush() {
// Controlla se Safari Push Notifications è disponibile
if (!('safari' in window) || !('pushNotification' in window.safari)) {
console.log("Safari Push Notifications non supportate su questo browser.");
return;
}
// Il tuo Website Push ID registrato su Apple Developer
var websitePushId = "web.it.vctplanner";
// Controlla lo stato della permission
var permissionData = window.safari.pushNotification.permission(websitePushId);
switch (permissionData.permission) {
case 'default': // L'utente non ha ancora deciso
window.safari.pushNotification.requestPermission(
'https://pwa.vctplanner.it', // URL del server che serve il Push Package
websitePushId,
{}, // dati opzionali da inviare al server
function (permission) {
if (permission.permission === 'granted') {
console.log("Notifiche push abilitate!");
sendSubscriptionToServer({ endpoint: permission.deviceToken });
} else {
console.log("Notifiche push non abilitate dall'utente.");
}
}
);
break;
case 'denied': // L'utente ha negato
console.log("Notifiche push negate.");
break;
case 'granted': // L'utente ha già autorizzato
console.log("Notifiche push già autorizzate.");
sendSubscriptionToServer({ endpoint: permissionData.deviceToken });
break;
}
}
Any suggestions of what I'm missing? Is there a complete guide to how generate the push package?
Thank you
The app analytics tab for my account is empty. It doesn't show any bundle IDs or apps that have been launched. Is this normal for WatchOS apps?
Here's a screenshot of the tab: https://cloud.goodsmile.studio/hT5fL2HY
With most recent Safari update, our page started having some of it's core functionality broken while users access it on Private mode due to Fingerprinting protection.
The issue is that the code that breaks is our first-party code and I want understand why it is breaking and how to properly fix it.
One thing we discovered was that a service of ours that uses the same code base doesn't have these issues and current assumption is that their page bundles are served on the same domain as the actual page request, while ours is coming from a different one.
The other assumption was that the domain which we use for serving the bundles of the page are set on the domain that is flagged as tracking domain.
Is there some documentation on how Safari decides which code is allowed reading user inputs and which isn't and what is the appropriate approach to fix this issue as it would be possible that these changes get release as default in the future?
Topic:
Safari & Web
SubTopic:
General
In the Safari browser on mobile devices, the tags in an HTML element are styled with the system's default styles. I want the text inside the tags to be displayed without line breaks. However, in reality, the text wraps according to its length. May I ask if there are any methods to achieve this?
(ps: CSS-related properties such as white-space: nowrap do not work.)
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
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.
Topic:
Safari & Web
SubTopic:
General
Tags:
Safari Developer Tools
Safari Services
Safari
Safari Extensions
Hello,
I have an authentication flow where my app communicates with a backend protected by F5 client certificate validation. The client certificate is distributed via MDM and is available in the device keychain, but not accessible directly from the app.
When using ASWebAuthenticationSession (or SFSafariViewController) Safari can successfully pick up and present the certificate during authentication, so that part works fine.
However, the backend’s authenticate endpoint only supports a POST request with an Authorization header, whereas ASWebAuthenticationSession only accepts a GET URL when starting the session.
My questions are:
How is this type of flow typically implemented in iOS?
Should the backend provide a GET-based endpoint that redirects into the POST, or is there a recommended iOS pattern (e.g., an intermediate HTML page that does the POST after certificate validation)?
Are there Apple guidelines on handling certificate-based auth with ASWebAuthenticationSession when the API requires POST, especially for In-House distributed apps?
Any guidance or best practices would be very helpful.
Topic:
Safari & Web
SubTopic:
General