Send user location when application is in background not working properly - javascript

I have a problem about sending data (user location) when the application is in the background. I use react-native-background-fetch library to set background fetch when the app is in background. I get user location and send it to a server every 15 mins only when the location permission is 'Always'. I'm expecting to do that, but it's not really send the data. I notice that on iOS and Android, the data is sent only once, often not at all when the application is in the background. I would like to know if someone have any suggestions or proposals that could help me to achieve this? Thank you.
NB: I checked in XCode the Background Modes: Location updates and Background fetch and also added the necessary configurations in my Info.plist. For Android too, I make sure all configurations for the library are set up.

Related

How to set the microphone ask(default) for all the time in getUserMedia()?

I'm working on a project which is kind of speech-to-text. It has only a microphone option. Whatever you speak, it reads the input and shows you the converted text in the text area.
What I want is whenever I click on the stop button, it should turn off the permission allow to ask(default). Because it will only ask for the first time in https. So, how can we make it ask for permission all the time?
In HTTP it will ask all the time. Likewise, I want the same for https as well.
Please help.
I'm tired searching that piece of code which could do the job.
Thanks in advance.
Edited
navigator.permissions.query({name:'microphone'}).then(function(result){
if(result.state=="granted"){
result.state="prompt"
}
});
Can I manipulate the permission states of browser like changing from granted to prompt?
navigator.permissions.revoke('microphone') might work. But, unfortunately the revoke() method is deprecated.
So, you would be wise not to rely on this requirement in your app.
On iOS Safari, it does ask every time.
Normally, this is not your job. This is controlled by client setting. When user starting the app(web app also), system will check the permission for camera/microphone/contact etc. User will decide if ask him to grant every time. For yours, if running in browser, system will check the browser permission, NOT YOUR WEB APP. If other web require the microphone permission first, when starting your app, normally no need to ask again. Also, your app revoke the microphone will disable other web app also. It is not correct!

Is it possible to install a PWA precached with server's data?

Let me give you an example of the flow I am trying to achieve:
A user enters the website
The user has everything loaded (both files and network requests)
Files are now cached due to fetch event listener
The user installs the app on their phone (so far everything works as expected)
All the data that has already been fetched by the user is transferred to the app so that the user could launch the app in offline mode.
Currently, the last step is not working. User must open the app at least once whilst online in order to make it work. Is it possible to "transfer" the website's cache to the app? If so, could you nudge me in the right direction with some helpful links? Thanks!

How to post back to server after Single Page Application release/update

I have a SPA Angular website. Whenever we release a change to the website, the user's browser does not go back to the server to get the new javascript files. The app happily keeps running in the user's browser, and while it will make ajax calls for data, the javascript files do not change. This can cause errors if the signature of the back-end API being called changes, etc. If the user refreshes the page, they get the updated javascript files and everything works fine after that.
Is there a way to tell the browser that the site has been updated and to get the new javascript files, rather than just running the app with the same files?
I use the Angular CLI to build the application, so when the website is released, the javascript files have hashes at the end etc. This isn't an issue with files being cached and not updated... it's an issue with the browser knowing that it needs to request the files or refresh the page.
You could use web workers to poll the server for changes and refresh the browser when changes are found.
An alternative to web workers is using setInteterval just refresh after a given time.
Yet another alternative is to have a version number in your API responses, and the JavaScript handlers would refresh the page when the version numbers are out of sync.
You could write a program in your angular code that:
periodically checks the version of the api if changes where made
does the periodic check to ascertain when the user is idle AND when the user is not in a edit page with dirty fields.
refreshes the page when step 2 condition is met
use this library to watch idleness
https://github.com/shawnmclean/Idle.js
If the file udated have the seame name add this text after the "?" like "?ver1.1" is suppose to tell the browser that there is a new version of the file.
you can use manifest file
https://html.spec.whatwg.org/multipage/offline.html#manifests
another way is with
CacheStorage,clear()

CORS header not set - can I request an image url and then serve it back to myself?

I am attempting to populate a WebGL Earth with meshes that are compiled from images. These images are cross-domain, and hosted on a server where setting the appropriate headers isn't an option. Can I XMLHttpRequest the image urls, and then serve them back to myself via PHP to bypass CORS errors?
Or, more specifically, can I use my own webserver as a proxy to serve img urls back to myself (to get around CORS) in a WebGL context?
EDIT: The real question here is if I can use my own webserver as a proxy to pass the urls, or if I'll have to actually download each image to the server to then use it.
I had a similar issue once using an API. First I tried to do everything in JS probably getting the same error message as you do.
My solution was to switch to PHP and do it server side since modern Browsers block what you want to do.
So yes, it is possible.
Get the pictures on the backend and then provide them to the frontend.
Simply retrieve the pictures first and then send them as Output to the Browser. You can do that synchronously by doing something like:
$ch = curl_init ...
...
$pic = curl_exec ... // get the picture
// and then echo it
This I have done once but don't remember correctly. Or you can do it async, what is usually done when using img-tags. I'm not sure how it works with WebGL but should be similar:
Download the pic to your filesystem
then provide the URL to the browser.
It then depends on how big the images are, how long you need them, and the API whether you want to go this direction.
Answer to first comment:
Tricky. I don't have experience using WebGL Earth and whether it is possible to load data async via Ajax (look here) or if you use AngularJS (look here) into it. You would need to try that one out. I'd especially look into the loading times.
There is a API-call like http://example.com/api/get_image/65446 which downloads the picture, resizes it and then sends it to the browser.
What you would do in this case is:
Send the 'normal' Page to the user
Then there you look for the events for which you want to show pictures
When the event happened use the API-call I just mentioned and add it to your page with the success handler. Again, how that can work with WebGL Earth is another question I can't answer.
And if you want to use that for mobile devices you need to think about the picture size. Since the screens are relatively small you should make the pics smaller first. But then, how long does it take to get the picture I guess this is the biggest challenge. Somebody who wants scrolls the globe would like to see the pictures immediately, not after 5 seconds (since I scrolled more probably)
Think about whether you can prepare the download and resize first. If you want to show only certain pictures, like 10.000 in total then I would do that. Then you don't need to think about loading times as much and when you delete which pictures. You should open another question for that topic and try first whether Ajax is possible.

Save webpages for offline access in web app

I have a web app (sencha/phonegap) that includes a feature allowing users to click on buttons that link to Wikipedia articles. This obviously works fine if the device has internet access, but I get numerous requests to make the app work when the app is offline too. To accomplish this, I'd like to give the user the option to download the linked articles/webpages for offline access. When the device does not have internet access, the app would instead display the saved version (which might be stale/out-of-date, but is better than nothing). What are possible ways to accomplish this task?
My first thought was to somehow use the html manifest to cache the pages in the phone's browser, which sounds possible on the Android browser, but iOS apparently has a 5MB browser cache limit - too small.
My next thought was to save the needed html & associated files and bundle them up inside the app. But this seems a rather cumbersome approach, the app becomes much larger than it needs to be, and the webpages are stale back to the date the app was installed.
Using javascript, is it possible to download webpages, which I could then save (on the sd card, for example) for access later?
Or is there a more elegant approach?
If anyone could point me in the right direction it would be much appreciated.
In pure Javascript you can make an Ajax request to download a page. Then you can use the FileWriter to write the responseText to a file on the file system. However, that won't help you when it comes to images. You'll need to use the FileTransfer.download() command to get the binary image files.
If I were you I'd:
Use AJAX to download the html.
Parse the html looking for images.
Use FileTransfer.download to get the images.

Categories