My code works Firefox, Safari and MS Edge but doesn't work in Chrome - html

My code works Firefox, Safari and MS Edge but doesn't work in Chrome. (I try online my website. Doesn't work. is it possible my site ?)
HTML
<button onclick = "bildirim()" >Bildirim yolla</button>
JS
function bildirim () {
if (!("Notification" in window)) {
alert("Your browser does not support Web Notifications API");
}
else if (Notification.permission === "granted") {
var notification = new Notification('Bildirim', {
body: '',
icon: '',
});
setTimeout(function(){
notification.close();
}, 3000);
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === "granted") {
var notification = new Notification('', {
body: '',
icon: '',
});
setTimeout(function(){
notification.close();
}, 3000);
}
});
}
}
When I try offline, the button wants to open the permission. When I open it, it does not accept it and wants me to turn it back on. It keeps on going. Not send me notification.
When I upload html the web site, the button does not respond. The website does not even ask for permission. So I do not even get an error.
Chrome is up to date.
SOLVED
Chrome not working this code without SSL. So not work HTTP:// works HTTPS://.

Here are some observations regarding Notification in Chrome:
Notification doesn't work from local file (file://). If you have local webserver try putting it there and see it works or not. It worked for me.
When you have uploaded it on server, if its getting loaded in an iframe and the iframes domain is different than the main windows domain then it doesn't work if the domain of iframe is not already allowed for showing notification. For example: if you first check the example on https://developer.mozilla.org/en-US/docs/Web/API/notification, it doesn't work. But if you access the URL https://mdn.mozillademos.org/en-US/docs/Web/API/notification$samples/Example?revision=1326091 it asks for permission and once you allow, it works there as well as the previous link. Another example is https://davidwalsh.name/demo/notifications-api.php. Here it works because probably the iframe domain and top window domain are same.
I've seen working notifications on HTTPS sites only. I've not seen it from any HTTP site (except http://localhost). So that (HTTPS) could also be one of the requirements for notifications to work.
Unfortunately I've not found any links that document / confirm these observations.

Related

Chrome Browser Blank Image generated by html2canvas but works on Chrome Incognito Mode

My code to print an image using html2canvas is working on all browsers except Chrome. It even works on Chrome incognito mode but not in the normal Chrome browser.
Also for new users not using the print feature, it seems to be working on their normal Chrome browsers but older users using the feature are suddenly seeing a blank page. Is it some kind of cache issue?
After debugging I found that the canvas generated by html2canvas is capturing image of wrong dimension even when the entire DOM is loaded for my component.
here is my piece of code :
html2canvas(inputEl, {useCORS: true, allowTaint: false}).then(canvas => {
const [canvasHeight , canvasWidth] = [canvas.height, canvas.width];
const imgData = canvas.toDataURL("image/png");
let canvasImage = new Image();
canvasImage.onload = onCanvasLoad.bind(this, canvasImage, {...canvasOptions, pdfDocument, canvasHeight, canvasWidth});
canvasImage.src = imgData;
});
Settings CORs to true is also didn't help.
Even the example on the main site is not working - checked with https://html2canvas.hertzen.com/ -> bottom right corner - photo - capture.
The question also posted here - https://github.com/niklasvh/html2canvas/issues/2804
Please provide some pointers here.
Specifications:
html2canvas version tested with: 1.0.0-rc.7
Browser & version: Chrome - 97.0.4692.71 (Official Build) (x86_64)
The issue been resolved. Please follow the same thread - Click here
Adding the following changes helped me solve the issue:
function fnIgnoreElements(el) {
if (typeof el.shadowRoot == 'object' && el.shadowRoot !== null)
return true
}
html2canvas(document.querySelector("#capture"), { ignoreElements:
fnIgnoreElements }).then(canvas => {
document.body.appendChild(canvas)
});

How do I return the user to my TWA when pressing on a media notification?

I'm building an Android app that wraps my Progressive Web App as a Trusted Web Activity. (I'm following guidelines from Google's sample project.)
When the user plays audio in the app, a media notification appears on the device. I'm using the web Media Session API to customise the content of this notification.
If running the PWA in a normal web browser, once the notification appears, pressing it returns the user to the relevant browser tab. (If the phone is locked, the user is prompted to unlock.)
If the media notification is triggered from the TWA, pressing on it does nothing. (Other functionality such as play/pause works as expected.)
The Media Session API is fairly limited in scope. MediaSession action types do not include an action to focus the app.
navigator.mediaSession.setActionHandler('pause', () => {
audioElement.pause();
navigator.mediaSession.playbackState = 'paused';
});
navigator.mediaSession.setActionHandler('play', () => {
audioElement.play();
navigator.mediaSession.playbackState = 'playing';
});
navigator.mediaSession.metadata = new MediaMetadata({
title: 'App',
artist: 'Name',
artwork: [
{ src: '/android-chrome-192x192.png?v=47rE43RRzB', sizes: '192x192', type: 'image/png' },
{ src: '/android-chrome-512x512.png?v=47rE43RRzB', sizes: '512x512', type: 'image/png' },
],
});
When the media notification is trigged from the TWA, I expect the same functionality as when it is triggered from a web browser such as Chrome.
That includes the returning the user to the TWA (or prompting the user to unlock the device) when the notification is pressed anywhere except the play/pause control.
Everything else works except this aspect.
This was the default action in pwa and web, whenever someone clicks on notification media control, its takes to the website or pwa, but in twa its broken, its taking to the chrome browser but not focusing the app or website. I already raised ticket for the same on github

How to view the http type (http, https) within a web page via chrome browser?

How to view the http type (http, https) within a web page via chrome browser?
I need to view whether for example all images of a given websites page are using http or https using chrome browser, any ideas?
With jQuery :
jQuery("body img").each(function(index, el) {
var src = jQuery(this).attr('src');
if (src.indexOf("https") >= 0){
console.log('img in https');
}else{
console.log('not https');
}
});

HTML5 Geolocation doesn't ask for permission and doesn't work on Samsung S3

Using the standard HTML5 geolocation code, I am able to access the geolocation on desktop browsers (Chrome, Firefox), but not on my Samsung Galaxy S3 (default browser, Chrome). In the default browser, nothing at all happens. In Chrome, the yellow permissions form pops up at the bottom but then pops down too quickly to press anything. I have checked that Location is enabled in Settings. I am considering looking for a PHP solution as a backup for cases when JavaScript/HTML5 solution breaks down like this, but would prefer that the JavaScript solution be more robust.
Has anyone come across this and fixed it? Any ideas?
For reference, the "standard" HTML5 geolocation code I'm referring to is this (sample code from: Basic Geolocation in HTML5):
<script type="text/javascript">
if( navigator.geolocation )
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
alert("Sorry, your browser does not support geolocation services.");
}
function success(position)
{
// GeoPosition Object
alert("Your coordinates are " + position.latitude + ", " + position.longitude);
}
function fail()
{
// Could not obtain location
}
</script>
Odd. I did 3 things and now it works in both phone browsers (default and chrome)
I put the main code in a function that is called in <body onload="">
I restarted my phone
I turned off power saving mode
I suspect the restart did the most for it, since I was seeing the permission pop up flash across the screen in chrome.

