Currently I'm trying to build a web app using the Samsung Tab A. I thought this device would support Service Workers, cause following Can I Use says Chrome for Android 55 is required to run SW.
The tablet is running Android 6.0.1 (no more updates available) and Chrome 55.0.2, but unfortunately when the code shown below runs, the 'no sw' alert pops up.. The SW works fine in Chrome on desktop (mac OS).
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then((registration) => {
alert('sw');
console.log('ServiceWorker successful, scope: ', registration.scope);
}).catch((err) => {
alert('no sw');
console.log('ServiceWorker failed: ', err);
});
}
Am I doing something wrong, or is it not possible to run SW on this kind of tablet? What else is needed if Chrome 55 isn't enough? I think there is some lack of information about this topic since I can't find the answer on this .. :(
Thanks in advance!
EDIT: I'd already enable multiple flags via chrome://flags without any success..
I was using ngrok to serve my webapp locally to my tablet. Did forget to use https..
Go to chrome://flags and add the url like http://localhost:3000/ to the unsafe input
if you don't know just follow the picture bellow.
https://i.ibb.co/Tvwv6VN/Screenshot-20220727-223110.jpg
after this re launch your chrome or any browser.
Related
I want to implement push notifications for my domain on desktop and mobile. On desktop everything works as expected and I'm able to send pushes from my server to the test devices.
On Chrome for Android, I'm not even able to register the service worker. I have tested the following code on OnePlus 3 and Huawei Mate 9 which are recent and powerful devices and I actually receive web notifications on them.
This is the code I use:
<script type="text/javascript">
if('serviceWorker' in navigator && 'PushManager' in window) {
alert('best');
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
alert('test');
});
});
}
</script>
The first alert pops so the browser supports service workers and push notifications. The second one for some reason doesn't pop on mobile chrome but works on desktop chrome! Am I missing something?
The code resides on a page called test.php
Thanks!
change "./sw.js". Because if you dont use dot, it means located in root of your server
Try not using ./ before the file name and instead simply using the file name sw.js. I too was having the same issues, maybe this will help
I'm writing my web application on React/Redux. And I need to get user location with a help of Geolocation API. On desktop browsers everything works fine, but on mobile phones (checked out on Xiaomi Redmi Note 3 and iPhone 5s) it throws error code 1 - permission denied. And it doesn't requests any permissions to get the location.
Here's a test sample which I ran on my site:
componentDidMount() {
if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(position => {
alert(position.coords.latitude + ' ' + position.coords.longitude);
}, err => {
alert('ERROR: ' + err.code);
});
} else {
alert('Geolocation API is not supported!');
}
}
What's the solution of this problem?
Got the same Problem... Solved:
Check your phone permissions for sharing your location.
On iPhone:
Settings -> Location Services -> [your Browser]
https://support.apple.com/en-ca/HT203033
Added:
Chrome requires https for geolocation usage:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
I've got the solution. I'm using the Web Application Manifest and it needed to set the permission to use Geolocation API.
We just need to set an "required_features" option at manifest.webapp file:
{
"required_features": ["geolocation"]
}
Hope it will be useful for somebody ;)
As of the Year 2021, this still does not work.
This is the link in that error message.In case you're wondering, it talks about "prefer secure origins for powerful new features" and location is consider one of those powerful features.
To generate the above, update the error section as follows:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
// other
},
err => {
// include the "code" part
alert(`ERROR(${err.code}): ${err.message}`)
});
};
On desktop during development...It works because if you read from the above link you will note that localhost is considered a secure origin.
In fact, even the chrome link shared in #chrisheyn's answer above, there is a section "Does this affect local development?" and explains why this should work on locahost.
So how about Mobile during development?Notice that react serves the app over your network e.g. http://192.168.0.134:3000 and that is definitely not considered a "secure origin" at all.
This question "Can I detect at runtime if the geolocation was blocked because of not being on a secure context
" mentions that... Errors due to this secure-context issue will return a code of 1 which is a "Permission Denied Error".
What's the solution?
Until the react team updates how your mobile picks the app during development, there is absolutely nothing you can to solve this issue.
To use the HTML5 Geolocation API, you will need to run the app over HTTPS. This means push your app to the cloud/host (in order to test this feature) or if you can some manage to get this network url http://192.168.0.134:3000 to do https The latter option, i believe, is much harder but I'd be interested to know if someone pulls it off.
I have a Facebook JS SDK login flow here: https://web.triller.co/#/user/login
When the user taps the Facebook button, the following function is executed:
loginFacebook()
{
const fbPromise = new Promise((resolve, reject) => {
FB.login(resp => {
if (resp.authResponse)
{
resolve(resp.authResponse.accessToken);
}
else
{
console.log(resp);
reject(new Error('Facebook login canceled or failed.'));
}
});
});
return fbPromise
.then(accessToken => api.postJson('user/login_facebook', { accessToken }))
.then(this._handleLogin.bind(this));
}
Basically, it calls FB.login(), and expects to receive a valid resp.authResponse. Unfortunately, it doesn't, even after successfully authenticating on the Facebook popup/tab. Instead, we receive { authResponse: undefined, status: undefined } and the following error from the browser:
Unsafe JavaScript attempt to initiate navigation for frame with URL
'https://m.facebook.com/v2.8/dialog/oauth?foo=bar'
from frame with URL 'https://web.triller.co/#/user/login?_k=cmzdb6'.
The frame attempting navigation is neither same-origin with the
target, nor is it the target's parent or opener.
The error occurs immediately after authenticating within the Facebook popup/tab, and it only occurs on Android Chrome. Desktop Chrome (on a Mac) does not show the same error. Safari on iOS does not show the error, either.
Any thoughts on what's going on? Why the difference between Android Chrome and desktop Chrome? Could it have something to do with the hash in the URL?
In desktop this issue can be caused by XFINITY Constant Guard Protection Suite Chrome extension. Disble it and problem will be solved.
In Android, try removing XFINITY or similar security extensions or applications (Norton security antivirus).
https://developer.salesforce.com/forums/?id=906F00000008qKnIAI
I think it fails because of the m.facebook.com/... based on this https://en.wikipedia.org/wiki/Same-origin_policy#Origin_determination_rules (see the case for http://en.example.com/dir/other.html and why it fails). Although it shouldn't based on what I've done with the fb api this is weird, try making a cors request instead as a workaround?
This is a known issue here https://code.google.com/p/android/issues/detail?id=20254.
When the window.open is called without proper arguments, it will not be opened as expected.
It can be overcome by either updating the browser (for client, check the browser version and if old one, force them to update it).
Otherwise (not applicable for you since you can't change the FB function), pass the correct arguments to window.open
Interestingly I only seem to get this when I am using the mobile device simulator in Chrome.
Looking at the source code for the Facebook SDK there is the following line:
url: i.resolve(a.display == "touch" ? "m" : "www") + "/" + d.url,
Now "m" then becomes "m.facebook.com" whereas "www" becomes "www.facebook.com". So it's using a different URL based on whether or not it's touch.
Now they're the same domain anyway, and the connect API is loaded from facebook.net (not .com) so it's not as simple as just being a different domain. However I suspect the issue could be related to this.
In either case when not in mobile device testing mode I don't get the error.
I'm having problems getting Branch.io to work in a Cordova powered Android app. I have a landing page that parses the data from branch.io deep links and forwards the user to the correct page. My javascript for this page contains:
function onDeviceReady() {
console && console.log("Device Ready");
initBranch();
}
function initBranch() {
branch.init(<branchKey>, function(err, data) {
console && console.log("branch init error: " + err);
//then the parsing and forwarding follows - omitted here
}
I then created a Branch.io deep link to this landing page in the web api and tested it in chrome which works.
Then i tried to move to the Cordova app...
I followed this guide to prepare the app for branch.io:
https://dev.branch.io/recipes/quickstart_guide/cordova/ (I installed the plugin and adapted the Manifest file.)
But when i try to open the same link that worked in chrome on my Android device the app opens correctly and the landing page loads, but i'm not forwared. Instead i see the following error in logcat:
I/chromium(19382): [INFO:CONSOLE(22)] "Device Ready"
[...]
I/chromium(19382): [INFO:CONSOLE(29)] "branch init error: Error: API request /v1/open missing parameter device_fingerprint_id"
Can anyone tell me what i'm doing wrong? I'm just getting to know Cordova and Branch.io so it's probably something small i'm overlooking.
Thanks,
Lif
A colleague of mine figured it out:
Branch.io creates an entry branch_session in the local storage of the android device. On my device this session was corrupted somehow and the device_fingerprint_id was empty:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":null,"browser_fingerprint_id":null,"link":"<link>","data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
After clearing the local storage* the session was freshly created, and now looks like this:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":"118176839880411216","browser_fingerprint_id":null,"link":<link>,"data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
And now deep linking works.
Kr,
Lif
* To clear the local storage i used chrome://inspect --> inspect webview, go to resources tab, choose "local storage" and the the correct url, then remove all values.
I've created a simple WebSocket server and am trying to connect to it with the following code:
function test(name) {
var ws = new WebSocket('ws://localhost:1234');
ws.onopen = function () {
ws.send('Hello from ' + name);
}
}
test('Edge');
This works fine from Chrome and IE11 on Windows10 but when I try from Edge, the onopen function isn't called, instead I eventually get the following error:
SCRIPT12029: WebSocket Error: Network Error 12029, A connection with the server could not be established
This is happening for version 12.10240 of Edge.
A similar problem was asked about here but the error message is different.
Things I tried:
IP - localhost, 127.0.0.1, the actual IP
Allow localhost loopback flag - both on and off
When trying to communicate with a different machine the problem does not occur.
Is this a defect in Edge or am I doing something wrong?
I had a similar problem, but it was when actually navigating to pages in the browser. I could use the phrase localhost and it worked fine, but I didn't work when I used my machine's name. I found this forum where they suggested that you run the following command in a administrator prompt:
CheckNetIsolation LoopbackExempt -a -n=Microsoft.MicrosoftEdge_8wekyb3d8bbwe
Worked for me. Thought you might be seeing some form of the same issue.
As the forum suggests, you can now also do this by opening Edge and navigating to "about:flags", then tick "Allow localhost loopback (this might put your device at risk)" under "Developer Settings". Should feel a little safer than pasting random stuff into your command prompt.
Edit: As tresf pointed out below, the loopback checkbox in the about:flags appears to have stopped working (as a fix), so you'll have use the CheckNetIsolation command, to make Edge exempt.