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

[MapkitJS] Uncaught TypeError: [MapKit] Expected a number for `x` in MapRect constructor but got `NaN` instead.
Hi, I'm building a nextjs app based on of MapkitJS. I tried to pass a new value to cameraZoomRange like the code below. As long as I put in this part map.cameraZoomRange, the error shows up. Not sure it's my fault, or the bug of MapkitJS. const map = new window.mapkit.Map(element, { colorScheme: mqMatchLightTheme ? window.mapkit.Map.ColorSchemes.Light : window.mapkit.Map.ColorSchemes.Dark, showsCompass: window.mapkit.FeatureVisibility.Hidden, showsMapTypeControl: false, showsZoomControl: false, showsUserLocation: true, tracksUserLocation: true, isRotationEnabled: true, isZoomEnabled: true, }); map.cameraZoomRange = new window.mapkit.CameraZoomRange({ minCameraDistance: 14, maxCameraDistance: Infinity, });
0
0
212
Oct ’24
Gif crash in browser
Hi, when I search for a gif on my IPH 15 pro max, after a little scrolling in browser when I searching for some Gif images, the phone starts to overheat and the browser crashes (safari, chrome, duck, brave, all of them) completely. All I can do is just quit from the search engines. That bug happens very quickly, after about 15 seconds. Please check for bug. Best regards.
1
0
161
Oct ’24
Problems with update to Safari 18
Since update to Safari version 18 our browser extension stopped working. Our developers came to following conclusions:
 After saving a state of the extension (communication of the service_worker background script), the extension is blocked until user clicks to other window than Safari. After that the extension restarts and everything works correctly. Until next interaction with extension on the option page and popup window. We use for communication functionality chrome.runtime.onMessage. Extension sometimes incorrectly loads data from chrome.storeage.local and user loses all data Options page is always displayed in the new window instead of the new tab All problems described above were not happening in Safari version 17. Unfortunately there is no advice in the developer community, how to fix these problems. Anybody here experiences same problem or has a solution for it?