websocket constantly disconnecting

I've been trying to make a websocket chat room that runs in-browser. I've done a bit of googling around and have found a website that provides an example websocket connection (www.websocket.org/echo.html). But whenever I try their "connect" button, it says "disconnected" straight away, and I cannot send a message (this only occurs on Chrome). So I tried it on Firefox, and it says "Error: undefined" and then "disconnected". Both browsers support websocket technology.
So I went to another website (http://www.tutorialspoint.com/html5/html5_websocket.htm) and copied there example code, saved it as ".html" and ran it in chrome. It cannot connect to the websocket. Instead, it says "disconnected".
QUESTION: Why can I not connect to a websocket/why does it keep disconnecting? My Chrome version is 21.0.1180.60.
For further reference, here is my code so far (NOTE: This only is supposed to connect and say that it has connected, not actually chat):
<!doctype html>
<head>
<title>Testing</title>
</head>
<body>
<script type="text/javascript">
function confirm() {
if ("WebSocket" in window) {
alert("WebSocket is supported by your Browser!");
}
else {
alert("Your Browser does not support WebSocket Technology. Please update your Browser.");
}
}
function sendmessage() {
try {
var ws = new WebSocket("ws://(ip of other user/")
}
catch(err)
{
alert("Error with creating the WebSocket")
}
}
</script>
Run Ip Connector
</body>
</html>
Thanks for any help.
I just tested the Echo demo on http://websocket.org/echo, and it works fine using Chrome 21. Your other example seems to be working fine as well. You can check it out here.
Since you're using Chrome 21, you can use the Chrome Dev Tools to see if the WebSocket handshake is going through and whether you see any messages.
Is it possible that you're sitting behind a router/firewall that cuts off the traffic? Can you try WSS on websocket.org? (Enter wss://echo.websocket.org in the Location field.)