I'm attempting to implement PWA server-side detection by altering all links on a page to add a query parameter if in standalone mode. Like this:
if (window.matchMedia('(display-mode: standalone)').matches) {
// #todo: this code breaks ios app.
$('a').each(function() {
var href = $(this).attr('href');
href += (href.match(/\?/) ? '&' : '?') + 'mode=pwa';
$(this).attr('href', href);
});
}
This seems to work fine on Android devices, but for some reason, breaks JS on iOS devices. Does anyone know why this code doesn't work on iOS? Or is there a better way?
Thanks, Joe
To do this with cookies:
// JS side.
if (window.matchMedia('(display-mode: standalone)').matches) {
document.cookie = 'deviceMode=pwa';
}
else {
document.cookie = 'deviceMode=mobile';
}
// PHP Side.
if ($_COOKIE['deviceMode'] == 'pwa') {
// Do something.
}
elseif ($_COOKIE['deviceMode'] == 'mobile') {
// Do something else.
}
else {
// And something else.
}
Related
Im currently facing an issue where I am using the Facebook plugin v.7.1.0 for Unity. Im distributing through WebGL, but my app needs to be running both on Facebook, but also outside Facebook. When using FB.Init I get a successful callback, which is what I used to use for testing whether on Facebook canvas or not when deploying for WebPlayer.
So my question is, how do I detect whether the WebGL player is on the facebook canvas or not?
This solution is just posted for anyone who would like the same solution as I used.
The solution was to use a jslib plugin as described here http://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
var FacebookCanvasChecker = {
GetSite: function()
{
var url = document.URL;
var returnStr = "";
if (url.indexOf("apps.facebook.com") > -1)
returnStr = "facebook";
else
{
// try with referer
if(document.referrer)
{
url = document.referrer;
if (url.indexOf("apps.facebook.com") > -1)
returnStr = "facebook";
else
returnStr = url;
}
else
returnStr = url;
}
var buffer = _malloc(returnStr.length + 1);
writeStringToMemory(returnStr, buffer);
return buffer;
}
};
mergeInto(LibraryManager.library, FacebookCanvasChecker);
In Unity's WebGL, you can communicate with javascript. link
So, I call a javascript function to check current url by
C#
Application.ExternalCall("GetCurrentUrlType");
JS
function GetCurrentUrlType(){
var url = document.URL;
if (url.indexOf("apps.facebook.com") > -1)
SendMessage("GameObject", "CheckURL", "facebook");
}
Hope this help!!!
We are currently using the soundcloud API SDK for streaming and it does work on desktop but not 100% on mobile. (using responsive html. same api of course)
Sometime track is not lauch ? sometime it is.
I do not have specific error but on chrome network this line is show in red ??
http://api.soundcloud.com/tracks/146926142/stream?client_id=XXXXX
Redirect
We use a function to stream the track.
function streamTrack(id) {
var defer = $q.defer();
// Stream the track
SC.stream('/tracks/' + id, {
useHTML5Audio: false,
waitForWindowLoad: true,
onfinish: _scope.next,
whileplaying: function () {
var _this = this;
// Since we are in a callback, we need to tell angularJS to apply the change
if (timeout1) $timeout.cancel(timeout1);
timeout1 = $timeout(function () {
// Update the progress bar
_scope.progress = (_this.position / currentTrackDuration * 100) + '%';
_scope.timer = moment(_this.position).format('mm:ss');
$rootScope.$broadcast('trackRunning', { timerunning: _scope.timer });
});
}
}, function (sound) {
if (sound) {
defer.resolve(sound);
} else {
defer.reject();
}
});
return defer.promise;
}
If somebody has an idea pls.
Best Regards
Xavier
A Webview will display links in the content HTML as having blue underlines. So if you have something in the HTML like
blah blah
... it is clearly visible as a link.
The Webview also allows you to click on phone numbers and addresses (even if those are just text in the HTML, not links) to launch the Dialer or Maps.
How can one get Webview to display those (Linkify, probably) links with underlines etc? It's easy enough in a TextView since one can get the spans from a TextView and style them, but Webview doesn't expose any way to retrieve that data... at least not that I can see looking through the docs.
Here is some JS code which can be injected to linkify phone numbers, emails and urls:
function linkify() {
linkifyTexts(linkifyPhoneNumbers);
linkifyTexts(linkifyEmails);
linkifyTexts(linkifyWebAddresses1);
linkifyTexts(linkifyWebAddresses2);
}
function linkifyPhoneNumbers(text) {
text = text.replace(/\b\+?[0-9\-]+\*?\b/g, '$&');
return text;
}
function linkifyEmails(text) {
text = text.replace(/(\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim, '$1');
return text;
}
function linkifyWebAddresses1(text) {
text = text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim, '$1');
return text;
}
function linkifyWebAddresses2(text) {
text = text.replace(/(^|[^\/])(www\.[\S]+(\b|$))/gim, '$1$2');
return text;
}
var linkifyTexts = function(replaceFunc)
{
var tNodes = [];
getTextNodes(document.body,false,tNodes,false);
var l = tNodes.length;
while(l--)
{
wrapNode(tNodes[l], replaceFunc);
}
}
function getTextNodes(node, includeWhitespaceNodes,textNodes,match) {
if (node.nodeType == 3) {
if (includeWhitespaceNodes || !/^\s*$/.test(node.nodeValue)) {
if(match){
if(match.test(node.nodeValue))
textNodes.push(node);
}
else {
textNodes.push(node);
}
}
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
var subnode = node.childNodes[i];
if (subnode.nodeName != "A") {
getTextNodes(subnode,includeWhitespaceNodes,textNodes,match);
}
}
}
}
function wrapNode(n, replaceFunc) {
var temp = document.createElement('div');
if(n.data)
temp.innerHTML = replaceFunc(n.data);
else{
//whatever
}
while (temp.firstChild) {
n.parentNode.insertBefore(temp.firstChild,n);
}
n.parentNode.removeChild(n);
}
Given this:
http://code.google.com/p/android/issues/detail?id=742
it still doesn't seem to be a way to do this from Java directly. One thing that might work is to write some JavaScript code and run it after page is loaded, e.g. as given here:
In Android Webview, am I able to modify a webpage's DOM?
Here's an example of a similar thing:
Disabling links in android WebView
where the idea is to disable links. You may be able to use a similar approach to add some CSS, including underlining. A couple of other SOqs / links that might help:
Android: Injecting Javascript into a Webview outside the onPageFinished Event
Android: Injecting Javascript into a Webview outside the onPageFinished Event
http://iphoneincubator.com/blog/windows-views/how-to-inject-javascript-functions-into-a-uiwebview
Injecting Javascript into a Webview outside the onPageFinished Event (Using DatePicker to set a date on an input of a WebView)
Hope this helps.
Hey CodeWarriors, anyone know if on the iPhone in Mobile Safari whether there is a timeout for loading a certain amount of Javascripting/jQuery?? The moving background and the black covering over the heart are not working on the iPhone, but are solid on Firefox and my MacBook Pro's Safari – they don't load:
http://www.zookeeper.com/beyourowncreature/2011
Still working on some things on this site before it launches...
Thanks in advance if you have any ideas.
-Dave
All I can see is an error in your jquery.spritely on line 268, 1st line in the window.Touch clause. el[0] does not exist
activeOnClick: function() {
// make this the active script if clicked...
var el = $(this);
if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
el[0].ontouchstart = function(e) {
$._spritely.activeSprite = el;
};
} else {
el.click(function(e) {
$._spritely.activeSprite = el;
});
}
return this;
},
And as the previous comment says, you have and unmatched tag
Know if it's possible to access the iPhone compass in Safari using JavaScript? I see how the GPS can be accessed, but I can't figure out the compass.
On iOS, you can retrieve the compass value like this.
window.addEventListener('deviceorientation', function(e) {
console.log( e.webkitCompassHeading );
}, false);
For more informations, read the Apple DeviceOrientationEvent documentation.
Hope this helps.
You cannot access that information via javascript, unless you're using something like iPhoneGap
At the time this was true, in iOS 5 you can use the compass heading in JS. https://developer.apple.com/documentation/webkitjs/deviceorientationevent/1804777-webkitcompassheading
For Android it works auto, for iOS it needs to be clicked to start it.
Here's a part of code you can use for that
startBtn.addEventListener("click", startCompass);
function startCompass() {
if (isIOS) {
DeviceOrientationEvent.requestPermission()
.then((response) => {
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
} else {
window.addEventListener("deviceorientationabsolute", handler, true);
}
}
function handler(e) {
const degree = e.webkitCompassHeading || Math.abs(e.alpha - 360);
}
Full tutorial is here, try demo also
https://dev.to/orkhanjafarovr/real-compass-on-mobile-browsers-with-javascript-3emi
I advise you to use LeafletJS with this plugin
https://github.com/stefanocudini/leaflet-compass
very simple to use with events and methods.
You can try a demo here:
https://opengeo.tech/maps/leaflet-compass/