Problem with Navigator.geoLocation.getCurrentPosition not working

Question

I'm making a small mobile web app called "Chicken Logger" where the user selects a particular type of chicken and enters relevant data in the next page.

My problem is I need to use Navigator.geolocation to get the latitude and longitude.

The code works fine on my desktop chrome browser, but on my phone it keeps throwing an error Location permission denied for some reason.

I've tried clearing & resetting the site settings on my phone and it still wouldn't work. i made sure to give Chrome location access as well.

P.S. My web app is hosted on my PC's localhost and I've connected my phone to my PC's hotspot to access the localhost. Also, I'm using a Huawei Mate 20 Pro.

Basically as soon as the user opens the "entry page", he will be asked for location permission. But I'm not getting the ask. Just straight to the error.

Below is my JS code:

$(document).delegate("#entry_page","pageinit",function()
{

  if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }
});


function onSuccess(position)
{
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
  alert(latitude);
  today = new Date();
  date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
  time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  dateTime = date+' '+time;
  alert(dateTime);



}

function onError(error) {
  var txt;
  switch(error.code)
  {
    case error.PERMISSION_DENIED:
    txt = 'Location permission denied';
    break;
    case error.POSITION_UNAVAILABLE:
    txt = 'Location position unavailable';
    break;
    case error.TIMEOUT:
    txt = 'Location position lookup timed out';
    break;
    default:
    txt = 'Unknown position.'
  }
  alert(txt)
}

Nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

Answer 1

Your problem is that the Geolocation API is available only on HTTPS(secure contexts), and doesn't work on HTTP, hence it's denying the permission.
From docs,

This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Also see your Browser Compatibilty.

EDIT:

To enable HTTPS with Nginx, you have to generate SSL certificate and modify the configuration file. Follow this manual for detailed steps.