vlahde
commented
2 years ago 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.
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?