4
1
379
Oct ’24
How is WebAuthn conditional credential creation supposed to work
I'm trying to implement WebAuthn conditional credential creation but I'm not able to get it to work. From this video https://www.youtube.com/watch?v=p8a6ODX1zHY I understand I should call navigator.credentials.create with "mediation: conditional" but the explainer at https://github.com/w3c/webauthn/wiki/Explainer:-Conditional-Registration-Extension also mentions a call to navigator.credentials.get with "mediation: conditional" and "extensions: { conditionalCreate: true }". The explainer seems to suggest they should be called both but for me, both calls never resolve with a credential or an error. What am I doing wrong?
0
0
182
Oct ’24
Safari Web Extensions: storage.local.get unexpectedly returns undefined
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)'.
2
1
424
Oct ’24
How to secure the Safari web extension?
I'm tasked with securing a Safari browser extension that my organization created. It is using WebExtensions and has been launched across various browser extension stores, including Safari. I've searched for many hours on this and find very very little information on how to secure it. (Pretty much just https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy.) Is there anything more extensive/comprehensive? I'll be dealing with Safari Desktop as well as Safari iOS. By comparison, when looking for resources for securing the Firefox version of the extension, I found https://extensionworkshop.com/documentation/develop/build-a-secure-extension/, which I think is a great resource. Some of that content applies to Safari, but it's hard to know to what extent. I'll need to secure Safari web and Safari mobile (i.e. iOS), but for now I'm focused on web. (But if you have anything on mobile, then please let me know also.) Thank you!
2
0
527
Jul ’22
Differences between Safari App extension and Safari Web extension.
I tried to create a content blocker for Safari and did it through Safari App Extension and Safari Web Extension. The XCode project for Safari Extension creates 2 applications: the “Main Application” (which is compiled into ".app") and the “Safari Extension” itself (which is compiled into ".appex"). If you want to create a content blocker, you must add “Content Blocker Extension” from the “File → New → Target” menu. This will be the third application in the group, which is also compiled into "*.appex". And now about differences... The first difference is that Web Extension does not have the right to work on any domains by default, unlike App Extension. For the App Extension, in the "info.plist" in the "SFSafariWebsiteAccess" section, we can remove "Allowed Domains" and in "Level" replace "Some" to "All". This is important because the content blocker should work on any domain, and not be turned on manually for each individual. This will not work in Web Extension and will have to be activated for each domain separately. The second significant difference between Web Extension and App Extension is that for security reasons it is more limited in page management. Web Extensions are supposedly focused on a common API for all browsers (Firefox, Chrome, Opera, Edge, Safari), but if I use Safari and want maximum integration with it, then I don't care about all those browsers. In this case, I don't need Web Extension. App Extension functions as a client-server even within the “Main Application”. This is quite expensive and can be fixed. You can remove the “webView” component from storyBoard and remove this files: “script.js”, “main.html”, “style.css”. After this you will get the pure storyBoard without any tinsel and communication between these layers. That’s will work perfectly because these are native Swift applications. p.s. To show the "Safari Extension" window after clicking on the icon on the toolbar, you need to change key from "Command" to "Popover" in the "info.plist" in the section "SFSafariToolbarItem" in the "Action". write your additions...
1
0
358
Jul ’24
Building a Safari extension - but Safari doesn't see it
I'm trying to build a (personal) Safari extension, which should add an HTTP header when visiting a few websites. I'm a newbie at XCode. Using XCode, the build runs and the app runs correctly (the standard boilerplate code tells me that the extension is currently off). However, the extension doesn't appear in Safari>Settings>Extensions at all, so I cannot enable the extension. There are two warnings (warnings? or errors? fatal? or not?): 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 ...I'm brand new to XCode so I don't really know whether these errors are fatal, and how to fix them if so. These warnings appear when the app runs, not during the build cycle. The plugin appears when issuing this command in Terminal: pluginkit -mAvvv -p com.apple.Safari.web-extension ...part of that response is: podnewsllc.Podnews-Security.Extension(1.0) Path = /Users/jamescridland/Library/(snip)MyApp.appex UUID = EA41(snip)3519 Timestamp = 2024-10-06 03:54:37 +0000 SDK = com.apple.Safari.web-extension Parent Bundle = /Users/jamescridland/Library/(snip)MyApp.app Display Name = MyAppName Extension Short Name = MyAppName Extension Parent Name = MyAppName Platform = macOS ...so it's visible to Safari, but it doesn't appear in Safari>Settings>Extensions. The codesign command says: --prepared:/Users/jamescridland/(snip)__preview.dylib --validated:/Users/jamescridland/(snip)__preview.dylib --prepared:/Users/jamescridland/(snip).debug.dylib --validated:/Users/jamescridland/(snip).debug.dylib /Users/jamescridland/(snip).appex: valid on disk /Users/jamescridland/(snip).appex: satisfies its Designated Requirement ... so I think it's signed correctly. Checking "Allow unsigned extensions" does not appear to change anything. I've tried running a rebuild of LaunchServices, but that hasn't fixed it. /System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -kill -r -domain local -domain system -domain user My questions are: Is there a log to help me know what is going wrong? Does anyone have any idea why I can't see the extension in Safari? What next? Sorry for the dumb question.
1
0
310
Oct ’24
PWA and webpush notification
hi anybody have issue about pwa and webpush notification using FCM? with latest webpush and ios 17.x or 18.x 1-2 notification arrived but if iphone will be standby or webapp closed the service worker not receive notification
0
0
169
Oct ’24
Options and Services in Safari with Selenium?
Firefox and Chrome provide various options and services to set up browser characteristics while testing. These can be used with Selenium while setting up the driver. An example with Firefox is setting a custom user agent and a download directory different than the default. Using Python: from selenium.webdriver.firefox.options import \ Options as FirefoxOptions from selenium.webdriver.firefox.service import \ Service as FirefoxService firefox_options = FirefoxOptions() # set up user agent user_agent = UserAgent().get_user_agent() firefox_options.set_preference("general.useragent.override", user_agent) # set alternate download location firefox_options.set_preference('browser.download.folderList', 2) firefox_options.set_preference('browser.download.dir', download_dir_path) Many of these browser-specific options and services are listed at Selenium's website under Supported Browsers. However, Safari's information is very limited. On Selenium's site, for example, they list how to turn on Safari's limited logging: service = webdriver.SafariService(service_args=["--diagnose"]). Then, they point us to About WebDriver for Safari - which shows automaticInspection and automaticProfiling. The page primarily describes security features for testing with Safari. In a regular user session, one can configure an alternate download directory, set a custom profile with specific settings for that profile, and so on. And, in the Developer Menu I can set some of these items manually for a given session (user agent, for example). How can I access these features within Safari for use in automated web testing with Selenium? Edit: Alternatively, does Apple have, or recommend, a different automated testing package for Safari?
1
0
283
Sep ’24
Questions Tags Saves Users Companies Labs Jobs Discussions Collectives Communities for your favorite technologies. Explore all Collectives Teams Now available on Stack Overflow for Teams! AI features where you work: search, IDE, and chat. Lookin
I have an iframe for google map on this site: https://www.crumpler.com/pages/new-shop You can see the map upon clicking any location from the list. I am able to pinch and interact with the map on my iphone 14 and other mobile devices. But on older iphones on not-the-latest version of safari (iphone 13 mini and below), I am not able to interact with the map. Have you guys met with this problem before? Why might that be the case, cause I can interact with map embeds on other sites like https://nustem.uk/about/planning-your-visit/ on older iphones too?
1
0
285
Oct ’24
Safari Web Extensions: tabs.onRemoved unexpectedly thrown on url changed.
I have noticed that tabs.onRemoved works differently in Safari 18 comparing to other browsers and Safari 17. Open a tab e.g. apple.com Take note of the active tab id using this code: browser.tabs.query({currentWindow: true, active: true}, (x) => console.log(x[0].id)) Add a listener on onRemoved: browser.tabs.onRemoved.addListener(console.log) on the active tab, navigate to e.g. https://developer.mozilla.org Take note of the active tab id again (using the same tabs.query). Expect: there should be no console.log of onRemoved. the active tab id stays the same. Actual: there is a console.log of onRemoved. the active tab id is changed. Please help. If this is a bug introduced in Safari 18, it would break a lot of JS Web extensions.
1
0
368
Oct ’24
iOS 18 upgrade: website map point text now missing after
My website ccflood.us is a simple map that uses a CSV file for the data that is displayed on the map. It uses the ESRI JS API. Recently the points on the map began missing the text in the boxes only on Apple devices that have been upgraded to iOS 18. Has anyone also had this happen to their site? If you have upgraded to iOS 18, try this site on your iPhone then look at it on an Android phone or your desktop browser. You should seet the values in the boxes and a "+" at points that have no value. If you've had this happen with your site or have heard of a fix, please reply to this post.
0
0
218
Oct ’24
Iframe LocalStorage is Lost when opening a new window
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.
0
0
289
Oct ’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
264
Sep ’24
WKWebView adding cookie does not work with iOS 18 beta
If you create a cookie and add to the WKWebViewConfiguration the completionHandler returns 'Cookies synced' suggesting cookie was added with success. However, upon inspection of app in Safari the cookie is not there. This is broken in iOS 18 beta and works in previous versions without issue. Did Apple change the WKWebView API and break this feature? code snippet: NSDictionary* settings = self.commandDelegate.settings; WKWebViewConfiguration* configuration = [self createConfigurationFromSettings:settings]; configuration.userContentController = userContentController; NSMutableDictionary *cookieProperties = [NSMutableDictionary dictionary]; [cookieProperties setObject:@"foo" forKey:NSHTTPCookieName]; [cookieProperties setObject:@"bar" forKey:NSHTTPCookieValue]; [cookieProperties setObject:@"mydomain.com" forKey:NSHTTPCookieDomain]; [cookieProperties setObject:@"mydomain.com" forKey:NSHTTPCookieOriginURL]; [cookieProperties setObject:@"/" forKey:NSHTTPCookiePath]; NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:cookieProperties]; [configuration.websiteDataStore.httpCookieStore setCookie:cookie completionHandler:^{NSLog(@"Cookies synced");}]; WKWebView* wkWebView = [[WKWebView alloc] initWithFrame:self.engineWebView.frame configuration:configuration];
8
5
2.1k
Aug ’24
WKWebView evaluateJavascript method crash with async/await when javascript call doesn't have return value
I wrote a code like the example below to execute javascript code that has no return value. let webView: WKWebView // after load complete let result = await webView.evaluateJavascript("someFunction()") // :0: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value but when i use method with completion handler manner, it doesn't be crashed. but Xcode enforces me to use 'await' keyword and warning is bordering me await webView.evaluateJavaScript("someFunction()", completionHandler: nil) // warning: Consider using asynchronous alternative function The differnce I found is the different signature. Completion handler version has Optional result type, but async/await version has just Any result type func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil) func evaluateJavaScript(_ javaScriptString: String) async throws -> Any my Xcode version is 13.2.1. Hope to fix it soon.
8
10
4.1k
Mar ’22