JavaScript

RSS for tag

Discuss the JavaScript programing language.

Posts under JavaScript tag

200 Posts

Post

Replies

Boosts

Views

Activity

Location Alert does not open in PWA
Hi guys, I have built a PWA that calls the javascript API navigator.geolocation.getCurrentPosition which prompts the user for location access when the Safari permission is set to Ask. This is the correct behavior and works as expected when open in Safari. However when added to the Home Screen and running with a display mode of "standalone", the location alert does not open on my phone (iPhone 13 mini / iOS 15.1.1). And the call never times out. Then if I switch from the PWA to Safari the location alert / prompt is suddenly showing in Safari. So it seems that the alert is targeting the wrong "tab". This does not happen if the PWA display mode is "browser" or "mimimal-ui" with either of those it behaves normally. I can only replicate this on my phone (iPhone 13 mini / iOS 15.1.1). I have also tested on various older phones (15.1.1 and 14.7) as well as several emulators and they all behave as expected. It is possible this is a obscure setting on my phone but it does feel a lot like an iOS Safari bug.
4
3
3.6k
Jun ’23
How do I receive APNS silent push message payload in a web page on safari
I am trying to implement Safari Web Push using the document to setup APNS and receive silent push messages on a react app on Safari browser. At this point, I have added an endpoint to get push packages on calling window.safari.requestPermission. This prompts the user to enable notification and grants the permission and returns with a device token. I have a server-side node script implemented using node-apn to send a silent push message to the client using a device token. The send function resolves with a successful response. Sample message packet that I am sending via APNS: { "aps": { "content-available": 1 }, "customData": "custom data", "topic": "web.push.ID" } I am expecting the payload to be delivered to the client through an event. I am trying this with the below function on the web page. window.addEventListener('push', function (event) { if (event && event.push) { const payload = event.push; console.log('safari received payload in window.addEventListener:', payload); } }); However, I do not see any message coming to the client. Can someone please point me to what I am missing here? Thanks a lot for your help in advance.
0
0
831
May ’23
In safari on IOS16 or later, simultaneous presses of "a" and "meta" are not caught when a keydown type event listener is set in JavaScript.
We have confirmed the title issue on iPads with at least IOS16 or later. window.addEventListener('keydown', e => { e.preventDefault(); e.stopPropagation(); console.log(JSON.stringify(e, ['key', 'altKey', 'ctrlKey', 'shiftKey', 'metaKey'])); }) When a key is pressed in the above code, the console outputs what is being pressed now. However, when the meta key is pressed, "a" does not respond. In addition to this, all other key pairs in the shortcut list displayed by long-pressing "command" do not respond. Is there any way to work around this problem?
1
0
769
May ’23
Emojis corrupted on iOS when using negation with unicode character class escapes
I'm using regular expressions to remove non-latin and non-emoji characters from strings. As Unicode character class escapes (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape) are now widely supported, I used them to simplify my expressions. const regex = new RegExp('[^(\\d\\s\\p{Script=Latin}\\p{gc=Punctuation}\\p{Extended_Pictographic})]+', 'gui'); function removeUnsupportedChars(txt: string) { return txt.replace(this.characterEx, ''); } This works on PC and on Android. However, on iOS, when using this regular expression, emojis get corrupted and shown as squares. I created a minimal CodePen https://codepen.io/lizozom-the-sans/pen/GRYxOzp where the scenario is reproduced with a simplified regex and it seems like on iOS any usage of negation on the Extended_Pictographic class (or any of the other emoji classes) leads to their corruption. Is this a known issue on iOS? Any known workarounds (other than using explicit emoji lists)?
0
0
902
May ’23
App crashing on initial load
My iOS app is crashing on the initial load. It's happening both in my Testflight build and also in the production version of the app on the App Store. It was working fine a few days ago; this just started happening all of a sudden. What's strange is that after doing a fresh install, it doesn't happen the first time I open the app. It only happens after I force close the app and open it again (and every time afterward). I'm using Expo and React Native to build the app. I've attached a crash log. crash log - https://developer.apple.com/forums/content/attachment/6a5962a1-56ac-44b0-8ec4-4e8dee0daee8
3
0
5.7k
Apr ’23
IOS 16.4 beta 2 PWA Push notifications
Hello everyone! I'm trying to test push notifications for PWA, but when I request permission via JS I catch 'Permissions denied'. Notification.requestPermission(result => { console.log(result) if (result === 'granted') { alert('Permissions granted') } else { alert('Permissions denied') } }); Is it available to get permissions for IOS? It works properly with android and mac. Does anyone know what am I missing, or what is wrong?
4
4
7.8k
Apr ’23
Safari: ajax call to localhost blocked
We have a web application that needs to interact with local hardware (a smartcard). We have developed an app running on localhost that interact with hardware and exposes some services. The web application is exposed in https and calls services on lcalhost in http (we can't have a valid certificate for localhost). Safari blocks the call with this error in the console: XMLHttpRequest cannot load http://127.0.0.1:58666/status due to access control checks. All other major browsers (Chrome, FireFox, Edge) work without problems. Some references: https://stackoverflow.com/questions/66689081/localhost-http-accessed-from-https-webpage-why-no-mixed-content-error https://bugs.webkit.org/show_bug.cgi?id=171934 Is there a workaround to let Safari do the call? Do you have an alternative solution?
0
0
1.6k
Apr ’23
browser.tabs.onRemoved.addListener not functioning correctly
I'm creating a safari extension where if a tab/window is closed, I need it to do some background cleaning, for example removing the local storage data. I tried the following lines in my background.js: browser.tabs.onRemoved.addListener((tabId, removeInfo) => { console.log("tab closed"); }); browser.windows.onRemoved.addListener(function(windowid) { console.log("window closed") }) windows.onRemoved seems to work fine, but tabs.onRemoved seems to be working exactly like windows.onRemoved. I've tested it multiple times and every time without any hesitation, I don't get any "tab closed" in my console logs. But when I close the window, I get both messages above. Is this a bug? Is there something I'm missing? I'm using Safari v16.3
3
0
1.6k
Apr ’23
React-native iOS crash on startup
Hi all, I need help with the following crash log. Been stuck on this for 2 days now and can't figure it out. It happend after upgrading from React-native 0.63.3 to 0.69.3. Crash log I've read about adding: import 'react-native-gesture-handler', but I've already done that. It's in my index.js file (first rendered file), at the top. Any help is appreciated!
1
1
2.1k
Mar ’23
evaluateJavascript not able to run script containing string interpolation
Hi Everyone, I am integrating ace editor in swift using WKWebview and injecting JS in WKWebview using evaluateJavascript function and its returning an error saying "A JavaScript exception occurred". This is only happening when my JS script contains string interpolation. Please find the code below. let script = "var content = String.raw` <script>\n// String Interpolation\nfunction myInfo(fname, lname, country) {\n return `My name is ${fname} ${lname}. ${country} is my favorite country`; \n}\nconsole.log(myInfo(\"john\", \"doe\", \"India\"));\n</script>`; editor.setValue(content);" webview.evaluateJavaScript(script) { (response, error) in } Thanks for help in advance!
0
0
844
Mar ’23
Service worker behavior (clients urls)
My SPA uses PWA technologies handling service workers with Workbox. While knocking to SW clients with self.clients.matchAll({ type: 'window' }).then(...) and then trying to do actions with clients urls found out a strange difference between SW behavior in Safari and Chrome. In Chrome the client.url field always contains the current url of every tab whenever and wherever you check it. In Safari client.url field contains the entry url for every tab and never changes wherever you navigate the page (mean - the client of the SW). The behavior in Chrome seems to be more proper, cause if you want, for example, to refresh all tabs you aren't able to ensure user's data safety and your app provides bad users experience dropping them to other url. Could you please consider this case. Thank you.
0
2
737
Mar ’23
Issues with video feed (getUserMedia)
I have an iPhone 11 Pro Max running iOS14.2 and find that getUserMedia does not work in all scenarios. I set up my video feed as follows: &#9;if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { &#9;&#9;throw new Error( &#9;&#9;&#9;'Browser API navigator.mediaDevices.getUserMedia not available'); &#9;} &#9;const video = document.getElementById('video'); &#9;const stream = await navigator.mediaDevices.getUserMedia({ &#9;&#9;'audio': false, &#9;&#9;'video': { &#9;&#9;&#9;facingMode: 'environment', &#9;&#9;&#9;// TODO: Currently set to window.innerWidth and innerHeight elsewhere? &#9;&#9;&#9;width: undefined, &#9;&#9;&#9;height: undefined &#9;&#9;}, &#9;}); &#9;// console.log(stream); &#9;video.srcObject = stream; &#9;return new Promise((resolve) => { &#9;&#9;video.onloadedmetadata = () => { &#9;&#9;&#9;resolve(video); &#9;&#9;}; &#9;}); } const loadVideo = async () => { &#9;const video = await setupCamera(); &#9;video.play(); &#9;return video; } My HTML is: <canvas id="videocanvas" width="100%" height="100%"> </canvas> <video id="video" &#9;&#9;&#9; autoplay &#9;&#9;&#9; playsinline &#9;&#9;&#9; muted &#9;&#9;&#9; style="display:none" &#9;&#9;&#9; width='100%'> </video> I'm using three.js to render a video texture, but also find this problem is demonstrable without this (see the Tensorflow PoseNet demo here https://github.com/tensorflow/tfjs-models/tree/master/posenet). The error displayed in the Javascript console for all of these is: [Error] A MediaStreamTrack ended due to a capture failure [Error] Unhandled Promise Rejection: Error: The video element has not loaded data yet. Please wait for `loadeddata` event on the <video> element. However, the BlazeFace demo works (see https://github.com/tensorflow/tfjs-models/tree/master/blazeface) yet appears to function in exactly the same way as the PoseNet code. I've tested this on 2 different iPhone 11s and an iPhone 12 mini with the same issues. All of the above code works on iOS 13.5 on an iPhone X without any issues. What has changed here between iOS 13.5 and iOS 14?
1
0
3.3k
Mar ’23
PWA vs Ionic Application vs Wrapped website in Ionic application
Hey, I read the guidelines of the App Store and saw that repackaged website will be declined. Buts, an ionic application is basically a wrapped website and PWA as well. So I don't really understand the guidelines. Is there someone or somewhere I cam message to ask and get a formal answer? Thanks in a advance.
Replies
1
Boosts
0
Views
1.1k
Activity
Jun ’23
Location Alert does not open in PWA
I'm facing the same issue posted here however there is no feedback/outcome on this issue.. can some one confirm if it is a bug or not? https://developer.apple.com/forums/thread/694999
Replies
0
Boosts
0
Views
615
Activity
Jun ’23
Location Alert does not open in PWA
Hi guys, I have built a PWA that calls the javascript API navigator.geolocation.getCurrentPosition which prompts the user for location access when the Safari permission is set to Ask. This is the correct behavior and works as expected when open in Safari. However when added to the Home Screen and running with a display mode of "standalone", the location alert does not open on my phone (iPhone 13 mini / iOS 15.1.1). And the call never times out. Then if I switch from the PWA to Safari the location alert / prompt is suddenly showing in Safari. So it seems that the alert is targeting the wrong "tab". This does not happen if the PWA display mode is "browser" or "mimimal-ui" with either of those it behaves normally. I can only replicate this on my phone (iPhone 13 mini / iOS 15.1.1). I have also tested on various older phones (15.1.1 and 14.7) as well as several emulators and they all behave as expected. It is possible this is a obscure setting on my phone but it does feel a lot like an iOS Safari bug.
Replies
4
Boosts
3
Views
3.6k
Activity
Jun ’23
localhost not working only on safari browser
We use a custom local host url like "localapplications.example.com:8080". When we run the server on local, it is not working in safari. Working fine on chrome. Any reason why this could be happening?
Replies
0
Boosts
0
Views
1.1k
Activity
May ’23
How do I receive APNS silent push message payload in a web page on safari
I am trying to implement Safari Web Push using the document to setup APNS and receive silent push messages on a react app on Safari browser. At this point, I have added an endpoint to get push packages on calling window.safari.requestPermission. This prompts the user to enable notification and grants the permission and returns with a device token. I have a server-side node script implemented using node-apn to send a silent push message to the client using a device token. The send function resolves with a successful response. Sample message packet that I am sending via APNS: { "aps": { "content-available": 1 }, "customData": "custom data", "topic": "web.push.ID" } I am expecting the payload to be delivered to the client through an event. I am trying this with the below function on the web page. window.addEventListener('push', function (event) { if (event && event.push) { const payload = event.push; console.log('safari received payload in window.addEventListener:', payload); } }); However, I do not see any message coming to the client. Can someone please point me to what I am missing here? Thanks a lot for your help in advance.
Replies
0
Boosts
0
Views
831
Activity
May ’23
In safari on IOS16 or later, simultaneous presses of "a" and "meta" are not caught when a keydown type event listener is set in JavaScript.
We have confirmed the title issue on iPads with at least IOS16 or later. window.addEventListener('keydown', e => { e.preventDefault(); e.stopPropagation(); console.log(JSON.stringify(e, ['key', 'altKey', 'ctrlKey', 'shiftKey', 'metaKey'])); }) When a key is pressed in the above code, the console outputs what is being pressed now. However, when the meta key is pressed, "a" does not respond. In addition to this, all other key pairs in the shortcut list displayed by long-pressing "command" do not respond. Is there any way to work around this problem?
Replies
1
Boosts
0
Views
769
Activity
May ’23
Emojis corrupted on iOS when using negation with unicode character class escapes
I'm using regular expressions to remove non-latin and non-emoji characters from strings. As Unicode character class escapes (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape) are now widely supported, I used them to simplify my expressions. const regex = new RegExp('[^(\\d\\s\\p{Script=Latin}\\p{gc=Punctuation}\\p{Extended_Pictographic})]+', 'gui'); function removeUnsupportedChars(txt: string) { return txt.replace(this.characterEx, ''); } This works on PC and on Android. However, on iOS, when using this regular expression, emojis get corrupted and shown as squares. I created a minimal CodePen https://codepen.io/lizozom-the-sans/pen/GRYxOzp where the scenario is reproduced with a simplified regex and it seems like on iOS any usage of negation on the Extended_Pictographic class (or any of the other emoji classes) leads to their corruption. Is this a known issue on iOS? Any known workarounds (other than using explicit emoji lists)?
Replies
0
Boosts
0
Views
902
Activity
May ’23
App crashing on initial load
My iOS app is crashing on the initial load. It's happening both in my Testflight build and also in the production version of the app on the App Store. It was working fine a few days ago; this just started happening all of a sudden. What's strange is that after doing a fresh install, it doesn't happen the first time I open the app. It only happens after I force close the app and open it again (and every time afterward). I'm using Expo and React Native to build the app. I've attached a crash log. crash log - https://developer.apple.com/forums/content/attachment/6a5962a1-56ac-44b0-8ec4-4e8dee0daee8
Replies
3
Boosts
0
Views
5.7k
Activity
Apr ’23
Help to integrate in app purchase to webtonative
I need you to add Java script code to my Wordpress website so it will integrate with in app purchase of apple developer tool. I send you instructions https://docs.webtonative.com/javascript-apis/in-app-purchase-ios-integration
Replies
1
Boosts
0
Views
994
Activity
Apr ’23
IOS 16.4 beta 2 PWA Push notifications
Hello everyone! I'm trying to test push notifications for PWA, but when I request permission via JS I catch 'Permissions denied'. Notification.requestPermission(result => { console.log(result) if (result === 'granted') { alert('Permissions granted') } else { alert('Permissions denied') } }); Is it available to get permissions for IOS? It works properly with android and mac. Does anyone know what am I missing, or what is wrong?
Replies
4
Boosts
4
Views
7.8k
Activity
Apr ’23
Safari: ajax call to localhost blocked
We have a web application that needs to interact with local hardware (a smartcard). We have developed an app running on localhost that interact with hardware and exposes some services. The web application is exposed in https and calls services on lcalhost in http (we can't have a valid certificate for localhost). Safari blocks the call with this error in the console: XMLHttpRequest cannot load http://127.0.0.1:58666/status due to access control checks. All other major browsers (Chrome, FireFox, Edge) work without problems. Some references: https://stackoverflow.com/questions/66689081/localhost-http-accessed-from-https-webpage-why-no-mixed-content-error https://bugs.webkit.org/show_bug.cgi?id=171934 Is there a workaround to let Safari do the call? Do you have an alternative solution?
Replies
0
Boosts
0
Views
1.6k
Activity
Apr ’23
browser.tabs.onRemoved.addListener not functioning correctly
I'm creating a safari extension where if a tab/window is closed, I need it to do some background cleaning, for example removing the local storage data. I tried the following lines in my background.js: browser.tabs.onRemoved.addListener((tabId, removeInfo) => { console.log("tab closed"); }); browser.windows.onRemoved.addListener(function(windowid) { console.log("window closed") }) windows.onRemoved seems to work fine, but tabs.onRemoved seems to be working exactly like windows.onRemoved. I've tested it multiple times and every time without any hesitation, I don't get any "tab closed" in my console logs. But when I close the window, I get both messages above. Is this a bug? Is there something I'm missing? I'm using Safari v16.3
Replies
3
Boosts
0
Views
1.6k
Activity
Apr ’23
Does Apple convert HEIC images to JPEG automatically when uploading
Hello, I'm web developer and I'm trying to place uploaded images on a map with the EXIF data (GPS coordinnates). The problem is that on iPhone, HEIC/HEIF images are directly converted to JPEG on upload and EXIF metadata are not retrieved. There is a workaround to this ? Thanks in advance.
Replies
0
Boosts
0
Views
680
Activity
Apr ’23
React-native iOS crash on startup
Hi all, I need help with the following crash log. Been stuck on this for 2 days now and can't figure it out. It happend after upgrading from React-native 0.63.3 to 0.69.3. Crash log I've read about adding: import 'react-native-gesture-handler', but I've already done that. It's in my index.js file (first rendered file), at the top. Any help is appreciated!
Replies
1
Boosts
1
Views
2.1k
Activity
Mar ’23
evaluateJavascript not able to run script containing string interpolation
Hi Everyone, I am integrating ace editor in swift using WKWebview and injecting JS in WKWebview using evaluateJavascript function and its returning an error saying "A JavaScript exception occurred". This is only happening when my JS script contains string interpolation. Please find the code below. let script = "var content = String.raw` <script>\n// String Interpolation\nfunction myInfo(fname, lname, country) {\n return `My name is ${fname} ${lname}. ${country} is my favorite country`; \n}\nconsole.log(myInfo(\"john\", \"doe\", \"India\"));\n</script>`; editor.setValue(content);" webview.evaluateJavaScript(script) { (response, error) in } Thanks for help in advance!
Replies
0
Boosts
0
Views
844
Activity
Mar ’23
Service worker behavior (clients urls)
My SPA uses PWA technologies handling service workers with Workbox. While knocking to SW clients with self.clients.matchAll({ type: 'window' }).then(...) and then trying to do actions with clients urls found out a strange difference between SW behavior in Safari and Chrome. In Chrome the client.url field always contains the current url of every tab whenever and wherever you check it. In Safari client.url field contains the entry url for every tab and never changes wherever you navigate the page (mean - the client of the SW). The behavior in Chrome seems to be more proper, cause if you want, for example, to refresh all tabs you aren't able to ensure user's data safety and your app provides bad users experience dropping them to other url. Could you please consider this case. Thank you.
Replies
0
Boosts
2
Views
737
Activity
Mar ’23
Issues with video feed (getUserMedia)
I have an iPhone 11 Pro Max running iOS14.2 and find that getUserMedia does not work in all scenarios. I set up my video feed as follows: &#9;if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { &#9;&#9;throw new Error( &#9;&#9;&#9;'Browser API navigator.mediaDevices.getUserMedia not available'); &#9;} &#9;const video = document.getElementById('video'); &#9;const stream = await navigator.mediaDevices.getUserMedia({ &#9;&#9;'audio': false, &#9;&#9;'video': { &#9;&#9;&#9;facingMode: 'environment', &#9;&#9;&#9;// TODO: Currently set to window.innerWidth and innerHeight elsewhere? &#9;&#9;&#9;width: undefined, &#9;&#9;&#9;height: undefined &#9;&#9;}, &#9;}); &#9;// console.log(stream); &#9;video.srcObject = stream; &#9;return new Promise((resolve) => { &#9;&#9;video.onloadedmetadata = () => { &#9;&#9;&#9;resolve(video); &#9;&#9;}; &#9;}); } const loadVideo = async () => { &#9;const video = await setupCamera(); &#9;video.play(); &#9;return video; } My HTML is: <canvas id="videocanvas" width="100%" height="100%"> </canvas> <video id="video" &#9;&#9;&#9; autoplay &#9;&#9;&#9; playsinline &#9;&#9;&#9; muted &#9;&#9;&#9; style="display:none" &#9;&#9;&#9; width='100%'> </video> I'm using three.js to render a video texture, but also find this problem is demonstrable without this (see the Tensorflow PoseNet demo here https://github.com/tensorflow/tfjs-models/tree/master/posenet). The error displayed in the Javascript console for all of these is: [Error] A MediaStreamTrack ended due to a capture failure [Error] Unhandled Promise Rejection: Error: The video element has not loaded data yet. Please wait for `loadeddata` event on the <video> element. However, the BlazeFace demo works (see https://github.com/tensorflow/tfjs-models/tree/master/blazeface) yet appears to function in exactly the same way as the PoseNet code. I've tested this on 2 different iPhone 11s and an iPhone 12 mini with the same issues. All of the above code works on iOS 13.5 on an iPhone X without any issues. What has changed here between iOS 13.5 and iOS 14?
Replies
1
Boosts
0
Views
3.3k
Activity
Mar ’23
Java on Xcode
I need a step by step how to use Java on Xcode and if I can't how can I use it on other platforms
Replies
1
Boosts
0
Views
675
Activity
Mar ’23
HCE on the new IOS
Hi I am developing an iOS app where I want the iPhone to act as an NFC tag from where the NFC reader can obtain the users information which is stored on the tag (Like an access card). Does the new iOS support HCE? How can I achieve this?
Replies
4
Boosts
0
Views
2.0k
Activity
Feb ’23
Is supportedNetworks on creating_an_apple_pay_session
Hi Team, Is the supportedNetworks on Create apple pay session a ordered list of networks to show to the user ? Ref : Creating an Apple Pay Session | Apple Developer Documentation Thanks Manish
Replies
0
Boosts
0
Views
529
Activity
Feb ’23