Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics

Post

Replies

Boosts

Views

Activity

faulty Transparent Video in iPhone browsers
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?
2
0
460
Oct ’24
Apple Pay ios 18 Scannable Code returns Service Unavailable
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.
2
3
519
Sep ’24
Error: Invalid call to runtime.connect(). No runtime.onConnect listeners found.
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
6
0
553
Sep ’24
Dependent Fields Not Opening in Safari
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
0
0
217
Sep ’24
WKWebView Synchronous Ajax/XmlHttpRequest timeout
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); });
1
0
348
Sep ’24
Safari blocks dependency files on localhost
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.
2
1
257
Sep ’24
iOS 18 HTML images are not loading in WKWebView
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> """
2
1
883
Sep ’24
Issue with SKAdNetwork 4.0 for Web Ads
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!
0
0
243
Sep ’24
[MapKit] Expected a number value for Style.fillOpacity, but got `NaN` instead.
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
2
0
270
Sep ’24
WebView Loading Issue iOS 18.1
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.
3
1
903
Sep ’24
First-Party-Cookies Retention Policy using Capacitor App
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
0
0
194
Sep ’24
Previously working projects fail
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 } }
2
1
1.2k
Sep ’24
Polylines do not stay on map
When I create a polyline and add it to the map, it will disappear if the map is moved. If I add a polygon or annotation, it remains on the map if the map is moved: const polyline = new mapkit.PolylineOverlay(path, { style: new mapkit.Style({ lineWidth: 5, strokeColor: '#007AFF', lineJoin: 'round', lineCap: 'round' }) }) map.addOverlay(polyline) // disappears if the map moves or zoom changes const polygon = new mapkit.PolygonOverlay(shapes, { style: new mapkit.Style({ fillRule: 'evenodd' }), enabled: false }) map.addOverlay(polygon) // remains on map when map moves or zoom changes Why is it inconsistent? How can I make the polyline stay until I explicitly remove it?
0
0
225
Sep ’24
Keep me sign in not works anymore after upgrade to IOS 18
I have a product developed base on the WKWebview. I use Azure as IDP configured for login in. Azure have “keep me sign in” to allow user no need to enter credential again after reopen the app. Every thing works fine in IOS 17. 16. But keep me sign in function not works anymore after upgrade device to IOS 18. User need to enter credential every time after reopen the app. Is there any thing change in WKWebview in IOS 18?
0
0
140
Sep ’24
Sandbox and WKWebView
When I run this program on iphone ( ios 18.0 with Xcode 16.0 (16A242d) ) I get these warnings from iphone ( not from the preview running ) : Could not create a sandbox extension for '/var/containers/Bundle/Application/7BAE-82-4A3-98D-75A49B/xxxx.app' Updated list with error: DownloadFailed Updated list with error: DownloadFailed Updated list with error: DownloadFailed Updated list with error: DownloadFailed Updated list with error: DownloadFailed The programe is simple : import SwiftUI import WebKit struct ContentView: View { let htmlContent = """ &lt;html&gt; &lt;head&gt; &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Hello, World!&lt;/h1&gt; &lt;p&gt;This is a simple webpage displayed in a WebView.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; """ var body: some View { WebView(htmlContent: htmlContent) .edgesIgnoringSafeArea(.all) } } struct WebView: UIViewRepresentable { let htmlContent: String func makeUIView(context: Context) -&gt; WKWebView { let webView = WKWebView() webView.loadHTMLString(htmlContent, baseURL: nil) return webView } func updateUIView(_ uiView: WKWebView, context: Context) { // No need to update the view since the content is static } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } any reason for this ? otherwise the program is running correctly, but is this a bug or a programming problem?
1
0
479
Sep ’24