I am new to phonegap. I have installed the Cordova Local-Notification Plugin.
But i am getting error "cannot read the property 'local' of undefined phonegap"
Here is my code
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="appa">
<h1>Apache Cordovadas</h1>
<!--<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>-->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="../plugins/de.appplant.cordova.plugin.local-notification/www/local-notification.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<!-- <script type="text/javascript" src="js/index.js"></script>-->
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap-1.0.0.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
document.addEventListener('deviceready', function () {
alert("start");
// Schedule notification for tomorrow to remember about the meeting
cordova.plugins.notification.local.schedule({
id: 10,
title: "Meeting in 15 minutes!",
text: "Jour fixe Produktionsbesprechung",
at: tomorrow_at_8_45_am,
data: { meetingId:"#123FG8" }
});
// Join BBM Meeting when user has clicked on the notification
cordova.plugins.notification.local.on("click", function (notification) {
if (notification.id == 10) {
joinMeeting(notification.data.meetingId);
}
});
// Notification has reached its trigger time (Tomorrow at 8:45 AM)
cordova.plugins.notification.local.on("trigger", function (notification) {
if (notification.id != 10)
return;
// After 10 minutes update notification's title
setTimeout(function () {
cordova.plugins.notification.local.update({
id: 10,
title: "Meeting in 5 minutes!"
});
}, 600000);
});
alert("start");
}
,
false);
</script>
</body>
</html>
Please help me out of this im getting hold for last 3 days.
Thanks in Advance.
Try running it on your actual phone or on an emulation.
Many plugins wont fully work while testing on a browser.
Related
I'm trying to follow this simple tutorial socket-io-with-apache-cordova for android with apache cordova. So far I did everything as in the tutorial and I use my own android phone with android version 8.0 to test the app. When I type the cordova run command app get launched and shows the screen with "DEVICE IS READY" and nothing happens. I get this Received Event: deviceready message and following errors in the chrome remote debugging console and nothing happens it doesn't pop up an alert like it supposed to.
localhost:3000/socket.io/?EIO=2&transport=polling&t=1549179448883-0:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
GET http://localhost:3000/socket.io/?EIO=2&transport=polling&t=1549179463998-5 0 ()
This is the index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://cdn.socket.io/socket.io-1.0.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
document.addEventListener('deviceready', function() {
var socket = io.connect('http://localhost:3000');
socket.on('connect', function() {
socket.on('text', function(text) {
alert(text);
});
});
});
</script>
</body>
</html>
And when I change var socket = io.connect('http://localhost:3000'); like this with my ip address var socket = io.connect('http://172.27.180.225:3000'); it doesn't give any errors in the console only this Received Event: deviceready message in the console but nothing happens.
index.js file
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
server.js file
var server = require('http').createServer();
var io = require('socket.io')(server);
io.sockets.on('connection', function(socket) {
console.log('socket connected');
socket.on('disconnect', function() {
console.log('socket disconnected');
});
socket.emit('text', 'wow. such event. very real time.');
});
server.listen(3000);
index.js and server.js are located at www/js directory
And in Package.json I've added these line to start the server
"main": "server.js",
"scripts": {
"start": "node server.js"
},
What am i doing wrong ? any help would be appreciated !
I think you forgot to start the server: Move server.js to the first folder of your project and start it from the command line with "node server.js" or "npm start", as you defined it in Package.json
In the same computer, in another command line, start the project. I did it with "cordova emulate browser"
I am trying to make a Web API request using $http, but it returns me a status code of -1, an error response after making the request. This happens only in the release build version of the app. If I run the app in the Debug version I can make a Web request.
The same issue I will face if I use Restangular to make Web request.
I created a sample cordova project and below is the code for it
(function () {
var app = angular.module('testApp', []);
})();
(function () {
"use strict";
var app = angular.module('testApp', []);
app.controller("testCtrl", [ '$http', function ($http) {
alert("test Request");
var validatePromise = $http({
method: 'GET', url: 'https://SampleURL.list'
});
validatePromise.then(function (success) {
alert("success");
}, function (error) {
alert("error");
alert(JSON.stringify(error));
});
}]);
} )();
Below is the Html code
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"
content="default-src * 'self'
'unsafe-inline' 'unsafe-eval' http://* https://* data: cdvfile://* content://*;">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="css/ionic.min.css" rel="stylesheet">
<script src="scripts/ionic.bundle.min.js"></script>
<script src="scripts/index.js"></script>
<title>BlankCordovaApp3</title>
</head>
<body ng-controller="testCtrl">
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align
title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Page 1" hide-back-button="true">
<ion-content class="padding">
<button class="button">
Default
</button>
</ion-content>
</ion-view>
</body>
This issue I get only in the Release build and for Android Version below 4.4 (Kitkat)
I have just started working with phone gap and I am experiencing some issues. As I understand there have been some recent updates to phone gap so some of the info is a bit out dated.
I am trying to play an MP4 video stream.
I have tried this on both Windows 7 and Linux Ubuntu Server. Currently I am working with Ubuntu 14.04 Server and Bluestacks Android Emulator on Windows.
I followed the following install guide: http://dasunhegoda.com/installrun-phonegap-ubuntu/797/
I then created my app like so:
cd /root
phonegap create myapp
cd myapp
I have then tried to install the video player using:
phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git
This install some directories in the plugins directory.
I have then modified the index.html file of www to the following between the body tags
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device MY APP</p>
<p class="event received">Device is Ready MY APP</p>
<p>Play File Now<p/>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function playVideo(vidUrl)
{
VideoPlayer.play(
vidUrl,
{
volume: 0.5,
//scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
},
function () {
console.log("video completed");
},
function (err) {
console.log(err);
}
);
}
</script>
</body>
Whenever I try to click the play video link I can see in the console VideoPlayer not defined. I am accessing the app using the phone gap app on my Bluestack Android emulator. I have however, used jsconsole.com to log issues in the code, so I also have this in the head
<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>
I cannot see further instruction regarding installing the plugin, it seems the one command should be sufficient. Many people mention adding features to the config.xml file. I however do not have /res/xml/config.xml, I only seem to have one config file outside off www in the project root.
Can anyone point me in the right direction?
Update
Full index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<script src="http://jsconsole.com/remote.js?4AF41FCD-34CB-482B-ADD9-D966BB408076"></script>
<!-- <script type="text/javascript" src="js/VideoPlayer.js"></script>-->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<p>Play File Now<p/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/VideoPlayer.js"></script>-->
<script type="text/javascript">
app.initialize();
function init()
{
console.log("Trying to show uuid");
var uuid = device.uuid;
console.log("UUID is: " + uuid);
play_video("http://techslides.com/demos/sample-videos/small.mp4");
}
function play_video(URL)
{
VideoPlayer.play(URL);
}
</script>
</body>
Use this Plugin for Play Video.
Try to install from below git link.
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
Then create function for Play Video.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
Call this funciton to your button div.
<p>Play File Now<p/>
Copy JS File from plugin folder to your JS folder.
And modify in your Index.html.
<script src="js/video.js"></script>
For reference you can check below link.
https://github.com/dawsonloudon/VideoPlayer
Edit 1:
Modify your VideoPlayer.js file as below.
cordova.define("cordova/plugin/videoplayer",
function(require, exports, module) {
var exec = require("cordova/exec");
var VideoPlayer = function () {};
/**
* Starts the video player intent
*
* #param url The url to play
*/
VideoPlayer.prototype.play = function(url) {
exec(null, null, "VideoPlayer", "playVideo", [url]);
};
var videoPlayer = new VideoPlayer();
module.exports = videoPlayer;
});
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.videoPlayer) {
window.plugins.videoPlayer = cordova.require("cordova/plugin/videoplayer");
}
Edit 2
Modify your Index.html Give it a try.
Add js file before head tag completion as below.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/VideoPlayer.js"></script>
<title>Hello World</title>
</head>
And also change play_video function as below.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
It is working for me well in my app.
Hope this will help you.
I tried to convert a react application into a mobile app, i got success with iOS, but now, when I'm trying with android, it shows the white screen of death, and the chrome remote inspector doesn't show any significant reason, this is the chrome log
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MMJ Recs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/main.css"/>
<script>
window.prompt = function(){
}
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script src="./js/index.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/vendor.js"></script>
<script src="./js/vendor.bundle.js"></script>
<script src="./js/build.js"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_AzADtnJ7sM7pQJu32JOmHB3M');
</script>
</body>
</html>
and this is my main.js
import React from 'react';
import Router from 'react-router';
import routes from './routes';
import ReactDOM from 'react-dom';
//ReactDOM.render(routes, document.getElementById('app'));
function startApp(){
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
function startAppCordova(){
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
window.onload = function(){
var url = document.URL;
var isSmart = (url.indexOf("http://") === -1 && url.indexOf("https://") === -1);
if( isSmart ){
document.addEventListener('deviceready', startAppCordova, false);
}
else{
startApp();
}
}
I suspect it could be a problem with the JavaScript engine, for older phones which have older JS engines you can use a Polyfill downloaded from https://cdn.polyfill.io/v2/docs/, which I used it to sort out this error which I saw when running adb logcat with my phone connected and opened the app :
Uncaught TypeError: Object function Object() { [native code] } has no method 'assign
Run adb logcat to see what the error is in your case, you probably won't see it from the Chrome console
I am just trying to run a simple page within the inappbrowser plugin. I am running Cordova 5.0, and the plugin is version 1.0. I run the app with the splashscreen plugin and it seems to work fin. The default splashscreen runs when the app start but the in app browser plugin does not seem to work. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
<script type="text/javascript" src="../platforms/android/assets/www/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
alert("dfs");
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
The cordova.js file is properly linked I assume since that is the correct path. I have also uninstalled and installed the plugin back, created a new project and none of them seem to solve my problem. I am testing it on my Android 5.0 smartphone and Android 4.1 emulator. Any ideas?
Just include corodova.js as follows
<script type="text/javascript" src="cordova.js"></script>
And use ripple emulator [which is a google plugin] and you will see onDeviceReady() is fired. Acutually this works well for me. Please try it