Detect unlock screen using Javascript on website - javascript

I'm trying to find out answer to my problem, but Google and other sites can't help me.
I'm building mobile website and I need redirect to homepage where browser is reactivated (unlock screen or open from minimalized). Is it possible?
Thanks a lot

Maybe you can do something with window.onunload event

No in short,
There is no specified way to detect a lock screen as such there is nothing in HTML / Javascript.
However you could use PhoneGap and create a mobile application,
I have a class to make events in PhoneGap easy
then you can use Application paused if you still want your application to only work online you can use an AJAX loader to load the content as using PhoneGap dose not hit the Cross-Origin domain policies of JavaScript normally
This i think is the only alternative you can use and it would require quite a bit of work to make your site become a mobile application.
EDIT:
Sorry a bit of Detail. PhoneGap allows you to build mobile applications HTML, CSS & JavaScript and provides some new events into JavaScript to help with mobile applications as well as the ability to call upon the hardware of a phone you can find more out at
http://phonegap.com/
Another Thought:
Thanks to #jeroenk for this idea it just came to me after reading his you might be able to do a little hack fix.
on your page
window.timestamp = Math.round(new Date().getTime()/1000);
setInterval(4000, function(){
var curTime = Math.round(new Date().getTime()/1000);
if(curTime > window.timestamp+5){
// do redirect
}
window.timestamp = Math.round(new Date().getTime()/1000);
});
I'm not 100% but i think Javascript gets halted when the browser on a mobile is not open, so lock screen on minimized so the above will check every 4 seconds that the Javascript has not become out of sink in (allowing for 1 second extra in case there is an application lag it would take some one more than 1 second to get though lock screen unless it was the user using the phone so it was not put down)
As i say this is a thought it might not work.

Related

Trying to speed up load time on my website

I am in the process of trying to speed up my HTML website and the first thing I have done is to reduce the images to the exact size that they are loaded into.
My PageSpeed Insight for desktop is 90 which I am very happy with but for mobile, it is 24, which isn't so good (was 19 before I did the images)! It says that I can save 4 seconds if I "remove unused JavaScript" but I haven't added any JavaScript to my website yet (only just taught myself HTML and CSS so moving onto JavaScript soon).
So I am wondering what this unused JavaScript is and how I can remove it if I wasn't the one to add it in there in the first place. Any other tips on how to speed up the website will be much appreciated!
Thank you!
If by "speed up the page" you mean improve the performances of your website:
Changing the dimension of images don't necessary mean that they are "optimized for the web". You can find tools like https://optimage.app/ and information on the web on how to compress them.
You can use the inspector of your browser (Right-click on the page + Inspect) to do this :
Go to Network Tab, clear all logged requests then reload the page you will be able to see which requests are the most time-expensives and maybe do something about it.
Go to performance, start recording, reproduce the actions that you want to analyze
(You can zoom in and out in the timeline and click on the element to have more details)
Delete all Javascript from your website

LinkedIn App Browser Issues: Background Video and Animations

When you open a website in LinkedIn's app (iOS), html5 background videos set to autoplay do not play, and animations do not fire unless you stop scrolling. So, it often looks like there is a bunch of empty space when you use fade and slide animations.
Here are a few examples (you must view within LinkedIn's app to see the issue)...
Background video
https://jobs.netflix.com/
https://thelovinggroup.com/ (also has animation issues)
Animations
https://voidwatches.com/
http://www.clearmotion.com/
Any thoughts on how to tackle this issue until LinkedIn builds a better browser?
I've looked into browser detection as a possible solution. Thinking maybe I could do an if/else statement to check if it's a common browser (Chrome, Safari, Firefox, etc.), else do something else with those videos and animations.
But everything I've read for browser detection strongly recommends against using it unless you absolutely have to (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent).
Any thoughts would be very much appreciated!
UPDATE
Ok, so I've implemented the code from this Github project to detect UIWebView: https://github.com/simpleweb/UIWebView-Detect
And it works well! However, I really need to differentiate between LinkedIn and other apps with WebView because LinkedIn is the only one with these issues.
I used Udger's parser (based on what I found in another Stack Overflow post): https://udger.com/resources/online-parser
And I can see that Facebook has its own browser, but LinkedIn seems to be using some version of Safari.
I feel like I'm starting to get closer, but I'm still not sure I've come up with a solid solution.

Fullscreen API without mouseclick or keydown event

For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});

White screen when changing URL - Phonegap v3

Looking around I don't expect anybody to be able to help with this.
I'm using phonegap v 3.3.0 and building an android app. Everything works perfectly so long as i don't try to navigate to any url's directly. I believe this might have something to do with the iframe loading internally.
If i use weinre directly I can confirm its with any url change:
window.location.href = "/#home";
If this is run then it will display the white screen along with any links I click internally in the app.
No sooner had I clicked Add question that I realised that the answer was in the question.
Its using an iFrame and after learning from the images that everything needs to be relative it dawned on me.
window.location.href = "/#home";
Will go to the root of the device, which there are no websites.
So you need a reletive path, easiest way when you're navigating using #'s is to use
window.location.href = "#home";

How do I prompt iPhone/iPad visitors to install native app?

I've visited a few sites on my iPhone/iPad which have prompted me to install the native app the first time I've visited the site. Is there a standard script somewhere that people use for this or should I just create my own? This must have been thousands of times before but despite endless googling I can't find a 'stock' script I can use. Ideally it should use cookies so the user doesn't get prompted more than once a month or so.
Apple have actually got a built in way of doing this relatively unobtrusively, which adds a "Smart App Banner" at the top of the browser if the app isn't already installed:
To add a Smart App Banner to your website, include the following meta tag in the head of each page where you'd like the banner to appear:
<meta name="apple-itunes-app" content="app-id=myAppStoreID">
For more options, please see the full documentation on Apple's site:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
This adds a nice looking banner to the top of the page, which can be dismissed by clicking a close button. Unlike a popup (alert box), it doesn't obscure the page too much or stall it from loading and goes directly to the app store page for your app when clicked. I think this is probably the best solution for most cases.
As it only involves adding one meta tag, it's also easier to implement than any other JavaScript based solution and there's no risk of it appearing on non iOS devices.
Caveat: Only works in Safari. Not Chrome etc.
I'll assume that they're checking if the device is iOS via the HTTP_USER_AGENT
<?php
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$droid = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
if ($iPod || $iPhone || $iPad){
// Display Prompt for iOS
} else if($droid){
// Display Prompt for Android
}

Categories