Can I make a html-website function as a background-program? - html

I have been working on a html-website lately. The website is a web-app made to measure time spent on a project and to map your efficiency per hour of the day.
I have tested this website while looking at the website, and it worked fine. It is that I have just recently added a part where it will map your time over the day, and since I had to wait for 5 minutes while the clock was passing a 5 minute treshhold, I figured that it would be efficient to do some other things while letting the clock do its thing.
Unfortunately I was kind of shocked to see that the clock had not changed even a millisecond, and that has to be because the js-interval was not continued when viewing a different chrome tab. Once I opened the clock it continued where it was left once I switched tabs.
Now my question is:
Is there a way to let the HTML-website run in the background, just like a background-application, so you can do other tasks while the website will continue it's interval?

Chrome manages to save resources from tabs which are in background, so when you call setTimeout or setInterval - it still runs but not more than 1 call in a second. So if your code tried to call setTimeout 1,000,000 times, you will wait next 1,000,000 seconds until all calls will be completed. And sometimes you don't realize, that some animation calls setTimeout many-many times for many animated objects :-)
The way of implementing what you need - is to abstract from timeouts and calculate time difference from last call.
Example:
let lastMesure = Date.now();
let workTime = 0;
setInterval(() => {
const now = Date.now();
workTime += (now - lastMeasure);
lastMeasure = now;
}, anyTimePeriod);
It will sleep most of the time when tab is in background, but when you switch back to the tab - first calculation will get you back to right value.

Related

Googlesheets check if last execution failed

I have a google sheet with a trigger that kicks off some code at 2 am each night.
sometimes the code fails due to various reason like network issue, or timing out because the site is busy and responses are slow (make numerous api calls)
I was thinking of putting in a code than runs based on a trigger every 15 minutes, to see if the last execution failed, then run my code again.
Been googling and search stackoverflow, but can't find a starting point on how to achieve this.
Basically I want to know if the last execution (which I can see manually in the executions screen) has a failed or time-out status, if it does I'll kick off my code again.
Use exponential backoff. You may want to try the exponentialBackoff_() function, like this:
function myFunctionThatRunsOnATrigger() {
exponentialBackoff_(myFunctionThatSometimesFails);
}
function myFunctionThatSometimesFails() {
//...
}

Read/Write from Sheets is suddenly incredibly slow

I have a large script project that I've been working on for a couple of years that our company is using to track production in a manufacturing environment. Typically, the doGet function that loads the web interface for the tracking tool will execute in 5-15 seconds and is very snappy and responsive. However, since yesterday morning that function is taking 60-90 seconds per execution, and occasionally the web app doesn't open at all (even though I don't get a failure in the log for the doGet function). I've been out of vacation since last week and I'm the only developer with access to the code, so nothing in the code base has changed, and the underlying data in a Google sheet doesn't seem to have had any major shifts either.
I've narrowed things down to see that the reads/writes from/to Google Sheets is the main source of the slow down. I'm reading the data in a batch with getValues(), but a single call to that function on the ~850 rows x 9 columns is now taking almost 20 seconds, where the doGet function (which includes 3-4 getValues calls) ran in less than that as of a few days ago.
I'm completely at a loss for how to debug this issue. Here are a few lines of code from the beginning of my doGet function if it helps. There is more to the function than this, but I can look at the time stamps on the Logger statements to tell that this getValues is running way too slow.
var ss = SpreadsheetApp.openById("SPREADSHEETIDHERE");
var pst = ss.getSheetByName("Panel Status Tracker");
Logger.log("Start Panel Data Get")
var panelData = pst.getRange(9, 1, pst.getLastRow()-8, 8).getValues();
Logger.log("End Panel Data Get")
TIA!
These symptoms would usually suggest that the number of rows in the sheet has increased. Remove any unneeded blank rows at the bottom of the sheet and see if that helps.
If blank rows keep reappearing, chances are that you have a erroneous array formula somewhere in the sheet that causes runaway expansion.
Try adding console.time('sec1') and console.timeEnd('sec1') at various sections of your code to figure out which section takes the most time. If you figure out the section of code, try figuring out the exact line by adding subsections within that section.
console.time()

Web page is really slow in Chrome when inspector is open but *not* profiling

In my Angular application, after introducing some more heavy usage of ngxs, I see my application has been come very slow when the inspector is open, but not when the profiler is running.
This has made it a little hard to figure out what's going on, but using the old conosle.profile method (adding an entry to Chrome's old profiler), I've narrowed it down a little - but I'm not at all more informed now than I was - just more confused.
So here's to hoping someone here can help me out!
I have some screenshots from the profiling to share, but unfortunately not much else.
First, a screenshot from the profile chart:
As you can see, there's a looooong time, where apparently nothing is really happening. Note in the console, that the bottom method (startObserving) only takes .12ms (according to console.time)
Going up the tree a few steps, we find Handsontable - this is what the function looks like, and some timings associated:
function Handsontable(rootElement, userSettings) {
console.time('Handsontable total time');
console.time('Handsontable create instance');
var instance = new _core2.default(rootElement, userSettings || {}, _rootInstance.rootInstanceSymbol);
console.timeEnd('Handsontable create instance');
console.time('Handsontable init instance');
instance.init();
console.timeEnd('Handsontable init instance');
console.timeEnd('Handsontable total time');
return instance;
}
// Timer outputs:
// This looks OK
Handsontable create instance: 10.864990234375ms
// Also this
Handsontable init instance: 1462.807861328125ms
// Wow, what??
Handsontable total time: 52664.875ms
It looks like the 2 methods called in the Handsontable constructor/function have a total run-time of <1500ms, but the total execution time is more than 52 seconds.
What in the world can be happening in those ~50 seconds of - as I see it - idle time?
Any help is really welcome, hints, suggestions, help to better debug!
Note: In Firefox, this is not an issue. I've tried in Chromium 67, 68 and 69 too - same issue. It's a problem in Chrome across all platforms (tested in Windows 10, Ubuntu 16,17 and MacOS latest-1,latest)

Fire WinRT Background Task Once Every Night?

I've a background task for my universal app with a TimeTrigger. It works fine, but the TimeTrigger class only has a freshnessTime for reoccuring tasks. I would prefer if the background task was executed once sometime at night. Is that possible somehow? I've search around as good as I can without finding anything, but perhaps I missed something. For now I'm setting freshnessTime to 720 (60*12) to have it execute twice a day:
var builder = new BackgroundTaskBuilder {Name = TASK_NAME, TaskEntryPoint = TASK_ENTRY};
builder.SetTrigger(new TimeTrigger(720, false));
var registration = builder.Register();
Seems that the best way to do this is to run the tasks the background is supposed to do (like updating a live tile) when your app is loaded/running and then do time-triggers twice per day as the code example in the question shows.

Page Speed testing timers

Im currently working on an integration where the external service returns json strings.
Some of the strings are quite long, and im just wondering if anyone knows of a plugin that can be used to count down how long a total request takes.
I know i could run a timer on the server to monitor how long the request takes, but what im hoping to see is if there is a way to time the entire experience within a browser so I can see how long it takes to request content and display the end result (the webpage) to a user ?
thanks in advance
As pointed out, you can use the Network tab of Developer Tools to see the timeline, from which you can check the request times and data size of any requested resource within the lifetime of your page.
Alternatively, if what you mean is that you need to have access to the time from within your code, you can measure the time between issuing the request and receiving the response. Something like this should suffice.
var start = Date.now();
http.request(resourceUrl, function(data) {
var stop, duration;
stop = Date.now();
duration = stop - start;
// duration of request in ms
doSomething(data);
});