Calling onDeviceReady and using the global plugins #150

vlahde · 2022-07-11T13:44:08Z

I am trying to use notifications in my Vue/Cordova application. I have installed cordova-plugin-dialogs and calling the beeb like this in my App.vue when message arrives:

if(navigator.notification && navigator.notification.beep) navigator.notification.beep(6)

Nothing happens. I must be doing something wrong. If I remove the condition I get error that notification is undefined.

I do understand that plugins require onDeviceReady event to work but where does this go:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.notification);
}

I have tried putting it to main.js in my vue folder but it does not work. The documents and previous answers to this issue seem to suggest that cordova.js in the cordova project folder is already handling the onDeviceReady call and navigator global variable should be available in vue but it isn't. I don't think the plugin usage has been properly explained yet. Could anybody help, please?

vlahde · 2022-07-12T10:40:43Z

Furthermore, I am using Vue 3.

This does fire onDeviceReady in App.vue, but navigator.notification remains undefined:

//main.js
import { createApp } from 'vue'
import App from './App.vue'

const vue = createApp(App).mount('#app')
document.addEventListener('deviceready', vue.onDeviceReady(), false); //

App.vue
export default {
  methods: {

   beep(){
    navigator.notification.beep(5) //does not work
}

    onDeviceReady() {
      alert('onDeviceReady')
      alert(navigator.notification);
    }

  },
  mounted(){

    //get user id or fail by doing so
    this.getUser()

  }
}
</script>

Yes I do have cordova.js in my index.html like so:

<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="favicon.ico">
<title>app.chat.fi</title>
<script defer="defer" src="cordova.js"></script>
<script defer="defer" src="js/app.2ab15558.js"></script>
<link href="css/app.bd15e8fa.css" rel="stylesheet"></head>
<body><noscript><strong>We're sorry but app.chat.fi doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id="app"></div>
</body></html>

Yet it seems like cordova is not recognized even if I make a build and run it on my android phone.

vlahde · 2022-07-13T17:22:52Z

So it appears that the problem is with navigator.notification. It does not work for some reason or another. But when I tested with navigator.camera, it will work as intended

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Calling onDeviceReady and using the global plugins #150

Calling onDeviceReady and using the global plugins #150

vlahde commented Jul 11, 2022 •

edited

Loading

vlahde commented Jul 12, 2022 •

edited

Loading

vlahde commented Jul 13, 2022

Calling onDeviceReady and using the global plugins #150

Calling onDeviceReady and using the global plugins #150

Comments

vlahde commented Jul 11, 2022 • edited Loading

vlahde commented Jul 12, 2022 • edited Loading

vlahde commented Jul 13, 2022

vlahde commented Jul 11, 2022 •

edited

Loading

vlahde commented Jul 12, 2022 •

edited

Loading