Good morning fellow developers,
For a while i am struggeling with providing sound to my users on IOS (Safari on Mac is no problem and every other device is not a problem) (we have an existing phone system and made a chat as well), the case is very simple: the notification sound is only for users who are logged in and online for chat.
i have tried multiple things:
Audio play with javascript (start with mute, play when user clicks a button so the sound is familiar, play when user clicks a button and directly pause it and continue when needed)
PWA: the dashboard has been made available as pwa and notifications using google firebase. The popup does show for notifcations to be allowed (and receiving the notifications does work on any other device) But any IOS device cannot register.
The information i find is that notifications were supported with 16.4 or higher but also have been deprecated around IOS 17, auto play is not allowed.
We have an app in development for our product as well were we will have a notification which will handle this, but that is not the solution we can use now.
Long story, short question: is it still somehow possible to push a notification to the user when using the PWA or play a sound in the browser (based on an ajax function). The app/website wont be in the background, so it will always be on the screen.
Languages we use: html/javascript (mostly vanilla)/php
General
RSS for tagExplore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
In our web application some functionalities will allow user to upload multiple images (More than 25 images) in a single page
It is working find in all OS and browsers except iOS
When user try to upload images directly from camera there will be some overlaps, duplication, missing etc.
This is happening in both Safari and Chrome, we had a thorough check in our application and found every thing is working fine from our end
You can reproduce the issue by creating a web page which accept more than 50 images (we tried the same in ASP MVC Core & PHP) and showing the images in order
access the page through your iPhone using Safari or Chrome
Try to upload images directly from your camera, try sequential images (Image of a stop watch, or some thing like that) so that you can easily identify the order of files uploaded
and check the listing page of uploaded image (Try these steps multiple times)
You can find some images are duplicated and some are missing
I'm posting a question here as I have encountered an issue while seeking help from engineers in the thread. thread773837
If the "Not Secure Connection Warnings" is enabled in Settings > App > Safari, are HTTP connections not allowed under any circumstances?
I also posted a question about NSAllowsLocalNetworking not being applied, and I was informed that ATS (App Transport Security) is not related to SFSafariViewController. If that's the case, what feature causes the error "Safari cannot open the page. Error: Failed to navigate to an HTTP URL with HTTPS-only mode enabled"?
I am currently working to resolve this issue.
I want to migrate from a Safari App Extension to a Safari Web Extension, but don't know how to get rid of the message, telling users that my extension can access their passwords. Here is a message which I see:
I was thinking that this might be because all Safari Web Extension get this type of access, but I have a Safari Web Extension which does not require such level of access:
Here is the manifest:
{
"manifest_version": 2,
"default_locale": "en",
"name": "__MSG_extension_name__",
"description": "__MSG_extension_description__",
"version": "1.1",
"icons": {
"48": "images/icon-48.png"
},
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/toolbar-icon-16.png"
}
},
"permissions": [
"nativeMessaging", "tabs"
]
}
and here is the Info.plist file:
Here is the entire code of the extension:
https://github.com/kopyl/web-extension-simplified
We seem to be having an issue with a webservice here which is used within our network and IOS Safari. For the service to work , we need to access it with an unencrypted HTTP API call, which acts as a trigger. The server does not respond to HTTPS requests. (the HTTP API call does not contain any data that is privacy sensitive or that can be abused)
Since recently the service does not seem to work anymore properly, but this only happens with Safari and IOS. With all other browsers the service is still working normally, only with Safarai it fails.
No matter what I do in the settings of the phone, the Safar browser seems to stop immediately after the HTTP request. What is going on here ??
The issue seems to occur only when you don't have an iCloud+ account. With an iCloud+ account I get the same issue when you switch Apple Private Relay on, but that make sense. When I have Apple Private Relay switched off, there is no issue.
Topic:
Safari & Web
SubTopic:
General
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
Hello,
When I view my website (lasaluade) on iphone or ipad the top of my page bodies are cut off (3-4 first lines). However, on PC, Mac or Android everything is OK (see screenshots).
For the record, I built this site with Wordpress and Divi Builder, and I've the same result on Safari and Chrome.
Not being a developer, I don't know where to look (I just think it's iOS-related).
Have you already had this problem? Do you have any ideas?
Thanks for your help!
Topic:
Safari & Web
SubTopic:
General
Hi, I'm here to Report a Problem with the IOS 18.3 UPDATE.
So, when i Download a file, any file. The Download Progress has no problems, but when the download complete, Nothing happens it just keeps the blue line of the download, and then I can’t open that file…this only happened to me when i downloaded the IOS 18.3… hope it'll be fixed ASAP.
Bye!
I am using GTM in my project, and the OneTrust cookie consent script is loading in GTM. After ruling out iOS 18.3.1, I am unable to click on the OneTrust preference center since the GTM script is not loading.
This issue i faced for safari browser
Topic:
Safari & Web
SubTopic:
General
What happens if Safari is uninstalled or disabled on iOS?
Will SFafariviewcontroller still work?
Kind regards
I have a simple Safari extension for iOS.
In its popup, I want a button that will open the app via a universal link.
I have this kind-of working, except that Safari opens the actual online destination of the link with a banner at the top saying "Open in the XXXX app" and an OPEN button.
What do I have to do to go directly to the app?
More generally, I know that if I copy-and-paste a universal link into the Safari address bar, Safari does the same thing - but it does go directly to the app from an <a href="...."> link.
In my app extension JavaScript, I set window.location. Presumably this is too similar to pasting into the address bar.
Is there some alternative to setting window.location that is more like clicking on a link and will go directly to the universal link's app?
Thanks.
Within installed PWAs, the navigator.language / navigator.languages property return a value, that is not according to the Safari settings and defers from the navigator.language / navigator.languages in the browser itself.
Example: Safari settings set to "German", returns "de-DE" in browser mode, but within the installed webApp it returns "en-GB".
I thought this might be due to the overall phone language settings, but this is not the case. Even is the phone is completely set to German, the navigator returns "en-GB" within an installed PWA.
My phone is also not English/British, there is no reason why "en-GB" should show up.
Topic:
Safari & Web
SubTopic:
General
We are testing our safari web extension (https://apps.apple.com/us/app/whatfix-for-jnj-centris/id6723895659) on an iPad 7th Gen (iPadOS v - 17.4.1)
I am sharing a video link where you can see the widget (named Self Help) appears on the application. However after a couple of refreshes, it vanishes. This widget is powered by the extension.
We tried connecting the iPad to Mac and opened the webinspector. The extension content script sends a message to the service worker and it is expected to send back a response which it is not doing
We believe it is related to an issue that has been highlighted multiple times in the developer forum -
https://developer.apple.com/forums/thread/758346
We have tried using several workaorunds as suggested by peer developers in the thread but we are unable to revive the service worker once it is killed.
We would like to understand from you, how to recover from this issue. Is there any workaround that we can apply to make sure that extension works fine?
It would be immensely helpful if we can get on a call to explain the issue further
Video Link: https://www.icloud.com/iclouddrive/0a7NR7BzDQHHU8zCHERuySBMw#RPReplay%5FFinal1740034010
I have a UI application built with the Vue framework, using Vuetify for the UI components. There's a div with the class v-application--wrap, which is provided by Vuetify. This class internally includes the following style rule.
.v-application--wrap {
backface-visibility: hidden;
display: flex;
flex: 1 1 auto;
flex-direction: column;
max-width: 100%;
min-height: 100vh;
position: relative;
}
The pages were rendering correctly up to version 18.3, but after upgrading to version 18.4, we encountered layout issues related to height. Upon investigation, we discovered that the min-height property was no longer being interpreted or applied correctly. Replacing min-height with height resolved the issue, and the pages began loading as expected.
Any insights into why this behavior is occurring would be greatly appreciated.
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.
Topic:
Safari & Web
SubTopic:
General
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.
If "Not Secure Connection Warnings" is enabled in the Settings > App > Safari, are no HTTP connections allowed? Setting NSAppTransportSecurity does not seem to apply either.
Topic:
Safari & Web
SubTopic:
General
SwiftUI List Accessibility VoiceOver
Topic:
Safari & Web
SubTopic:
General
Hello there,
For a video like this <video src="blob:safari-web-extension://***" autoplay="" loop="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: -1;"></video>, no matter if its local or remote, blob or mp4 files, is constantly being reloaded (refetched? revalidated?) if the loop tag is added. I can confirm there is actual constant traffic from the server based on my server logs. I am running iOS/macOS 26.
I am working in React Native and trying to use Deeplink. When app is installed code is working fine but when app is not installed not redirecting to App Store in Safari instead of that in Chrome that is working fine
in safari when i click i got this error message
"safari cannot open the page because the address is invalid"
this is my apple-app-site-association file code
{
"applinks": {
"apps": [],
"details": [
{
"appID": "CS666P223.com.seecard",
"paths": [
"",
"/recover/",
"/settings/*"
]
}
]
} ,
"webcredentials": {
"apps": [ "CS666P223.com.seecard" ]
}
}
and this is my code in next
"use client"
export default function Home() {
// Helper function for device detection
// const isiOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent);
const isAndroid = () => /Android/i.test(navigator.userAgent);
const isiOS = () => {
const userAgent = navigator.userAgent || navigator.vendor;
return (
/iPhone|iPad|iPod/.test(userAgent) ||
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
);
};
const openAndSaveCard = () => {
try {
// let fallbackLink = '';
if (isiOS() || isAndroid()) {
const card_id = "3434bee9675ee44b3dc65";
const card_owner_id = "34349675ee44b3dc43";
const card_for_saved = {
"cardId": card_id,
"ownerId": card_owner_id
};
console.log("=-=-card_for_saved",card_for_saved)
const encodedData = encodeURIComponent(JSON.stringify(card_for_saved));
window.location.href = `saveseecard://open?id=${encodedData}`;
const androidAppStoreLink = 'https://play.google.com/store/apps/details?id=com.seecard';
const iosAppStoreLink = 'https://apps.apple.com/np/app/seecard/id6502513661';
fallbackLink = isAndroid() ? androidAppStoreLink : iosAppStoreLink;
const timeout = setTimeout(function () {
if (document.hasFocus()) {
window.location.href = fallbackLink;
}
}, 2000);
window.addEventListener('blur', () => {
clearTimeout(timeout);;
});
} else {
alert("Your device doesn't support deep linking for this app.");
}
} catch (e) {
console.log("Error:", e);
}
};
return (
<div className="cIcon ml-10 purpleBg"
// onClick={() => { openAndSaveCard() }}
onClick={openAndSaveCard}
>
<p className="container-text">Save Card</p>
</div>
</main>
</div>
);
}
Topic:
Safari & Web
SubTopic:
General