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

Detect whether the user is using Safari or Safari Technology Preview?
Hi, I’m trying to detect whether my Safari Web Extension is running in Safari or Safari Technology Preview. Is there a reliable way to do that? I can get the executable path of the parent process using proc_pidpath(). However, unlike Chrome or Firefox, Safari extensions run under /sbin/launchd as the parent process, not the responsible process (browser’s binary). In this scenario, I need the executable path of the actual browser process, but I haven’t found a way to get it. Also, Safari doesn’t implement the Web Extension API’s browser.runtime.getBrowserInfo(), unlike Firefox. I haven’t tested it yet, but I’m considering checking the user agent string, though I’m not sure how reliable that would be. Use Case Some users use my Safari extension as a web development tool and want to enable some features exclusively in Safari Technology Preview, while using other features only in standard Safari. If I could detect which browser is in use, I could provide the appropriate functionality for them.
0
0
452
Jul ’25
Apple Pay Third party browsers - completeMerchantValidation fails
I've a apple pay integration on my website. The new sdk, that allows third party browsers. My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete". I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution. When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction." I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?) I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types. What else can iIcheck?
0
0
369
Feb ’25
Push Notifications Not Working in iOS App or Safari Browser Created via PWA Builder
Push Notification Issue in iOS PWA App We’ve been trying to implement push notifications in our iOS app, which is a wrapper around a Vite PWA built using PWA Builder. Here's a detailed overview of the issues we’re facing: Problem Summary We originally had a working Vite PWA and used Firebase Cloud Messaging (FCM) for push notifications. When converting this PWA to an iOS app using PWA Builder: The notification permission prompt did not behave as expected in Safari. Even after requesting permission via a user gesture (e.g., button press), FCM token was not received. On Safari (both Mac and Windows), permission sometimes works, but the token isn’t saved until Safari is closed and reopened. In the iOS PWA app, the FCM token never gets retrieved. We tried the same process on Chrome, and everything works flawlessly there. What We’ve Tried Wrapped the permission request and FCM token logic in a user gesture (e.g., button click), as recommended. Confirmed our manifest includes all necessary fields (see below). Tested across macOS, Windows, Safari (desktop), and the iOS app. Manifest.json { "name": "Periscopio", "short_name": "Periscopio", "start_url": "/", "display": "standalone", "background_color": "#f2f2f2", "lang": "en", "scope": "/", "description": "Facilitates the collection of primary data for market research purposes.", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/maskable_icon_x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/maskable_icon_x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "edge_side_panel": { "preferred_width": 400 }, "display_override": [ "window-controls-overlay", "standalone" ], "theme_color": "#08244c", "orientation": "portrait" } Core Logic (Plain TypeScript) 1. Request Notification Permission + FCM Token async function handleRequestPermission(): Promise<string | null> { try { console.log("Requesting notification permission..."); const permission = await Notification.requestPermission(); console.log("Notification permission result:", permission); if (permission === "denied") { console.error("Notification permission was denied."); return null; } const token = await requestFCMToken(); console.log("FCM Token:", token); if (token) { console.log("Notification setup successful."); return token; } else { console.error("Failed to retrieve FCM token."); return null; } } catch (error) { console.error("Error requesting FCM token:", error); return null; } } 2. FCM Token Logic async function requestFCMToken(): Promise<string | undefined> { try { let permission = Notification.permission; if (permission === "default") { console.log("Requesting notification permission..."); permission = await Notification.requestPermission(); } if (permission === "granted") { console.log("Notification permission granted."); const isSupportedBrowser = await isSupported(); if (!isSupportedBrowser) { console.error("This browser does not support FCM."); return; } const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js"); console.log("Service Worker registered:", registration); const token = await getToken(cloudMessaging, { vapidKey: "YOUR_PUBLIC_VAPID_KEY_HERE", serviceWorkerRegistration: registration, }); if (token) { console.log("FCM Token:", token); localStorage.setItem("fcmToken", token); return token; } else { console.warn("No registration token available. Request permission to generate one."); return; } } else if (permission === "denied") { console.warn("Permission to notify was denied."); return; } else { console.warn("Notification permission not granted."); return; } } catch (error) { console.error("Error getting FCM token:", error); return; } } Request for Help We’d really appreciate support from anyone who’s successfully implemented FCM push notifications in a Vite PWA wrapped as an iOS app using PWA Builder. Is there something we’re missing about how iOS Safari handles push permissions in PWA mode? Could there be an issue with the service worker or the manifest setup that causes the token not to register? Any Safari-specific quirks to be aware of? Thanks in advance!
Topic: Safari & Web SubTopic: General
0
0
96
Apr ’25
Forcing Reflow in Safari/Chrome on iOS When Switching from overflow-x: hidden to overflow-x: scrollcroll tant que l'utilisateur maintient son doigt sur l'écran
Hello everyone, We are encountering a specific issue on iOS devices (iPhone 15 Pro in our case) when using Safari and Chrome. The problem occurs when switching an element's overflow-x property from hidden to scroll while the user keeps their finger on the screen. Problem Description: The overflow-x property change does not trigger a reflow or render update immediately. This behavior causes the element to remain visually stuck in the previous hidden state until the user lifts their finger and interacts again. Context: The element is animated. The issue happens consistently when the user's finger remains on the screen during the property transition. What We’ve Tried: Explicitly forcing styles using element.style in JavaScript. Triggering element.offsetWidth or getBoundingClientRect() to force reflow. Applying manual transform changes in combination with overflow updates. Unfortunately, none of these approaches resolve the issue in real-time while the user’s finger is on the screen. Questions: Is there a recommended way to force a reflow or repaint in Safari/Chrome on iOS under these conditions? Are there known limitations with overflow-x transitions and user touch events on iOS? Are there any workarounds or best practices to handle such cases? Thank you in advance for any insights!
Topic: Safari & Web SubTopic: General
0
1
421
Jan ’25
Throttling on navigator.geolocation.getCurrentPosition on Safari
I'm using navigator.geolocation.getCurrentPosition to retrieve the users coordinates in a PWA built with Nextjs. getCurrentPosition is called by clicking on a button. If getCurrentPosition is called afterwards, the cached value is returned. On Safari, If I refresh the page, or logout, login and call getCurrentPosition again, the getCurrentPosition error callback is called with an error code 2 - POSITION_UNAVAILABLE. After around five minutes, getCurrentPosition can be called again. Is there some kind of throttling restriction on Safari navigator.geolocation.getCurrentPosition?
0
0
452
Jan ’25
Subscription permission denied on webapp push
HI, please can someone help? I have a web app where push notifications are in place for Chrome, Firefox, and Edge. Providing the user allows notifications then when they log in for the first time their details are registered to the subscriptions table in the backend. All good so far. When trying to do the same with Safari on Mac I'm faced with this issue: "Safari doesn’t support invisible push notifications. Present push notifications to the user immediately after your service worker receives them. If you don’t, Safari revokes the push notification permission for your site." and the user is not registered in the subscription table with the Safari console just saying variations of this: [Warning] Notification permission denied. (notifications_frontend.js, line 177, x2) [Log] Enable Notifications button clicked (notifications_frontend.js, line 245) [Log] Safari Push Notifications detected (notifications_frontend.js, line 248) [Warning] Safari Push Permission denied. (notifications_frontend.js, line 278) I've found this on an another forrum: "Safari requires that you immediately post a notification when a push message is received. "Immediately" means that it cannot be after some async operation. If you display a notification immediately from the service worker itself, it will stop displaying that error. I cannot remember 100% but I think if you clear your cache and cookies you will be able to receive push messages again if you accidentally get blocked while testing." and I've tried adding buttons to trigger allowing notifications but it all seem to late to get the subscription registered in the subscription table. I'm pretty new to coding so if any has a similar experience and can advice how to get the subscriptions registered when the user logs on for the first time in Safari in a Mac it would be greatly appreciated. Thanks...
0
0
350
Jan ’25
When will CSS animation-timeline hit Safari?
Hi all, Chrome has it already - animation-timeline aka scroll-animations. I can nowhere find any informations on what's the status in Safari/Webkit. Seems like they do not have it on the agenda at all? Does anyone know anything - I wanted to push a feature request for that - but also seem there is no feature request list anymore for webkit. See: https://www.w3.org/TR/scroll-animations/ Cheers and kind regards!
0
2
441
Feb ’25
Service Worker isn't working in Internal iframe: WebView file://
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.
0
0
540
Jan ’25
WKWebView audio/video codecs support
Actually this is a duplicate for https://developer.apple.com/forums/thread/106537 but in web-specific forums section. Is there any video/audio codec best practices, guides, recommendations for app/web developers for best performance (take advantage from HW acceleration), power consumption saving? What are officially supported media containers? What are video encoding profiles, video dimensions, frame rates? The only official source I have found is https://developer.apple.com/documentation/webkit/delivering-video-content-for-safari?language=objc. But h264 is pretty old. I experimentally found that the VP9 video format is also supported on iOS newer versions. But is this a requirement? Сan i be sure that the video will play on all devices? My goal is to provide web media content (which will be rendered in my application using WKWebView API) that will be supported by most devices (both iOS and MacOS), takes advantage of such features as hardware decode acceleration and be efficient. Any hints/info is highly appreciated. Best regards.
Topic: Safari & Web SubTopic: General Tags:
0
0
104
May ’25
Specification change of windows.open for Safari
We are experiencing a problem that seems to be caused by a specification changes for Safari. We would like to discuss how to solve this problem. Sample JavaScript: <html> <head> <script> function jumpPage(code) { document.main.code.value = code; win1=window.open("","win1","toolbar=no,resizable=yes,menubar=no,scrollbars=yes,status=yes,left=0,top=0"); win1.resizeTo(width=screen.availWidth,height=screen.availHeight); document.main.action="details"; document.main.target="win1"; document.main.submit(); } </script> </head> <body> <form name="main" method="post" action="" target=""> <a href="javascript:jumpPage('001')">details</a> <input type="hidden" name="code" value=""> </body> </html> This JavaScript performs the following actions when a link is clicked. Open a window using window.open in JavaScript Submit the above opened window by post method to the target in JavaScript. When this operation is performed, the process in (2) could submit to the target page with “POST” method before iOS18.1, but will transition to the page with“GET”method from iOS18.2 onward. All protocols are http. This problem does not occur if the URL is specified as an IP address, but it does occur if the host name is specified as. Please let me know how to use with“POST”method as in iOS 18.2 or earlier. Best regards,
Topic: Safari & Web SubTopic: General
0
0
53
Apr ’25
Safari 18: Storage location for open windows and tabs
I want to write an app, that lets users restore all oben windows and tabs from any given point in a TimeMachine backup. The store location seems to have changed. In earlier versions it was possible to restore the open windows and tabs by retrieving /Users/[UserName]/Library/Containers/com.apple.Safari/Data/Library/Safari/SafariTabs.db …/SafariTabs.db-shm …/SafariTabs.db-wal As of 18.3 this doesn’t work any more, even though these files get updated with the use of Safari What else would I need to retrieve from a back up disk? Thank you very much for any hints!
Topic: Safari & Web SubTopic: General Tags:
0
0
508
Feb ’25
Analysis of issues on Safari with liquid glass
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.
Topic: Safari & Web SubTopic: General Tags:
0
4
125
Sep ’25
Tracking playback events from Apple Podcasts iframe in AEM
Hi everyone, I’m working on a web project developed on Adobe Experience Manager (AEM), where we’ve built a custom component that embeds Apple Podcasts episodes using the official iframe provided via https://embed.podcasts.apple.com. Everything works correctly from a rendering point of view, but we are now exploring ways to track user interactions with the embedded player, specifically events such as: start, play, pause, progress milestones (e.g. 25%, 50%, etc.). This data would be used to send analytics events to Adobe Analytics. So far, we haven’t found any documentation or JavaScript API that would allow us to listen to these events. We'd like to ask: Is there any official way to track playback events from an Apple Podcasts iframe? Any information, clarification, or direction would be really appreciated. Thanks in advance! Thanks, Adriana
Topic: Safari & Web SubTopic: General
0
0
50
Apr ’25