How to keep website's javascript timer enabled while iPhone is locked - javascript

When my website is opened in Safari and the iPhone is put into sleep mode, any javascript timers (window.setTimeout) are not executed any more.
Is there a way that these timers get executed even if the screen is locked? It would be sufficient if this happens only if Safari is the active app and the website is the active "tab" in the moment of locking.
I read that apps can prevent "deep sleep" mode by regularly playing a soud. Does this also apply to websites?

Simply change your logic so it doesn't require constant ticks. If it's a countdown timer you could simple store the date every tick and compare the previous date to the current one in each tick - even if you got no ticks for a long time you exactly know which time passed since the last tick.

Related

Ionic Capacitor - Timer in Background (iOS / Android)

Is it possible to run a timer in the background (in both iOS and Android) or will it be out of the app-guidelines (specifially on iOS). Right now I am having a meditation-timer-app and one of the most important things is that the time should keep on running while in background mode (if the phone display is black or the home screen is opened).
I am using an interval setInterval() - Method of 1000s to count down each second.
https://capacitorjs.com/docs/v2/apis/background-task#background-tasks says it may not be possible:
NOTE: On iOS setTimeout and setInterval won’t work once your app is in background, so don’t use them inside beforeExit.
So another idea that I would have would be to make a calendar event (for example for a Date that is 10 min in the future if you set the timer to 10mins).
Than it would be a scheduled timer event. If you reopen the app, the timer gets adapted to the calendar event.
Is this possible to wait for a specific date to happen? And how?
Do you have a better solution or can I just use the interval in the background somehow?
For my app this would be very important, since when meditating, you don't want to have the phone open. You want to start the timer and put the phone away.

how to get the idle time in JavaScript

I have a program which uses eventStart: new Date.getTime(); when the document is loaded and when user completes some section and click continue to go to next section I have setup the function to track the end time getting the eventEnd: new Date.getTime(); now I fall in to a unique situation to track the idle Time for so I can properly calculate the total time taken by the user to finish the section. Any help or documentation regarding this would be appreciated.
Thanks.
Depends on what you are calling idle time.
Check for user activity
You can use the mousemove event on the document.body and see if the user is interacting with the page at all. (I'd also check for tap and keyboard events, as users can scroll that way too.)
This can't, however, detect if the user is sitting there reading something without touching mouse or keyboard.
Is this tab the current one
There is a recommended API to see if the current window/tab is active, but that has limited support. There is a discussion here.

Does IE go into sleep mode?

I have this functionality built in Jquery/ javascript where a user is notified when their session is about to be timed out. Then they are given an option to extend it. If they don't make a choice the pop up closes itself and the browser is redirected to the login page. It worked perfectly fine for a while. But now I noticed it works correctly only if I am active on the computer. If the computer is left unattended for an entire day, the pop up does not begin the countdown until the user unlocks the computer and logs in again.
Is anybody aware of this behavior where ie stops executing javascript when the computer is left unattended for a long time?
Update: Is there a way to keep the tab from sleeping? Without that, the browser won't be able to redirect at the right time.
setTimeout only works when the tab is active. In some browsers even changing tab will make it stop counting. So not only if you are on the computer but if you're not on the specific page it might not work. Also on mobile devices with multitasking it's bound to fail, forget about tabs, applications often go to suspended mode.
Take a look at this question, it offers the same solution as Luka with a code example:
How can I make setInterval also work when a tab is inactive in Chrome?
You might want to do two checks on the time passed, one to check if you need to show the popup, and one to close the popup, using the total time passed instead of having a different count down.
i would suggest logging the current time when the page is loaded and then calling a function every 10 seconds of so that checks if the time passed is more than x amount, the reason your problem occurs is most likely because the default timeout function only counts down while the page is being rendered.

Play sound only in one window of which is active (within one website) using javascript (possibly jquery)

Alright, I've found a bunch of answers concerning native functions like window.onblur and window.onfocus... But they won't help so I'd like to be more specific
Say you open several tabs of one website
Say you receive a message and there's a sound to announce the message
As you have several tabs opened, you will hear the sound the number of opened tabs. Which makes a how'd'u'callit symphony
Best solutions I've found so far, but which don't work
1. window.onfocus and window.onblur
2. Play sound if var infocus evaluates to true, don't play if not
3. It is crossbrowser
4. It is simple
5. It does not work
Why the best solution won't work? Say you switch focus to another tab of a different website, your website loses focus so you won't hear the sound. Even worse, say you switch to another program, then the browser itsel loses focus and you won't hear the sound
So what shall I do?
You could save the timestamp of the last onFocus() event in a JavaScript variable and in a cookie (access set to your website root). Then when you want to play the alert sound, you compare the current values of the variable and the cookie and only play the sound if those two match.
Alright, two weeks after it seems like I've found the real solution. Which actually proves that if you want to do something, don't ask for help, just do it
This is what I did:
Create a cookie with a randon id and the current time (winid + t1). The cookie is created by each opened tab on loading.
document.cookie = 'winid='+winid+t1;
Create a function which will update the current time in the set cookie, say, every 3 seconds (I kindda don't like to overflow clients, so it's 3 secs not 1). If the function finds out that the winid in the cookie and the winid of the current tab don't match and 3 secs have elapsed, then the tab was closed, redefine the primary tab inside the same function.
window.setInterval(setwinid,3000);
This is it, every time you need to, say, play a sound, you should check first, whether it is the tab which is to play it
The trick is that each tab has its own winid. But only one winid is stored in cookie, is updated and thus allows the one tab to perform actions. Pretty simple. I actually started using this method for updating messages in the box across all tabs not only for playing music
One solution would be to have a server-side solution that would play the notification only once. You don't specify how the site receives the messages, but I assume it's some form of AJAX call that gets the message from the server and the messages are saved in a database.
Add a flag to the database that signifies that the message has been sent. Set the flag the first time the user's browser queries for new messages. On the page itself play the sound only if the flag has not been set, otherwise don't play the sound. Now only the first page that fetches the message will play the sound.

timer and button pressing at the same time with JavaScript

In my Web app, the user sees a countdown timer (that each second updates the number of minutes and seconds remaining) and can press "+1" and "-1" buttons to increment a total value. (The use case is counting the number of people who the user can see in the given number of minutes.)
I'm using setInterval but it's running into problems with the fact that there's only one execution thread: when the user presses the +1 and -1 buttons, it interrupts the timer and throws the display off.
On the desktop, perhaps a separate Flash movie for the timer display is a solution. Our users also use the Web app on iPads, so Flash isn't an option there. Any other suggestions? Could a PhoneGap wrapper allow for multiple threads?
Or what about WebWorkers? I guess the problem there is that the worker thread couldn't access the DOM to edit the timer display.

Categories

Resources