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

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Activity

Safari App Extension – conflicting Bundle Identifier
Sometimes the Safari App Extension i'm developing does not show up in my Safari Extensions unless i change mu bundle identifier to some unique name. Even if I delete all other apps i've built with the same (and different) bundle ID, the extension is still does not show up. The only solution for me is to always change the bundle ID. For example: Now it is "kopyl.tab-finder-10" If i change it to "kopyl.tab-finder-11", the extension does show up in the Safari extensions settings page again. Is there any other way to fix it?
9
0
472
Feb ’25
[crash] iOS 18 _os_unfair_lock_recursive_abort
crash log: _os_unfair_lock_recursive_abort SIGTRAP BACKGROUND THREAD 29 - CRASHED libsystem_platform.dylib _os_unfair_lock_recursive_abort libsystem_platform.dylib _os_unfair_lock_lock_slow WebKit void IPC::Connection::dispatchToClient<IPC::Connection::enqueueIncomingMessage(***::UniqueRefIPC::Decoder)::$_0>(IPC::Connection::enqueueIncomingMessage(***::UniqueRefIPC::Decoder)::$_0&&) WebKit IPC::Connection::enqueueIncomingMessage(***::UniqueRefIPC::Decoder) WebKit IPC::Connection::processIncomingMessage(***::UniqueRefIPC::Decoder) WebKit ___ZN3IPC10Connection12platformOpenEv_block_invoke libdispatch.dylib _dispatch_client_callout libdispatch.dylib _dispatch_continuation_pop libdispatch.dylib _dispatch_source_latch_and_call libdispatch.dylib _dispatch_source_invoke libdispatch.dylib _dispatch_lane_serial_drain libdispatch.dylib _dispatch_lane_invoke libdispatch.dylib _dispatch_root_queue_drain_deferred_wlh libdispatch.dylib _dispatch_workloop_worker_thread libsystem_pthread.dylib _pthread_wqthread libsystem_pthread.dylib start_wqthread Collapse Note: only crash above iOS 18.0
1
0
505
Oct ’24
Do page img-src CSPs apply to Safari WebExtension content scripts injected HTML img tag?
I am currently developing a Chrome, Firefox and Safari web extension, and I am facing a CSP issue on the content script on Safari. The extension I develop has a content script that injects an img tag in the DOM of web pages the user is visiting. That img tag fetches its content at a specific URL. On Chrome and on Firefox, the img tag content fetches the content at the URL with no issue on every web pages, including those that set the CSP header img-src. On Safari, I'm getting the following error on web sites that set the img-src CSP header: Refused to load https://axxlfrmnpq.cloudimg.io/www.macifavantages.fr/wp-content/uploads/2021/06/Garmin-logo.png?func=bound&w=225&h=113 because it does not appear in the img-src directive of the Content Security Policy. Here is the actual CSP img-src header content of the web page where, on Safari, the injected img tag does not load the content at https://axxlfrmnpq.cloudimg.io/www.macifavantages.fr/wp-content/uploads/2021/06/Garmin-logo.png?func=bound&w=225&h=113: Content-Security-Policy: img-src https://secure.adnxs.com https://www.facebook.com https://.garmin.cn 'self' data: .garmin.com .trustarc.com .truste.com https://static.garmincdn.com https://www.google.com https://www.google.co.uk https://prefmgr-cookie.truste-svc.net https://res.cloudinary.com https://res.garmin.com https://.criteo.com https://.doubleclick.net https://www.googleadservices.com https://px.adentifi.com https://rtb.adentifi.com https://.teads.tv https://www.googletagmanager.com https://bat.bing.com https://.yahoo.com https://sync.outbrain.com https://*.google-analytics.com https://stats.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com .akamaihd.net https://.tealiumiq.com https://deploytealium.com https://pixel.mediaiqdigital.com; My question is, is the page CSP blocking the img tag injected in the web page by the extension's content script? If so, is this behavior documented somewhere, or is it a Safari bug? I saw there is a similar post on the forum, but I couldn't find if the issue is a bug or if it's the expected behavior on Safari: https://developer.apple.com/forums/thread/651542?login=true. Thank you very much for your help.
0
0
543
Feb ’25
Can't connect to local web server after upgrading to Sequoia
I am running a web server on a Windows machine on my home network to host Automatic1111 (a Stable Diffusion frontend). I was able to connect to it just fine from my MacBook up until I updated to Sequoia 15.2 developer beta. When I try loading the page, I get ERR_ADDRESS_UNREACHABLE. It is using a non-standard port (7860), so the address is in the form http://192.168.0.xx:7860 I am able to connect just fine from any other device in my house, including Vision Pro. I have checked the solutions suggested in other threads: Disabling firewall Disabling IP tracking Disabling Private IP Adding Edge to the list of apps allowed to use the local network (Safari doesn't show up in the list) Clearing the network settings Restarting multiple times This seems like a bug and is a huge frustration and blocker for my workflow. :/. Has anyone else encountered this issue and found a way around it?
Topic: Safari & Web SubTopic: General
1
0
516
Nov ’24
iOS 18.3 beta meet CannotConnectToHost - 1004
Recently, our some customers feedback that their phones can not connect to our site by safari or App, show the error of “Cannot Connect to Host -1004”,all of these problem customers has installed iOS 18.3 beta. Is there anybody meet the same problem?
Topic: Safari & Web SubTopic: General
0
0
277
Jan ’25
Apple Pay Third party browsers - completeMerchantValidation fails
I've a apple pay integration on my website. The new sdk, that allows third party browsers. My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete". I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution. When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction." I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?) I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types. What else can iIcheck?
0
0
338
Feb ’25
I cannot log in using 'Sign in with Apple' on iOS 12.
Our service includes the Apple web login feature to support "Sign in with Apple" on iOS 12. However, at some point, an error started occurring on the Apple login page in iOS 12, preventing users from proceeding further. Upon checking the Web Inspector console, we found the following error: Failed to load resource: the server responded with a status of 503 (Service Temporarily Unavailable) Please help us resolve this issue so that users can continue using "Sign in with Apple" on iOS 12.
2
0
542
Jan ’25
Speech synthesis from Safari app extension
I'm making a Safari extension for learning languages. I need speech synthesis for any language the user chooses to learn. I initially tried to make this work within JavaScript, but Safari 18 doesn't reliably list voices for all languages on the web SpeechSynthesis API as described here: https://stackoverflow.com/questions/79179072/how-do-you-use-a-japanese-voice-with-speechsynthesis-in-safari-ios-18 As a workaround, I've had to use AVSpeechSynthesizer in SafariWebExtensionHandler (NSExtensionRequestHandling implementation for the extension). This works in the simulator but not on a real device. I've found this note from Apple in a StackOverflow reply: "Safari extensions are very short-lived, hence not fit for audio playback or speech synthesis. Not being able to validate an app extension in Xcode with a manually-added plist entry for background audio is the designed behavior. The general recommendation is to synthesize speech using JavaScript in conjunction with the Web Speech API." Unfortunately, the suggestion to use the Web Speech API is unsuitable as I just explained. Is there a way to set up a background process in the host app that can do speech synthesis? The app extension would need a way to communicate with this process, and start it if it's not running. Is that possible?
0
0
570
Dec ’24
Browser.tabs.create method "active"property not working on IOS 18.3
As of IOS 18.3, there browser.tabs.create methods active property which is supposed to determine whether a tab get open in the active window or not is not working as it should. I have the active property set to false but the tab still gets opened and is active on the window. Tested on older ios versions 18.2 and below and it works as it should. please advise
2
0
353
Feb ’25
[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
636
Oct ’24
How to prevent text wrapping in iOS browser's default option tag?
In the Safari browser on mobile devices, the tags in an HTML element are styled with the system's default styles. I want the text inside the tags to be displayed without line breaks. However, in reality, the text wraps according to its length. May I ask if there are any methods to achieve this? (ps: CSS-related properties such as white-space: nowrap do not work.)
0
0
339
Feb ’25
Safari ios 18.2 download problems
iPhone 15pro iOS 18.2 Downloaded files cannot be located anywhere in Files, only by accessing Downloads in Safari. I have tried setting download folder to various locations, iCloud, Phone, Google Disk, but nothing is stored. Has an invisible cache or temp folder been introduced? If so, it is a total fail: When press-holding any file in Safari download, the normal file action options (Quick Look, share, store to Files, etc) are not available. When clicking any file it opens any of several apps that has this file type associated with it, and there is no way to change the default app or disable the forced opening of an app. I tried deleting the app opening .csv (in this case OneDrive), and another irrelevant app opened. There seems to be a hierarchy of apps-file types, and it has no logic to it. in Chrome behaviour is as expected. Chrome vs. Safari screen recordings: https://shorturl.at/my3Oy
2
0
1.4k
Nov ’24
After set video.src, video.play() not work
Iphone 16 pro After set video.src, video.play() not work <div> <button id="play"> play </button> </div> <video id="video" preload="auto" playsInline webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true" raw-controls="true" style="width: 300px;" > <source src="****.mp4" type="video/mp4" /> <track kind="captions" srcLang="en" /> </video> <script> document.querySelector('#play').addEventListener('click', function() { document.querySelector('#video').play(); }) document.querySelector('#video').addEventListener('ended', function() { document.querySelector('#video').pause(); document.querySelector('#video').src = '*****.mp4'; document.querySelector('#video').play() }) </script>
Topic: Safari & Web SubTopic: General Tags:
0
0
374
Nov ’24