Enable web views and services in your apps.

All subtopics

Post

Replies

Boosts

Views

Activity

PNG export from an SVG string via painting on the canvas only works after several attempts in Safari browser.
I have a mind mapping app that has been running well on Android for a few years now. I have been trying to publish it for iOS and MacOS for some time now. On iOS (as an app) and MacOS (in the browser for testing) I have a problem with the export. The app is a project in Angular, Cordova, Typescript. The problem only occurs in the Safari browser, which is also used in the Cordova version for iOS. I was able to test it on my Mac and an iPhone. The error does not occur on the Mac in Chrome. The Problem If I export a mind map that contains images as an image (.png), the images of the nodes are not displayed in the exports. Everything else in the map is exported correctly, only the images are missing. Only when I export the map three times are the images present in the export. If I add a new image and export it again, the image is only visible in the exported image after 3 exports. It is interesting that the export as SVG, which I also offer, contains the images of the nodes. So the SVG string that I create has all the necessary information. The base The mind map consists of various things. HTML and CSS for the frames, lines etc... The images of the nodes are saved as Base64 and each node is in a Foreign Object. Example of the SVG export Mindmap with 2 nodes and the Base64 characters of the node images have been replaced with ***. __ SVG-String.txt Attached because otherwise too long. This is how I export the .png file. I can view all this content in the map view of the app. When exporting to an image, I take this information, turn it into an SVG, have the browser draw it on the canvas and then output it as a graphic. Something must be going wrong at this point. private exportAsImage( mindMap: MindMap, scale?: number, type: string = "png" ): Observable<any> { return new Observable(o => { this.progress.start(this.progress.PROGRESS_MAJOR); this.mmpMap.export(this.mapVizService.getExportClassList(mindMap), (svgStr: string) => { this.exportService.imageFromSVGString(svgStr, type, scale).pipe( switchMap(img => of( Utils.dataURItoFileObject( img.dataUri, `${Utils.sanitizeFilename(mindMap.title)}.${type}` ) ) ), switchMap((fileObject: FileObject) => this.mapsService.saveAsTemp(fileObject, true, { message: this.translate.instant("mdz.mindmap.saveas.message"), // subject: this.translate.instant("mdz.mindmap.saveas.subject"), subject: fileObject.name, url: `www.myURL.com` }, true) ) ).subscribe(() => { this.progress.stop(this.progress.PROGRESS_MAJOR); o.next(); o.complete(); }, err => { this.progress.stop(this.progress.PROGRESS_MAJOR); o.error(err); o.complete(); }); }) }); } What I have already tried. I have already tested various things such as time delays etc..., none of which change anything. It seems to me that it's a combination of the caching and the order or speed at which the images are loaded. Only the speed can't be, because built-in delays don't change anything. My guess But it must have something to do with Safari because on the Mac in Chrome it runs without problems... Maybe it can't handle so many base64 images or it exports faster than it renders? Whereby the SVG export contains all the information and when I open the SVG, all the content is also displayed in the browser in seconds. So something must happen when painting on the canvas and outputting as an image. It doesn't really make sense, I'm really at the end of my ideas. What can you do? I really hope you can help me. A mind mapping app without image export makes little sense. And since the app otherwise works great, I'm really getting desperate. :( Thanks a lot! Rob
1
0
460
May ’24
Privacy Manifest Non Tracking Within Webview
We are requesting some information on what should be done in the following case: We have an application that has a privacy manifest, where tracking domains are listed. When the user does not give his/her consent to be tracked, non tracking domains are being used for requests to bring ads. The application in question has a webview where content (ads) are loaded. When a user clicks on an ad, another webview is opened, and this webview does not know that it is in a non tracking flow. Therefore, tracking domains are being used instead of non tracking domains. Since multiple redirections might be in play, there is no way to pass data from the original webview to the one that is opened once the ad is clicked. Would the tracking domains being used in the second webview be blocked? If so, what can we do to circumvent this scenario? Is this even a use case considering privacy manifest? Thanks
0
0
478
May ’24
Safari Web Extension background script becomes unresponsive after 30 seconds
I'm experiencing a Safari Web Extension issue where the non-persistant background script seems to crash after 30 seconds even when the content script is messaging it. Here is a minimal-reproducible example. When running in an emulator, the background script will stay responsive forever. However, when running on a physical device, the background script becomes non-responsive after 30 seconds of activity. It never becomes responsive again until I toggle the extensions enable/disable toggle, after which it stays active for 30 seconds and then crashes again.
6
6
1.4k
Jun ’24
iOS 17.5.1 safari extension - background scripts not working properly
We had developed an iOS Safari web extension (which uses non-persistent background scripts) that functioned properly until iOS 17.3. However, I've encountered inconsistent behavior on iOS 17.4.1, 17.5, and 17.5.1. Upon further debugging, I noticed that the background scripts often become idle and are unloaded frequently. They are not loaded again even for the registered webNavigation events and only trigger when interacting with the extension popup menu. This is also mentioned here. I had tried this in both manifest versions 2 & 3. I had tried using service_worker for background scripts. But, none of it seems to resolve this issue. Could you please clarify if this is a bug or an intended behavior? Our extension relies on webNavigation events without users having to interact with the popup menu often.
5
7
965
Jun ’24
Content blocker using Safari web extensions.
We are trying to implement ad blockers using the Safari web extension, and we are implementing this using the declarativeNetRequest, with a manifest version 2. We have added a json file which contains a rule set for over 22000 URLs, does content blocker have a limit to the number of rules we set in json? Although it does work fine, sometimes we see the behaviour different on simulators and on clearing the cache it works fine is this expected?
4
0
813
Jun ’24
Safari Content Blocker extension
I have integrated the Safari Content Blocking extension, and it works perfectly on the first run, effectively blocking content on Safari. However, after re-installing the app, I occasionally encounter the following error, despite the content blocker functioning as expected: "Failed to reload content blocker Error Domain=SFErrorDomain Code=3 "(null)"" What could be causing this intermittent error?
0
0
524
Jun ’24
Safari iOS extension issues. Background script stops working
Hello there! At our company we have started to deal with an issue in the latest iOS (17.5) version. It looks like the background script of the extension becomes unresponsive after a short amount of time (around 30 seconds) after performing more than one request to it within a range of 1 - 4 seconds. How it can be tested? Pretty simple example: // content.js const t = 4000 // Using less than 4000ms makes background script unresponsive async function requestNext() { return browser.runtime.sendMessage({ greeting: "getNext" }) } setInterval(async () => { const n = await requestNext() console.log("current is: " + n) }, 4000) // background.js let counter = 0 browser.runtime.onMessage.addListener((request, sender, sendResponse) => { console.log("Received request: ", request); if (request.greeting === "getNext") { counter++ sendResponse(counter); return true } }); Whenever the browser.runtime.sendMessage is executed too fast the background script will stop working. As far as we have been able to check this only can be reproduced after 17.4.1
7
3
961
Jun ’24
Web Extensions's background page is missing in the Develop -> Web Extension Background Content menu in the latest Safari Technology Preview
Hello! I was wondering if any other developers are experiencing issues with accessing the web extension background script console, sources, etc. on the latest Safari Technology preview or macOS Sequoia betas. We have an extension which has a persistent background script. In the latest public release of Safari version 17.5 (19618.2.12.11.6) on macOS Sonoma, everything works as expected. When I enable developer mode in Safari, it shows an additional "Develop" menu and when I select "Web Extension Background Content" in the dropdown, it shows a list of background pages for all installed extensions. Attaching a screenshot for reference. However, if I install the latest Safari Technology Preview 197 on macOS Sonoma or just test with the Safari version that comes with MacOS Sequoia beta 1 or beta 2, the "Web Extension Background Content" dropdown menu does not list any background pages. Attaching a screenshot for reference. We started discussing the issue with Apple during the latest WWDC. If anyone at Apple sees this post, I opened FB13834388 to track this issue. However according to Apple, they cannot reproduce the issue exactly as I see it on all macOS machines around me including clean virtual machines, real hardware (MacBook Pro M1 Max, MacBook Air M2, MacBook Pro Intel based). The "Web Extension Background Content" menu looks as expected on their end which is very confusing to me... I have a reason to believe that new Safari's developer tools are simply broken in the latest release. I base that statement on the fact that I cannot access it in case of our own Safari extension, Apple's sample "Sea Creator" extension and a few random extensions that I got from the App Store. I was wondering if anyone else can observe the same behavior or all machines around me are haunted :) Please share if you have similar issues with Safari Technology Preview 197 or Safari on the latest macOS Sequoia beta. Any feedback is important to us. If it's a widespread issue, then Apple should prioritize is accordingly. If the issue is somehow specific to our testing, we will fix it on our side. But any test results at this point are bringing more clarity to the situation and are highly appreciated.
5
0
725
Jul ’24
I am unable to debug a Safari extension in Xcode 16 beta 1 on iOS 18 beta
The process to reproduce: Create a new extension with Xcode 16 beta. Run it on the simulator or any iOS device with iOS 18 beta installed. Open Safari on your Mac, then open Develop -> Device you use. Unable to access these menus for iOS 18: 1. Extension - Extension Background Content 2. Extension - Extension Pop-up Page - popup.html However, for iOS 17.4, I can see these options in Develop -> Device iOS(17.4). I have another extension on the App Store that is not working on the iOS 18 beta, but I am unable to debug it because of this issue.
1
0
629
Jul ’24
Issue with HTTPS Proxy Configuration in WebKit WebView
Hello, I am trying to apply ProxyConfiguration on the WebKit webview. I referred to the following sources: https://forums.developer.apple.com/forums/thread/110312 and https://developer.apple.com/videos/play/wwdc2023/10002/ import WebKit class WebKitViewModel: ObservableObject { let webView: WKWebView @Published var urlString: String = "https://example.com" init() { webView = WKWebView(frame: .zero) } func loadUrl() { guard let url = URL(string: urlString) else { return } var request = URLRequest(url: url) let endpoint = NWEndpoint.hostPort(host: "127.0.0.1", port: 9077) let proxyConfig = ProxyConfiguration.init(httpCONNECTProxy: endpoint) let websiteDataStore = WKWebsiteDataStore.default() websiteDataStore.proxyConfigurations = [proxyConfig] webView.configuration.websiteDataStore = websiteDataStore webView.load(request) } } However, this configuration only works for HTTP proxies. When I try to use an HTTPS proxy, it does not work. When I use NWConnection to connect to the proxy, it works successfully: import Foundation import Network public class HTTPProxy { private let proxyHost: NWEndpoint.Host private let proxyPort: NWEndpoint.Port private var connection: NWConnection? public init(proxyHost: String, proxyPort: UInt16) { self.proxyHost = NWEndpoint.Host(proxyHost) self.proxyPort = NWEndpoint.Port(rawValue: proxyPort)! } public func sendHTTPRequest(completion: @escaping (Result<String, Error>) -> Void) { let tlsOptions = NWProtocolTLS.Options() let parameters = NWParameters(tls: tlsOptions) connection = NWConnection(host: proxyHost, port: proxyPort, using: parameters) connection?.stateUpdateHandler = { [weak self] state in switch state { case .ready: self?.sendConnectRequest(completion: completion) case .failed(let error): completion(.failure(error)) default: break } } connection?.start(queue: .global()) } private func sendConnectRequest(completion: @escaping (Result<String, Error>) -> Void) { guard let connection = connection else { completion(.failure(NSError(domain: "Connection not available", code: -1, userInfo: nil))) return } let username = "xxxx" let password = "xxxx" let credentials = "\(username):\(password)" guard let credentialsData = credentials.data(using: .utf8) else { print("Error encoding credentials") fatalError() } let base64Credentials = credentialsData.base64EncodedString() let proxyAuthorization = "Basic \(base64Credentials)" let connectString = "CONNECT api.ipify.org:80 HTTP/1.1\r\n" + "Host: api.ipify.org:80\r\n" + "Proxy-Authorization: \(proxyAuthorization)\r\n" + "Connection: keep-alive\r\n" + "\r\n" if let connectData = connectString.data(using: .utf8) { connection.send(content: connectData, completion: .contentProcessed { error in if let error = error { completion(.failure(error)) } else { self.receiveConnectResponse(completion: completion) } }) } } private func receiveConnectResponse(completion: @escaping (Result<String, Error>) -> Void) { connection?.receive(minimumIncompleteLength: 1, maximumLength: 65536) { data, context, isComplete, error in if let data = data, let responseString = String(data: data, encoding: .utf8) { if responseString.contains("200 OK") { self.sendRequest(completion: completion) } else { completion(.failure(NSError(domain: "Failed to establish connection", code: -1, userInfo: nil))) } } else if let error = error { completion(.failure(error)) } } } private func sendRequest(completion: @escaping (Result<String, Error>) -> Void) { guard let connection = connection else { completion(.failure(NSError(domain: "Connection not available", code: -1, userInfo: nil))) return } let requestString = "GET /?format=json HTTP/1.1\r\n" + "Host: api.ipify.org\r\n" + // "Proxy-Authorization: Basic xxxxxxxx\r\n" + "Connection: keep-alive\r\n" + "\r\n" print("Sending HTTP request:\n\(requestString)") if let requestData = requestString.data(using: .utf8) { connection.send(content: requestData, completion: .contentProcessed { error in if let error = error { completion(.failure(error)) } else { self.receiveResponse(completion: completion) } }) } } private func receiveResponse(completion: @escaping (Result<String, Error>) -> Void) { connection?.receive(minimumIncompleteLength: 1, maximumLength: 65536) { data, context, isComplete, error in if let data = data, !data.isEmpty { print ("Data: \(data)") if let responseString = String(data: data, encoding: .utf8) { print("Received response:\n\(responseString)") completion(.success(responseString)) } else { completion(.failure(NSError(domain: "Invalid response data", code: -1, userInfo: nil))) } } else if let error = error { completion(.failure(error)) } if isComplete { self.connection?.cancel() self.connection = nil } else { self.receiveResponse(completion: completion) } } } } This approach works for connecting to the proxy, but it does not help with configuring the proxy for WebKit. Could someone please assist me in configuring a proxy for WebKit WebView to work with HTTPS proxies? Thank you!
6
0
653
Jul ’24
AR Quick Look IOS 18 Safari Error
When opening the 3D model in Augmented Reality on Safari, the model initially displays correctly. However, when attempting to move, resize, or rotate it, the device screen freezes along with the Augmented Reality view, and sometimes it crashes the application. This same model does not have any issues when opened in Chrome. Has anyone experienced something similar, and if so, do you know how to resolve it?
2
2
563
Jul ’24
Trying to mimic visionOS UI inside of WKWebView
I'm trying to mimic glossy, semi-transparent blurry backgrounds for my visionOS app inside of WKWebView It's easy to do for menus like on the screenshot below, using semitransparent background and applying backdrop-effect: blur(20px) The problem I have is when I make the whole window like this by specifying webView.isOpaque = false and applying to body background-color: transparent. In this case, suddenly, the backdrop-effect: blur stops working for menu. See picture below: You can clearly see that blur is not working anymore since you can see 3 dots behind the menu. I did not touch any CSS properties for the menu itself, only making the whole window semi-transparent. Is there any workaround for this problem? For me it's a blocker to make UI to feel native to visionOS.
0
0
357
Jul ’24
Low Version Safari Browser When Download Excel Issue
Hi everyone, when My project (Angular 5) running in Safari Browser, we have a download function, it's download the excel file, end with .xlsx, but when running in low version Safari version, it will have a popup, that is not my project did, it blocked be safari itself, you can check the image, my question is how to hide the 'View' button or directly download instead of show the popup?
0
0
347
Jul ’24
Spatial Video and/or Photo on Safari
I am a student at Utah Valley University doing a UX Research project involving spatial web browsing on Safari. I am trying to determine if spatial video and photos would be supported on a safari web page while using the AVP. I am not a developer, so my knowledge of that front is limited, but I am hoping to get any insight into if that feature would be able to be implemented into a web based experience. If so, what formats would need to be used? Is the MV-HEVC format able to be directly embedded? Or is there another format that needs to be explored? Any insight is appreciated!
3
1
465
Jul ’24