Hello, notificationclick event cannnot be triggered if the progressive web app(pwa) is already opened.
I have tried many methods including
client.focus()
clients.openWindow()
client.postMessage() message event listening
Delayed message queue (to let the client being opened)
preventDefault() in notificationclick event
Activation
event.waitUntil()
The situation is that when the device install the pwa twice, the second pwa works normally. However, it is nonsense to ask users install the pwa twice.
Is it a bug in Webkit and will it be fixed in the future? is there a workable example?
Background: using web-push, iOS 17/18
Thanks a lot
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
ios drop file wrong file name
I use the following simple JS code to drag file from the browser to the desktop.
Works perfect on MacOS.
onDragStart(event, ucpView) {
let file = new BrowserFile([this.file.fileContent], this.file.displayName, {
type: 'application/ucp-scenario'
});
const fileURL = URL.createObjectURL(file);
event.dataTransfer.setData("DownloadURL", `application/octet-stream:${file.name}:${fileURL}`);
event.dataTransfer.setData("text/uri-list", fileURL);
}
but on iOS it keeps nameing the file
Text1.txt
Text2.txt
...
and ignores the DownloadURL
whats the best way to get it workng on both OS?
Topic:
Safari & Web
SubTopic:
General
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
I built a web application using the Apple Pay on the Web Interactive Demo with the Payment Request API, but encountered a few issues:
The initiated web Apple Pay interface shows a spinning circle at the bottom and cannot proceed with payment(Bottom display:正在处理). What could be causing this?
How to set up sandbox testing for payments?
How to asynchronously and synchronously retrieve payment results (backend code to fetch payment results)? The demo only shows frontend code using await response.complete("success"); for retrieving payment results
my demo URL: https://shop.wowseer.com/rsolomakhin/pr/applepay/
If the host name included in the URL of the PWA and the host name included in the URL of the xlsx file accessed from within the PWA match, the upper menu portion of the application selection screen for opening the xlsx file will be blank.
However, if the host name in the PWA URL is changed from the PC name to an IP address and the host name in the URL of the xlsx file accessed from within the PWA is left as the PC name so that the host names do not match, the upper menu portion of the application selection screen for opening the xlsx file will be displayed. (e.g., the Safari icon appears in the upper right corner).
Is anyone else experiencing the same phenomenon? Is it a bug?
Topic:
Safari & Web
SubTopic:
General
Good morning fellow developers,
For a while i am struggeling with providing sound to my users on IOS (Safari on Mac is no problem and every other device is not a problem) (we have an existing phone system and made a chat as well), the case is very simple: the notification sound is only for users who are logged in and online for chat.
i have tried multiple things:
Audio play with javascript (start with mute, play when user clicks a button so the sound is familiar, play when user clicks a button and directly pause it and continue when needed)
PWA: the dashboard has been made available as pwa and notifications using google firebase. The popup does show for notifcations to be allowed (and receiving the notifications does work on any other device) But any IOS device cannot register.
The information i find is that notifications were supported with 16.4 or higher but also have been deprecated around IOS 17, auto play is not allowed.
We have an app in development for our product as well were we will have a notification which will handle this, but that is not the solution we can use now.
Long story, short question: is it still somehow possible to push a notification to the user when using the PWA or play a sound in the browser (based on an ajax function). The app/website wont be in the background, so it will always be on the screen.
Languages we use: html/javascript (mostly vanilla)/php
Hey team, I've integrated custom WkWebsiteDatastore to manage profiling for different sessions.
upon testing the WkWebsiteDataStore as its mentioned to be persistent But
The storage can be accessed via identifier, But the session data in storage is absent, such as cookies caches all are cleared when app is relaunched
is it the default behavior to be expected or there is some property missing causing the session data to be removed from storage.
We're embedding the Power BI reports into our portal by using JS library. While testing them, we found that mobile layout of the reports don't work as we expect on iOS devices (tested in Chrome and Safari). There are two principals issues: 1) the site is automatically refreshed when the users filter the data (we reduced them to lower expression) and 2) the site also crashes after a while using the dashboard by applying different filters.
When I access my website through Safari, I see Deceptive Warning. My website has only html with no styles, just text and my contacts leading to github-like services. I also have an SSL certificate.
At the same time, going through online ios emulators, there is no warning, I checked through different versions of ios.
I sent many requests to websitereview, but personally I get such a warning.
Topic:
Safari & Web
SubTopic:
General
I’m experiencing an issue where Safari takes approximately 30 seconds to load web pages on mTLS-enabled sites. However, when I enable Private Browsing mode, the problem disappears. This suggests that the issue is not related to the network environment.
To provide more context, I’ve attached a Wireshark packet capture for reference. From the logs, it seems that the TLS handshake process encounters delays, but I cannot identify the exact cause.
Has anyone encountered a similar issue or can provide insights into what might be causing this behavior? Any troubleshooting suggestions or fixes would be greatly appreciated.
OS: iPadOS 18.2.1
Thank you!
Wireshark packet capture
Topic:
Safari & Web
SubTopic:
General
Hello,
we built an ios app using the capacitor framework (app rendered in webview) and recently implemented a cookie based authentication mechanism.
What we have no reliable information about is for how long these first-party cookies are stored and if/when they are cleared by some Apple policy. There is a lot of conflicting information out there and I want to reach out here to get some definitive information about this topic.
For how long are first-party cookies persisted using ios webview via capacitor. Is there any way to influence that behaviour?
Thank you very much.
Best Regards
Marcus
We are currently implementing the payment flow, and for handling payment details — including card entry and validation — we are utilizing a WKWebView. The webview securely loads the payment provider’s page, ensuring sensitive information such as card numbers are entered and validated directly within the web context.
I’d like to clarify that this change has not yet been released to Production. As part of a feature enhancement to our existing payment flow, we are transitioning to a new payment vendor, SnapPay.
While trying to load the SnapPay URL embedded within an iFrame in our iOS app, I observed the following error in the Xcode console. While this error may be generic, I wanted to highlight it:
825a18 - [pageProxyID=7, webPageID=8, PID=67346] WebPageProxy::didFailLoadForFrame: frameID=24, isMainFrame=0, domain=NSURLErrorDomain, code=-999
Upon investigating, we compared the headers from our existing payment URL and SnapPay's URL, and found that SnapPay includes the following Content-Security-Policy (CSP) header:
Content-Security-Policy: frame-ancestors ...
"Content-Security-Policy" value="default-src 'self'; script-src 'self' https://hcaptcha.com https://.hcaptcha.com https://code.jquery.com https://www.gstatic.com https://code.jquery.com/jquery-3.3.1.min.js https://test.lightbox.cardx.com/v1/lightbox.min.js https://www.ssa.gov/accessibility/andi/ https://c.evidon.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' https://hcaptcha.com https://.hcaptcha.com https://fonts.googleapis.com/css https://stage.snappayglobal.com/Resource/ https://www.ssa.gov/accessibility/andi/andi.css 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' *.googleapis.com *.gstatic.com ; connect-src 'self' https://demo1.cditechnology.com https:; form-action https://hcaptcha.com https: 'self' *.ipg-online.com secure.bluepay.com https://test.api.lightbox.cardx.com https://3ds-acs.test.modirum.com/ https://demo1.cditechnology.com/; frame-ancestors https://snappaydirect-perf.fiserv.com 'self' file: https: http; frame-src .snappayglobal.com 'self' https://hcaptcha.com https://.hcaptcha.com https: https://www.google.com .ipg-online.com secure.bluepay.com https://.cardconnect.com https://test.api.lightbox.cardx.com/ https://test.lightbox.cardx.com https://paywithcardx.com/payment/auth.cgi securepayments.cardpointe.com *.cardpointe.com https://3ds-acs.test.modirum.com/ https://www.yokohamatire.com http://uat1-txt.ad.portal.texas.gov https://uat1-txt.ad.portal.texas.gov "
After multiple working sessions with the SnapPay team, we were able to confirm that when they disable CSP or remove the frame-ancestors directive, the iFrame loads successfully within our app. However, SnapPay cannot change on their CSP.
To enable the iFrame to load in the iOS app, we added the following line of code:
webView.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs").
This resolved the issue with loading the iFrame. Note: the file being loaded is a local .html file,.
Before submitting this update to the App Store, I’d like to confirm whether this usage of allowFileAccessFromFileURLs is acceptable for App Store review.
I wanted to confirm that with this change is there a security concern for WKWebview?
Hello there I have a nested USDZ file I had created a long time ago with some make-up products.
Its behaviour was always the same in the past: nested usdz files allow you to control each object "nested" separately. So I used this as a way to allow people to play around with a "set of objects".
Today I went to try it and since I'm on ios 18 it shows an "assets tab" on the bottom that allows me to see all the assets inside the tab but doesn't allow me to see or anchor them at all!
What changes do I need to do in order for this to work and where can I check documentation on these new behaviours for USDZ files? And what will this allow for in the future?
Thank you in advance
It seems fetch() does not include credentials (cookie) even when credentials: include is used and Safari extension has host_permissions for that domain when using from a non-default Safari profile.
It includes credentials (cookie) when using from the default profile (which has the default name Personal).
Is there anyone who has this problem?
I try to request in popup.js like this:
const response = await fetch(
url,
{
method: 'GET',
mode: 'cors',
credentials: 'include',
referrerPolicy: 'no-referrer',
}
);
and it does not include the credentials (cookie) from host_permissions.
I already posted https://developer.apple.com/forums/thread/764279, and opened feedback assistant (FB15307169).
But it is still not fixed yet. (macOS 15.4 beta 3)
I hope this is fixed soon.
Hi,
I need a version of a web app to be accessible on a local network (LAN), when the users connect to a wifi without internet access.
I provide a valid TLS certificate to validate the website. There is also a local DNS (dnsmasq), with the following entries to return NXDOMAIN, as specified by the documentation.
server=/mask.icloud.com/
server=/mask-h2.icloud.com/
However, without internet (no cellular data), there is an error in Safari instead of the website. When there is some internet connection, there is a warning that allows to continue to the website by showing the IP address, which is not clear for the user.
iPhone users are very frustrated. Is there a solution?
I'm experiencing issues with audio playback in my React video player component specifically on iOS mobile devices (iPhone/iPad). Even after implementing several recommended solutions, including Apple's own guidelines, the audio still isn't working properly on iOS Safari. It works completely fine on Android. On iOS, I ensured the video doesn't autoplay (it requires user interaction). Here are all the details:
Environment
iOS Safari (latest version)
React 18
TypeScript
Video files: MP4 with AAC audio codec
Current Implementation
const VideoPlayer: React.FC<VideoPlayerProps> = ({
src,
autoplay = true,
}) => {
const videoRef = useRef<HTMLVideoElement>(null);
const isIOSDevice = isIOS(); // Custom iOS detection
const [touchStartY, setTouchStartY] = useState<number | null>(null);
const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
// Handle touch start event for gesture detection
const handleTouchStart = (e: React.TouchEvent) => {
setTouchStartY(e.touches[0].clientY);
setTouchStartTime(Date.now());
};
// Handle touch end event with gesture validation
const handleTouchEnd = (e: React.TouchEvent) => {
if (touchStartY === null || touchStartTime === null) return;
const touchEndY = e.changedTouches[0].clientY;
const touchEndTime = Date.now();
// Validate if it's a legitimate tap (not a scroll)
const verticalDistance = Math.abs(touchEndY - touchStartY);
const touchDuration = touchEndTime - touchStartTime;
// Only trigger for quick taps (< 200ms) with minimal vertical movement
if (touchDuration < 200 && verticalDistance < 10) {
handleVideoInteraction(e);
}
setTouchStartY(null);
setTouchStartTime(null);
};
// Simplified video interaction handler following Apple's guidelines
const handleVideoInteraction = (e: React.MouseEvent | React.TouchEvent) => {
console.log('Video interaction detected:', {
type: e.type,
timestamp: new Date().toISOString()
});
// Ensure keyboard is dismissed (iOS requirement)
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
e.stopPropagation();
const video = videoRef.current;
if (!video || !video.paused) return;
// Attempt playback in response to user gesture
video.play().catch(err => console.error('Error playing video:', err));
};
// Effect to handle video source and initial state
useEffect(() => {
console.log('VideoPlayer props:', { src, loadingState });
setError(null);
setLoadingState('initial');
setShowPlayButton(false); // Never show custom play button on iOS
if (videoRef.current) {
// Set crossOrigin attribute for CORS
videoRef.current.crossOrigin = "anonymous";
if (autoplay && !hasPlayed && !isIOSDevice) {
// Only autoplay on non-iOS devices
dismissKeyboard();
setHasPlayed(true);
}
}
}, [src, autoplay, hasPlayed, isIOSDevice]);
return (
<Paper
shadow="sm"
radius="md"
withBorder
onClick={handleVideoInteraction}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
>
<video
ref={videoRef}
autoPlay={!isIOSDevice && autoplay}
playsInline
controls
crossOrigin="anonymous"
preload="auto"
onLoadedData={handleLoadedData}
onLoadedMetadata={handleMetadataLoaded}
onEnded={handleVideoEnd}
onError={handleError}
onPlay={dismissKeyboard}
onClick={handleVideoInteraction}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
{...(!isFirefoxBrowser && {
"x-webkit-airplay": "allow",
"x-webkit-playsinline": true,
"webkit-playsinline": true
})}
>
<source src={videoSrc} type="video/mp4" />
</video>
</Paper>
);
};
Apple's Guidelines Implementation
Removed custom play controls on iOS
Using native video controls for user interaction
Ensuring audio playback is triggered by user gesture
Following Apple's audio session guidelines
Properly handling the canplaythrough event
Current Behavior
Video plays but without sound on iOS mobile
Mute/unmute button in native video controls doesn't work
Audio works fine on desktop browsers and Android devices
Videos are confirmed to have AAC audio codec
No console errors related to audio playback
User interaction doesn't trigger audio as expected
Questions
Are there any additional iOS-specific requirements I'm missing?
Could this be related to iOS audio session handling?
Are there known issues with React's handling of video elements on iOS?
Should I be implementing additional audio context initialization?
Any insights or suggestions would be greatly appreciated!
I have a homepage with an iframe containing my app LocalStorage,
but when opening my app page the LocalStorage is lost.
structuration of the page:
homepage : domain.com
iframe and app : app.domain.com
the localstorage is set up directly within the iframe and postmessage between iframe and parent works.
We see in the parent page that the LocalStorage for the sub-domain is set but opening the sub-domain on a new window it disappears :
The problem is detected On Safari 18 only.
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?
I'm trying to set up a smart app banner for my app, but it doesn't appear on the website when I try to test it.
I have the meta tag on my website:
<meta name="apple-itunes-app" content="app-id=6740216045" />
When I inspect the website, I can see that the meta tag is showing up in the head, but the banner is nowhere to be found. I tried clearing website data but still no dice.
When I open com. apple. developer. web browser, I am unable to inject JavaScript into the webview through methods such as addUserScript. The console will prompt 'ignoring user script injection for non app bound domain'