Hi,
I noticed that event 'error' from EventSource is not fired in latest iOS 18, when web application is minimized and then re-activated. This was working in previous versions, so it is probably regression bug.
Behavior in iOS 17:
PWA application has active SSE/EventSource connection with server. Then some other application becomes active for more then ≈20 sec, so that SSE connection is closed. After SSE connection is closed, application is opened again. When application becomes visible, 'error' event is fired. This is expected behavior and this way also works on other non-iOS systems.
Behavior in iOS 18:
Following same steps as before it looks like that error event is not fired. Also,readyState of EventSource is 1 (EventSource.OPEN ), even if SSE connection is closed.
If connection is interrupted when application is in foreground, then error event is fired on both iOS versions.
This is quite problematic, because previously you could rely on 'error' event to trigger reconnection, when application becomes visible, but now this is not possible. Also EventSource readyState is 1, even if there is no connection to the server, so it is in wrong state.
Any thoughts?
Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Post
Replies
Boosts
Views
Activity
I have noticed that storage.local.get API works differently in Safari 18 compare to other browsers and Safari 17.
browser.storage.local.set({abc: 123})
browser.storage.local.get(console.log) // {abc: 123}
browser.storage.local.get({abc: null}, console.log) // expect {abc: 123} but got undefined instead.
According to MDN, storage.local.get should work with an object with object names as keys and the default value as value.
According to Safari 18 Release notes, this may be related to a fix: 'Fixed getting an empty key from storage. (99440265) (FB11427769)'.
We are using declarativeNetRequest.getMatchedRules() to get the matched rules' URLs. When user switches website in the same tab, it returns URLs which were blocked in the previous website also, within past 5 minutes.
Is it possible to fetch getMatchedRules() only for current webpage in the same tab?
I need to play a Video with transparent background on our website.
It works perfectly on Windows, Mac & Android (in all browsers).
On iPhone however, no matter what Browser, The transparent parts of the video act almost like an "overlay", making everything behind it a lot brighter. This effect gets worse, the higher I set the iPhone screen brightness. This is of course not the behavior I'm looking for.
The Video Element has two listed sources. One .WEBM (VP8 with alpha channel) and one .MP4 (HEVC with alpha channel). I am sure, that something is wrong with the MP4 file, but I don't understand why it works in Safari on Mac, but doesn't on iPhone. Shouldn't they both play the same File?
Here is my workflow:
masking the subject in DaVinci Resolve
exporting as QuickTime - Apple ProRes 444 - "Export Alpha"
using Shutter Encoder (v15.7) to convert the file to H.265 (.mp4)
under "Advanced Features": Hardware acceleration to "OSX VideoToolbox" & check "Enable alpha channel"
also converting the first file to VP8 (.webm) with "Enable alpha channel"
then adding the Videos to the website like this:
<video height="450px" autoplay loop muted playsinline disablepictureinpicture>
<source
src="(url of the mp4)"
type='video/mp4; codecs="hvc1"'>
<source
src="(url of the webm)"
type="video/webm">
</video>
Here is how it looks on Safari (Mac)
This is what it looks like in any browser on iPhone
I have re-exported, re-converted and re-implemented it multiple times and I just can't get it to work on iPhone. Does anyone have an idea, what the cause could be, or what I can do differently?
I have a working Apple Pay transaction page that works on Safari. But with the new ios 18 update and Apple Pay JS library. I see that a pop up sheet with the scannable code is shown on chrome browser. I tried that.
Upon scanning the code with iPhone 15 pro max. The apple pay payment sheet is shown on the phone but with an error Service Unavailable. What do I have to do to make it work? What went wrong? I checked the logs and have no clue of what is failing.
Hi, I am developing the Click & Read web add-on for Chromium, Firefox and Safari.
We use xcrun safari-web-extension-converter tool to generate the Safari add-on. The build on Xcode had no meaning errors/warnings, until we had to switch to a more up-to-date MacBook (required as deprecated Mac had no support for latest macOS and thus for Xcode compatibility !).
So now I build my add-on on an Apple M1 MB Air on Sequoia 15.0 with latest Xcode, but I encounter an error ? or warning ? :
NSBundle file:///System/Library/PrivateFrameworks/MetalTools.framework/ principal class is nil because all fallbacks have failed
Unable to create bundle at URL ((null)): normalized URL null
Unable to create bundle at URL ((null)): normalized URL null
Unable to create bundle at URL ((null)): normalized URL null
But it doesn't prevent the add-on build to complete as I am able to open it onto Safari. Then, when loading the add-on on a test web page, I get this error on safari console:
Error: Invalid call to runtime.connect(). No runtime.onConnect listeners found.
BTW, the same add-on Dist works as expected on Chrome or Firefox (on macOS).
So it seems the runtime listener runtime.onConnect.addListener isn't initiated on Background script...
Thanks for your feedback and help
Dependent fields for multi-select options and dropdown fields are not displaying in Safari, although they work correctly in Chrome and Firefox.
Scenario
You have a form built with ASP.NET and Razor, where users need to select multiple options from a dropdown list to trigger the display of dependent fields.
Multi-Select Dropdown: The form has a multi-select dropdown for choosing different categories (Category A, Category B, etc.).
Dependent Fields: Based on the user's selection, certain dependent fields should become visible. For example, if the user selects Category A, an additional input field titled "Details for Category A" should be shown.
Expected Behavior (Chrome & Firefox)
When the user selects Category A or Category B, the corresponding input fields are displayed dynamically, functioning as expected.
Issue in Safari :
In Safari, the dependent fields do not show up when a user selects any category. It's as if the JavaScript or the CSS responsible for displaying these fields is not executing correctly.
CHROME
SAFARI
Browser: Safari (Version 18.0 (20619.1.26.31.6))
Operating System: MacOS (sequoia 15.0)
Device: MacBook Pro 14 Inch Apple M3 Pro , iPhone 14 iOS 18.0
Hai guys,
I'm trying to do autofocus on the search input while user clicks the search icon but its not working as expected in iPhone and iPad so go through some blogs and stackoverflow they mentioned the apple has removed the focus() from touchable device for usablity reason is anyone come up with the same issue or having solution for this kindly share. That must be helpful for me.
PLATFORM AND VERSION
iOS
Development environment: Other: Xamarin iOS App
Run-time configuration: iOS 14.4.2 and above
DESCRIPTION OF PROBLEM
We are using WKWebView control in our application. It loads a page, wherein there is a code which gets triggered to execute a Synchronous Ajax/XmlHttpRequest. This request needs about 1 min time to complete, but it gets aborted after 10 secs.
Observed in iPhone 6S 14.4.2. Also seen the same behavior in the latest version of iPhone and iPad OS.
Need help on the below points:
How can I extend this timeout?
Making it an Asynchronous call would have regression. Hence the ask for any other alternative to extend this timeout.
STEPS TO REPRODUCE
In the WKWebView have a webpage, which gives a Synchronous ajax/XmlHttpRequest call to a Web API, which takes more than 10 seconds to complete. The Ajax call sample code is as below, which uses jquery:
var startTime = performance.now();
$.ajax({
async: false, // Synchronous ajax call
type: "POST",
url: "http://testsite:8000/api/RunTestTimer",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
timeInSeconds: 15
}), // timeInSeconds is the parameter name in the Web API, which I used to run a timer on the server-side for the value passed to the ajax call
dataType: "json",
beforeSend: skelta.forms.utilities.addRequestHeaders
})
.done(function (result) {
var endTime = performance.now();
var message = "Request Successful (Time Taken to execute: " + ((endTime - startTime) / 1000).toFixed(3) + " secs; Type: " + "POST" + "; Async: " + "FALSE" + "; Timer: " + "15" + " seconds):" + JSON.stringify(result);
console.log(message);
})
.fail(function (result) {
var endTime = performance.now();
var message = "Request Failed (Time Taken to execute: " + ((endTime - startTime) / 1000).toFixed(3) + " secs; Type: " + "POST" + "; Async: " + "FALSE" + "; Timer: " + "15" + " seconds):" + JSON.stringify(result);
console.log(message);
});
i have a site that host my videos using vdocipher. My videos are not showing up on apple devices. vidocipher instructed me to create an apple account and to Request Apple FairPlay DRM Production License.
Do i have to pay to be able to do that?
Hello,
I've encountered a problem in Safari where if I have an application hosted locally, it causes the files of dependencies such as CSS, JS, SVG. etc. to not load. Interestingly, every time the same page refreshes, different files are not loaded and it is very random which files are not loaded at which time. The error I see in the console is "Failed to load resource: unable to parse response" and for websockets I get: "WebSocket connection to 'ws://127.0.0.1:8000/socket.io/?EIO=4&transport=websocket&sid=MuZEbWIVEKZ2OJZAAABi' failed: WebSocket is closed before the connection is established.". Interestingly, the problem only appears when the application is hosted locally, when it is hosted in the cloud, the problem does not appear. Similarly, the problem only appears in Safari. I'm using macOS 15.0 (24A335) and Safari version 18.0 (20619.1.26.31.6). Have you encountered such a problem and do you have any idea how to solve this problem?
Thank you for your reply.
iOS 18 WKWebView images are not loading, no errors in older versions.
The example while loading HTML is as follows. A problem occurs when you pull an image from a url. To get a URL image you need a cookie or something. I add them too, but it doesn't work on iOS 18. I get the error "An error occurred trying to load the resource." and a blue question mark on the screen.
webView.configuration.websiteDataStore.httpCookieStore.setCookie(cookie)
<html>
<head>
<style>
body {
font-family: -apple-system;
margin: 0;
padding: 0;
text-align: center;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Resim Görüntüleme</h1>
<img src="https://xx.***.xx/example.png">
</body>
</html>
"""
I have an issue with web ads not working in Safari versions earlier than 16.4.
While debugging Safari Web Ads I found out that I don't get postbacks from versions 16.4 or below from Safari, although there are no technical limitations and the documentation says that web ads should work starting from versions 16.1 https://developer.apple.com/documentation/storekit/skadnetwork/skadnetwork_release_notes/skadnetwork_4_release_notes
For ads that appear in an app, the app is built with iOS 16.1 SDK or later. For web ads, the ad appears in Safari 16.1 or later.``
Maybe I missed something and Apple didn't update the documentation, is that normal?
Maybe it's related to this release and there was a technical problem with Apple? https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-16_4-release-notes/#SKAdNetwork
Has anyone encountered the same problem and how did you fix it?
Thanks!
Hi, I am building a Next.js app on top of Mapkit JS but I keep getting this error randomly. The map works most of the time but this error triggers randomly sometimes when the map loads even though I have not used the fillOpacity parameter at all. Even defining the parameter still causes the error.
mapkit.js:2 Uncaught TypeError: [MapKit] Expected a number value for Style.fillOpacity, but got NaN instead.
at Object.checkType (mapkit.js:2:205350)
at set fillOpacity (mapkit.js:2:670243)
at set fillOpacity (mapkit.js:2:673537)
at _.performScheduledUpdate (mapkit.js:2:643649)
at mapkit.js:2:221322
at m (mapkit.js:2:221358)
Code:
import React, { useEffect, useRef } from "react"
import { useTheme } from "next-themes"
declare global {
interface Window {
mapkit: any
}
}
interface MapKitProps {
latitude: number
longitude: number
zoom: number
}
const MapKit: React.FC = ({ latitude, longitude, zoom }) => {
const mapRef = useRef(null)
const mapInstanceRef = useRef(null)
const { setTheme, theme } = useTheme()
useEffect(() => {
if (window.mapkit && mapRef.current) {
window.mapkit.init({
authorizationCallback: (done: (token: string) => void) => {
const token = process.env.NEXT_PUBLIC_APPLE_MAPKIT_TOKEN
if (token) {
done(token)
} else {
console.error("MapKit JS token is not set")
}
},
})
// Clean up the previous map instance if it exists
if (mapInstanceRef.current) {
mapInstanceRef.current.destroy()
}
// Create a new map instance
mapInstanceRef.current = new window.mapkit.Map(mapRef.current, {
center: new window.mapkit.Coordinate(latitude, longitude),
zoom: zoom,
colorScheme: theme,
_allowWheelToZoom: true,
})
}
// Cleanup function to destroy the map instance when the component unmounts
return () => {
if (mapInstanceRef.current) {
mapInstanceRef.current.destroy()
}
}
}, [latitude, longitude, zoom])
return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />
}
export default MapKit
Since iOS 18.1 launched as a beta, we've been getting reports from end users on iPhone 15 Pro and iPhone 15 Pro Max specifically. They're reporting that our WebView is unable to load our local HTML content. I'm curious if anyone else has had their app or users run into this issue?
So far I've tried installing the most recent XCode Beta 16B5014f and installed an 18.1 emulator, but our app worked fine. It's also working fine on all my real devices, but we don't have a 15 Pro to test on. I'm curious if this is related to the processor on these devices and how they are intended to support Apple's new AI coming in 18.1.
My website is using a lot of memory. JavaScript Allocations Timeline shows that js occupies 130MB. However, instruments show that the overall memory usage of webview reaches 480MB. I would like to know if there is any tool to analyze the distribution of this 480MB of memory usage.
i change everything about icon file in my web server but the icon just don't change at all.
why? is it about cache problem on the hugo or it is bug on safari?(i have remove cache on the iphone)
My Safari extension has a WKWebView in the main app and an HTML popup window in Safari. For some reason, both are in dark mode on visionOS, even though the device environment is light and Safari tabs are also showing light mode. Why does this happen, and how can I change it?
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
I have a small example project that ran on both the simulator and a connected iPhone but now it and all other projects are failing with the same error. I am using Xcode 16.0 on MacOS Sonoma 14.6.1., iPhone 11 with iOS 18. Thank you in advance.
The error is:
Failed to resolve host network app id to config: bundleID: com.apple.WebKit.Networking instance ID: Optional([_EXExtensionInstanceIdentifier: 1163B5D2-09D3-4704-9564-61099502138B])
WebContent process (0x114018680) took 1.375772 seconds to launch
GPU process (0x1140a0630) took 1.228457 seconds to launch
Networking process (0x114034d00) took 1.426249 seconds to launch
0x105820a20 - [pageProxyID=7, webPageID=8, PID=34786] WebPageProxy::didFailProvisionalLoadForFrame: frameID=1, isMainFrame=1, domain=NSURLErrorDomain, code=-1200, isMainFrame=1, willInternallyHandleFailure=0
Message from debugger: killed
Below is the code from one of the examples:
import UIKit
import WebKit
class ViewController: UIViewController {
let webView: WKWebView = {
let prefs = WKWebpagePreferences()
prefs.allowsContentJavaScript = true
let configuration = WKWebViewConfiguration()
configuration.defaultWebpagePreferences = prefs
let webView = WKWebView(frame: .zero, configuration: configuration)
return webView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(webView)
guard let url = URL(string: "https://google.com") else {
return
}
webView.load(URLRequest(url: url))
//evaluate JavaScript
DispatchQueue.main.asyncAfter(deadline: .now()+5){
self.webView.evaluateJavaScript("document.body.innerHTML") { result, error in
guard let html = result as? String, error == nil else {
return
}
print(html)
}
}
}
override func viewDidLayoutSubviews(){
super.viewDidLayoutSubviews()
webView.frame = view.bounds
}
}