How To Load HTML Geolocation Api on Nativescript Vue with Webview?

Question

I am very new to nativescript-vue. I was testing my codes on stackblitz. I used webview to load html page. But html geolocation api is not working. What should I do? Thanks in advance.

My Code Is:

<template>
  <Page>
    <ActionBar>
      <Label text="Home" />
    </ActionBar>

    <GridLayout>
      <WebView src="https://azowad.pythonanywhere.com/" />
      
      <Label class="info" :text="message" @tap="logMessage" />
    </GridLayout>
  </Page>
</template>

<script lang="ts">
import Vue from 'nativescript-vue';

export default Vue.extend({
  computed: {
    message() {
      return 'Blank {N}-Vue app';
    },
  },

  methods: {
    logMessage() {
      console.log('You have tapped the message!');
    },
  },
});
</script>

<style scoped>
.info {
  font-size: 20;
  horizontal-align: center;
  vertical-align: center;
}
</style>

score 0 · Answer 1 · answered Sep 02 '22 at 09:19

It seems that on iOS the WebView asks to access the location, while on Android not. Based on the answers to this question, I tried using a custom WebChromeClient which implements the onGeolocationPermissionsShowPrompt method, but it didn't work.

Do you explicitly have to use a WebView? As a workaround you could use the InAppBrowser plugin where Geolocation API works.

How To Load HTML Geolocation Api on Nativescript Vue with Webview?

1 Answers1