Hello,
I'm currently facing some issues with localization for the Safari extension on iOS:
Issues with Language Tags:
Folder names like pt-BR (Brazilian Portuguese) and pt-PT (European Portuguese) placed in the Resources/_locales/ directory are not displaying the respective languages correctly; instead, the default English is shown.
Similarly, using folder names like zh-CN (Simplified Chinese) and zh-TW (Traditional Chinese) also results in default English display instead of the intended Chinese language.
Conversely, when changing the folder names to pt (Portuguese general) and zh (Chinese general), the languages display correctly.
Could you please provide any recommendations or tips regarding language tag settings and how to ensure they are properly recognized according to RFC 5646?
Thanks for your help!
Best,
Explore 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
I am building Safari extension. In my background script I am setting badge text and title like this:
browser.action.setBadgeText({text: badgeText, tabId: tabId});
browser.action.setTitle({title: badgeText + " found images", tabId: tabId})
, where tabId is correct id of current tab.
I was expecting that in this way I am setting a different badge and title for different tabs, so that badge and title would automatically switch if I activate different tab. However this does not happen, badge and title behave as if set globaly and don't change with tabs. How is this expected to work?
I have also tried to set badge globally, and update it every time user switches a tab. I have set up listener like this:
browser.tabs.onActivated.addListener(function(actInfo) {
console.log("switched tab to " + actInfo.tabId);
});
, however the event never fires, tab switch is never logged in console.
Am I doing something wrong here?
This is my manifest, if there was a problem with permissions or something similar.
{
"manifest_version": 3,
"default_locale": "en",
"name": "Test",
"description": "Test Extension",
"version": "1.0",
"icons": {
"48": "images/icon-48.png",
"96": "images/icon-96.png",
"128": "images/icon-128.png",
"256": "images/icon-256.png",
"512": "images/icon-512.png"
},
"action": {
"default_title": "a test title",
"default_popup": "popup/hello.html",
"default_icon": {
"16": "images/toolbar-icon-16.png",
"19": "images/toolbar-icon-19.png",
"32": "images/toolbar-icon-32.png",
"38": "images/toolbar-icon-38.png",
"48": "images/toolbar-icon-48.png",
"72": "images/toolbar-icon-72.png"
}
},
"web_accessible_resources": [
{
"matches": ["*://*/*"],
"resources": ["images/*", "css/*", "scripts/lib/*"]
}
],
"background": {
"service_worker": "scripts/background.js",
"type": "module"
},
"content_scripts":
[
{
"js": [
"scripts/content.js"
],
"matches": [
"http://*/*",
"https://*/*"
],
"css": ["css/style.css"],
"run_at": "document_end"
}
],
"permissions": [
"nativeMessaging", "tabs"
]
}
Howdy!
On Safari, when using the column-count CSS property to split text into multiple columns, I've noticed that when applying a text-shadow, there is an unexpected whitespace created above all subsequent columns. I've put together a codepen demonstrating the issue and its reproducibility on Safari (using latest as of this posting: Version 17.6 (19618.3.11.11.5))
Codepen: https://codepen.io/cubepresser/pen/ExqvzjL
Expected behavior:
Actual:
I tested this on the latest versions of Chrome, Firefox and Edge. This bug does not occur.
Expected behavior is that there should not be an extra line added to the beginning of the second column, third column, etc.
Here's some code if that codepen link doesn't work:
HTML:
<p id="example">0000000000111111111122222222223333333333</p>
CSS:
#example {
font-family: monospace;
max-width: 20ch;
column-count: 2;
column-gap: 0;
word-break: break-all;
line-break: anywhere;
text-shadow: 0 0 4px black;
}
Good day,
I'm attempting to check whether Apple Pay is available using the ApplePay JS API. Prior to upgrading to Safari 18.0+, I was using window.ApplePaySession.canMakePayments to show/hide the Apple Pay option.
I've noticed with the new Safari version, the preferred method of checking the availability of Apple Pay is by using the applePayCapabilities method.
When logging and inspecting the window object in Safari 18.0.1, this method seems to be missing from the ApplePaySession object.
Additionally, my conditional code which is dependent on applePayCapabilities does not execute:
if (typeof window !== 'undefined' && window.ApplePaySession) {
// Safari version 17 and lower
if (window.ApplePaySession.canMakePayments) {
// set Apple Pay available
}
/**
* On Safari version 18 and higher, we must check whether a user has a card saved in their wallet.
* If this is the case, Apple Pay must be presented as the primary payment method. In our case,
* this means selecting Apple Pay as the default payment method.
*/
if (window.ApplePaySession.applePayCapabilities) {
const merchantIdentifier = '***';
const promise = window.ApplePaySession.applePayCapabilities(
merchantIdentifier
);
promise.then(capabilities => {
switch (capabilities.paymentCredentialStatus) {
case ApplePayCapabilities.CREDENTIALS_AVAILABLE:
// set Apple Pay as available and default
break;
case ApplePayCapabilities.UNSUPPORTED:
// not available
break;
default:
// set Apple Pay as available only
}
});
}
}
I feel I'm missing something very simple here, help would be greatly appreciated!
I have a question. In the file located at /Library/Preferences/com.apple.networkd.plist, if the dict entry for enable_unified_http is set to true or if the value is missing, there is an issue where the video player does not run on MacOS Sequoia Safari 18.0. I found that setting it to false allows it to function properly. Could you explain what this setting does and whether it is possible to change this setting to false within the app?
Topic:
Safari & Web
SubTopic:
General
We have an ObjC-based Mac App utility. A fair fraction of the functionality is built in JavaScript and resides in a couple of WKWebViews so that we can more easily share code with other platforms. Because it is a utility, usually the application will be hidden or at least not the frontmost application. But if the user hits a hotkey or provides certain other inputs, the app should respond immediately with a series of actions.
In the Obj-C part of the code, we can do this to alert the system that our non-visible, non-active, application is doing something in response to the user input:
[[NSProcessInfo processInfo] beginActivityWithOptions: NSActivityUserInitiatedAllowingIdleSystemSleep reason: @"Do the Thing"]
To get the JavaScript to do the work needed, we call evaluateJavaScript:completionHandler: on one of the WKWebViews. The JavaScript performs a series of computations, then uses window.webkit.messageHandlers.xxxx.postMessage to return results to the ObjectiveC code, which then takes action based on various SDKs, and the user sees the result.
The problem we are encountering is relatively infrequent, but it appears that macOS puts the 'Web Content' process (which every WKWebView has) to sleep, and sometimes delays of many seconds (sometimes over 15 seconds) occur between the evaluateJavaScript:completionHandler: call and the postMessage response. These observed delays are not related to complexity of the JavaScript computations or the amount of data being processed. Using the Console, we can see that evaluateJavaScript:completionHandler: seems to result in this message:
0x104682280 - [PID=0, throttler=0x1046e8498] ProcessThrottler::Activity::Activity: Starting background activity / 'WebPageProxy::runJavaScriptInMainFrameScriptWorld'
Then shortly afterward:
0x104682280 - [PID=0, throttler=0x1046e8498] ProcessThrottler::Activity::invalidate: Ending background activity / 'WebPageProxy::runJavaScriptInMainFrameScriptWorld'
So it seems that evaluateJavaScript:completionHandler: "wakes up" the WKWebView similar to the beginActivityWithOptions:. But many parts of our computation do some work, then expect the next "tick" in JavaScript to continue using the partial result to produce more work. I suspect that the delays are related to the WKWebView being put "back to sleep" before all the "next tick" code executes.
Because these actions are taken in response to user invocation, delays of more than a fraction of a second are instantly noticeable and result in user dismay.
Are there any configuration settings that can prevent the 'Web Content' process from going to sleep? Or (better) techniques or mechanisms that would force the process to "stay awake longer"? (Keeping in mind that the WKWebView is likely not visible, and/or the containing window may be hidden.)
Hi,
I was implementing Apple pay button by checking active wallet and at least one cards active.
I am using applePayCapabilities as per DOCS but i am still getting the same type of response with apple pay wallet enabled and without apple pay wallet enabled on different devices as
Loading the Apple Pay SDK:
script.src = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
script.crossOrigin = "anonymous";
document.head.appendChild(script);
script.onload = function() {
console.log("Apple Pay SDK loaded successfully");
// Initialize Apple Pay or perform actions that require the SDK here
};
script.onerror = function() {
console.error("Error loading Apple Pay SDK");
};
Calling applePayCapabilities method:
window.ApplePaySession.applePayCapabilities("merchant.com.example").then(r => console.log(r))
Output:
{paymentCredentialStatus: "paymentCredentialsAvailable"}
Image attachments of applePayCapabilities:
Devices Config Used:-
Chip - Apple M3 Pro
macOs - Sequoia 15.0.1
memory - 36 GB
Safari Version - 18.0.1
I am working Web to App flow for my product.
Tolink to my app from web service, I define uri scheme from app and use it from my web site.
But, when I try to use this scheme from mobile safari web, It sometimes failed with message that uri is invalid.
That is weird It failed SOMETIMES not always Even I tried with same url.
In my device, there is current version app.
Why this happen? How can I resolve this issue?
Hello everyone,
I am currently facing an issue with a Cordova-based app using WKWebView. In our app, we handle page navigation within the WebView. We’ve implemented a back button at the top of the page, which successfully triggers history.goBack() when clicked. However, we also want to support the native left edge pan gesture (swipe back) to trigger history.back().
The issue is that, while the swipe back gesture works most of the time, there are cases where instead of navigating to the immediate previous page, it behaves as if it’s going back to the first page (or initial page). This only occurs on iOS versions 17.5.1 and above. I’ve already set allowsBackForwardNavigationGestures to true, and the back button itself works perfectly.
Has anyone experienced a similar issue, where the swipe back gesture sometimes skips pages and seems to return to the first page on iOS 17.5.1 or later? Any suggestions on how to fix or troubleshoot this would be greatly appreciated.
Thank you!
I've observed a discrepancy in cookie consent options between iOS 18.0 and 18.1 on some websites, such as www2.hm.com. On iOS 18.0, I see "Accept All Cookies" and "Only Required Cookies" options, whereas on iOS 18.1, the options change to "Accept All Cookies" and "Cookie Settings."
I would like to understand if this behavior is related to differences in how websites detect the operating system version (iOS 18.0 vs. 18.1) or browser changes within the iOS update. Has anyone else experienced similar variations in cookie consent banners, and could this be tied to differences in the user agent or website A/B testing for different OS versions?
Any insights or technical clarifications would be appreciated!
In Safari Web Extensions on iOS 18, declarativeNetRequest Rulesets and Dynamic Rules take over twice as long to apply -- which causes rulesets to often fail to apply before sites load. In a boilerplate Xcode project you can note the time difference toggling the OISD (https://oisd.nl) ruleset on iOS 17 and iOS 18 simulators. Additionally, if you force quit Safari and reopen to a site with ads blocked by OISD list (e.g. espn.com) the content will be blocked in that initial state on iOS 17, but not in iOS 18 due to the latency.
Based on the boilerplate extension, this bug is impacting all Mobile Safari Extensions using declarativeNetRequest Rulesets and Dynamic Rules. We know several other extension developers dealing with this issue.
Our team wrote detailed reproduction steps in our Feedback Assistant ticket: https://feedbackassistant.apple.com/feedback/15196130 but have received no responses. I would attach a screen recording here but it won't allow me.
Topic:
Safari & Web
SubTopic:
General
Tags:
Extensions
Safari Developer Tools
Safari and Web
Safari Services
So I know I can request for an email in the paymentRequest requiredShippingContactFields and could also access minimal information with onshippingcontactselected, but how can I actually get the full shippingContact AFTER a transaction. The documentation doesn't say what API call this is returned with or anything, so please help!
Relevant doc: https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact
Topic:
Safari & Web
SubTopic:
General
Hello everyone,
in my website I need to give users the ability to choose a color via input type=“color”.
I don't understand why it works fine on desktop (even on Safari for Mac) but doesn't open the color picker on iPhone.
How can I solve this?
Thank you,
Andrea
I have a macOS safari web extension and It can read the cookies of my website, but when I fully close safari and open it again the extension can't read the cookies anymore. When I try to inspect the cause in the console (safari > develop > web extension background content) everything starts to work again.
My safari version is 18.1 (19619.2.8.111.1, 19619)
We are trying to retrieve merchant tokens from ApplePay. We used the javascript codes from Apple Pay demo site to request for a recurring payment from the frontend.
"recurringPaymentRequest": {
"paymentDescription": "A description of the recurring payment to display to the user in the payment sheet.",
"regularBilling": {
"label": "Recurring",
"amount": "4.99",
"paymentTiming": "recurring",
"recurringPaymentStartDate": "2023-08-11T11:20:32.369Z"
},
"trialBilling": {
"label": "7 Day Trial",
"amount": "0.00",
"paymentTiming": "recurring",
"recurringPaymentEndDate": "2023-08-11T11:20:32.369Z"
},
"billingAgreement": "A localized billing agreement displayed to the user in the payment sheet prior to the payment authorization.",
"managementURL": "https://applepaydemo.apple.com",
"tokenNotificationURL": "https://applepaydemo.apple.com"
}
Payment was successful, but merchantTokenIdentifier is not shown in the in decrypted ApplePay token, regardless of test card used. We tried Visa and MasterCard.
Hi, We developed a web app based on the iPhone Safari browser, and we would like to ask if it's possible to use JavaScript to prevent the iPhone's screenshot function from capturing screenshots of the web page?
Topic:
Safari & Web
SubTopic:
General
Hi, we developed a web app based on the iPhone Safari browser and would like to apply to see if it is possible to use JavaScript capabilities to prevent the iPhone system from taking screenshots of web pages.
Topic:
Safari & Web
SubTopic:
General
I'm working on a school project to build a webpage for Vision Pro users. I'm using Xcode to build this webpage because it has .reality files. This webpage only works on Safari because I took a spatial image with my Vision Pro, and it's .heic file type.
I put the .png version below the .heic file that is supposed to have the spatial effect. I deployed this project on Vercel, please use Safari to check out the link: https://spatial-design-project.vercel.app
There's another issue in this project, I downloaded the Cosmonaut .reality file on Apple Quick Look Gallery to test on my webpage. However, when I open it on Vision Pro, the file won't load, it says "Failed to load layers". Does it have something to do with the server for serving this file type? Should I use an actual web hosting company for this website?
Here is my GitHub repo
<div class="hero">
<div class="hero-text">
<h1>La Sal Peak</h1>
<p>The Do-It-All Enduro Bike</p>
</div>
</div>
<div class="hero2">
<div class="hero-text">
<h1>La Sal Peak</h1>
<p>The Do-It-All Enduro Bike</p>
</div>
</div>
.hero {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-start;
height: 100vh;
background: url("assets/heroImage.heic") no-repeat center center/cover;
color: white;
}
.hero2 {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-start;
height: 100vh;
background: url("assets/hero.png") no-repeat center center/cover;
color: white;
}
We currently are using private web security certificates for our URLs. Our users download, install, and enable a Root Certificate on their devices to reach our website (trusted). The web security certificates have expirations that are less than 13 months from expiration.
Since the deployment of iOS 18, our users are now getting a "This Connection is not Private" warning in the web browser on both Mac and iOS devices.
What change was implemented in iOS 18 that is causing this issue? Other than changing our web security certificates to Public ones, what solutions should be implemented to prevent this from occurring?
This screen time is ruining the battery and always goes to dead while I re open. Any idea how to resolve it?