i want to create an android app using phonegap , with a simple basic HTML page as showed in this tutorial.
http://pointdeveloper.com/how-to-add-banner-ads-to-phonegap...
https://phonegap.com/blog/2016/08/09/appfeel-guest-post/
After adding the following line to "config.xml"
<gap:plugin name="phonegap-admob" source="npm"/>
here is my "index.html" file
<!DOCTYPE html>
<html>
<head>
<title>Title Of The App</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width, min-height=device-
height" />
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body onload="domLoaded()">
<header>pointDeveloper.com</header>
<div class="wrapper">Please Subscribe To My Channel and like the video
</div>
<footer class="footer">This is spartaaaa</footer>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript" >
function adSetter(){
alert(navigator.userAgent);
var admobid = {};
// select the right Ad Id according to platform
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-6136762217480399/8690615372',
interstitial: 'ca-app-pub-6136762217480399/5002296586'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-6869992474017983/4806197152',
interstitial: 'ca-app-pub-6869992474017983/7563979554'
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956'
};
}
if(AdMob) AdMob.createBanner( {
isTesting:true, //Remove this Before publishing your app
adId:admobid.banner,
position:AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow:true} );
}
function onDeviceReady(){
alert("device ready");
adSetter();
}
function domLoaded(){
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</body>
</html>
After lot of testing on my android phone, even exporting the apk in the phonegap build,
the apps is displpayed , but the bottom banner is nowhere
did i miss something ?
thanks in advance
edit: Here are the errors shown in Chrome JavaScript Debugger Tools
Uncaught ReferenceError: domLoaded is not defined
at onload ((index):10)
:3000/cordova_plugins.js Failed to load resource: the server responded with a status of 500 (Internal Server Error)
(index):27 Uncaught ReferenceError: admob is not defined
at initAds ((index):27)
at Channel.onDeviceReady ((index):97)
at Channel.fire (cordova.js:777)
at cordova.js:231
:3000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
Its likely that you need to configure the cordova-plugin-whitelist to allow Admob to access the network.
edit:
Add the plugin to your config.xml:
<plugin name="cordova-plugin-whitelist" />
Start with fully open access (in your config.xml) and see if your request is successful:
<access origin="*" />
If that works then you should determine which exact domains you need access to and restrict to that. If your requests still don't work then the problem may be somewhere else. Connect a JavaScript debugger (safari or Chrome) and see what errors are being thrown.
Related
I have a firebase hosted Flutter Web application which is a game. Since the URL for the Firebase hosted site (https://jw-daily.web.app) is difficult to remember for users, I bought a domain name (joinedwords.com) and redirected the URL to the firebase hosted site.
Problem is that when I type the domain URL i.e. joinedwords.com, the website renders in only half the height like below:
However, if I type the original URL (https://jw-daily.web.app) in the browser, the webpage renders in full like below:
All that I have done is with my domain provider, I have set a forward with masking of joinedwords.com => https://jw-daily.web.app/
I looked up all the other solutions around why a webpage is rendering in half. However most of them are asking to make changes to the code and I don't want to do that since the original URL is working fine. Incidentally this issue is happening only on mobile browsers and not happening on desktop. In desktop, the website renders correctly regardless of which URL is typed.
Please suggest if you are aware of how we can solve this problem. Here is my index.html file.
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A Daily Word Game">
<meta image="" />
<meta property="og:image:url" content="https://s3.us-east-2.amazonaws.com/joint.words/joined-xxx.png"
property="og:image:secure_url" content="https://s3.us-east-2.amazonaws.com/joint.words/joined-xxx.png"
property ="og:image:alt" content="Joined Words Logo"
property="og:image:type" content="image/png"
/>
<!--
property="og:image:width" content="100"
property="og:image:height" content="100"
-->
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Joined Words">
<link rel="apple-touch-icon" href="https://s3.us-east-2.amazonaws.com/joint.words/joined-256.png">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/x-icon">
<title>Joined Words</title>
<link rel="manifest" href="manifest.json">
<meta name="google-site-verification" content="XXXXXXXXX-XXXXXX" />
/>
<!-- Global site tag (gtag.js) - Google Ads: xxxxxxxxx -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxxxxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-xxxxxxxxxxx');
</script>
<!-- Event snippet for Website traffic conversion page -->
<script>
gtag('event', 'conversion', {'send_to': 'xxxxxxxxxxxxxxxxxxx'});
</script>
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js?version=1';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
<!-- Initialize Firebase -->
<script src="/__/firebase/9.0.2/firebase-app.js"></script>
<script src="/__/firebase/9.0.2/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<!-- Initialize app -->
<script src="main.dart.js?version=15 " type="application/javascript"></script>
</body>
</html>
Found an answer to the issue I was facing. Here is the link to the same:
Bootstrap Responsive Design Fails with Web Forwarding
This is because you are using a framed redirect which essentially loads up the target website in an iFrame. Doing so loses any responsive capabilities. What you are best doing is changing your web forwarding method to actually forward to the new URL using a non-framed redirect. This will then properly load up the target URL in the users browser and all the responsive capabilities that go with it.
I am starting to learn react.js and was doing a simple Hello program.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="hello_container" class=""></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" ></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" ></script>
<script>
class Hello extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'div',
null,
`Hello ${this.props.name}!`
);
}
}
ReactDOM.render(React.createElement(Hello, {name: 'React'}, null), document.querySelector('#hello_container'));
</script>
</body>
</html>
But i was running into an issue for these two script tags ,
<script src="https://unpkg.com/react#16/umd/react.development.js" ></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" ></script>
Failed to load resource: the server responded with a status of 403
(Forbidden)
Uncaught ReferenceError: React is not defined
I found something on google as to run the html code on a web server(https://) rather than from file system (file:///)
So i ran a local web server as python3 -m http.server 1234
and it worked . I got output as Hello React!.
But i want to know why i was getting forbidden error when running the code from file system ?
Is it related to same origin allow access ?
What is different in running html code from file system and on a web server?
RequireJS + Laravel 5 + Gmaps + async = not working
Can somebody help me with loading google maps using async plugin ?
I also tried goog plugin but it was unsuccessful too.
It throws following error:
I can load map only synchronically but it is unsafe.
here is my code :
welcome.blade.php
<head>
<title>Roads API Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/css/style.css') }}">
<script data-main="{{ URL::asset('assets/js/config') }}" type="application/javascript" src="{{ URL::asset('assets/js/lib/require.js') }}"></script>
</head>
assets/js/gmapsApi.js
define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() {
console.log("HIIIIIIIIIIIIII");
// When I delete async and put only
// http://maps.google.com/maps/api/js?sensor=false
// Then works fine .
});
assets/js/config.js
requirejs.config({
baseUrl: "assets/js/lib", //require.js path=assets/js/lib/require.js
paths: {
main: "../main",
gmapsApi : "../gmapsApi"
},
waitSeconds: 0
});
requirejs(["gmapsApi"]);
IMPORTANT NOTE : require.js path=assets/js/lib/require.js
All scripts are loaded good, I checked Sources and Network tab in chrome.
in module assets/js/gmapsApi.js
Not working: async!http://maps.google.com/maps/api/js?sensor=false
Working fine : http://maps.google.com/maps/api/js?sensor=false
It looks like HTTPS protocol is needed on my local server (vhost) because google maps is provide apis only for servers that are treated as a secure origin over HTTP (HTTPS protocol).
Hire is link : https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins
So in my gmapsApi.js I also provide url to google maps over https protocol (which is required, because I already set my local server on https protocol)
assets/js/gmapsApi.js
define(['async!https://maps.googleapis.com/maps/api/js?v=3&libraries=places'], function() {
console.log("HIIIIIIIIIIIIII");
});
This solved problem for me. And gmaps api are loaded asynchronously (using async plugin).
I am trying to make google sign in work on my intranet site which currently uses integrated windows authentication - I want to get away from that because I need to support ChromeBooks and pretty much everything here is going google......
This is what IS working:
I get a sign in button. I can see in the console log that it is using my google developer client id:
XHR finished loading: GET "https://accounts.google.com/o/oauth2/iframerpc?action=checkOrigin&origin=ht…d=777682448638-5tpyaddayaddyadddarvnbr3p6.apps.googleusercontent.com".
If I click the button on a machine where I am not logged into google I will geta prompt to log into google.
If I click the button on a machine where I am logged into google but have not visited this site before then I will get the authorization request for my email and profile to be shared with my web application.
If I have done the above, and click the button then there is a flash of a pop-up window that goes away immediately.
What is NOT working:
My website never gets any onSuccess back....... so the button ALWAYS says "Sign in with Google" I don't get to the next step of "Signed in as molly ......"
Here is a shortended version of my code - please note that right now my website uses the integrated windows authentication - that is what I am trying to port away from so we can use ChromeBooks and other computers that are not using our windows login.
this is from my _Layout.cshtml page
#{
var username = WebSecurity.CurrentUserName;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rutland City Public Schools - ACADEMIC SITE</title>
<link href="~/Styles/Styles.css" rel="stylesheet" type="text/css"/>
<link href="~/Styles/PrintStyles.css" rel="stylesheet" type="text/css" media="print"/>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
#RenderSection("script", required: false)
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="777682448638-5tpyaddayaddayaddavnbr3p6.apps.googleusercontent.com">
</head>
<body>
<div id="topRight">
Hello: #username <br> <br>
<div id="my-signin2" align="center" ></div>
<script>
function onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
}
function onFailure(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 150,
'height': 30,
'longtitle': true,
'theme': 'light',
'onsuccess': onSuccess,
'onfailure': 'oops!'
});
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
ignore google button!
</div>
<div id="mainContent">
#RenderBody()
</div>
</body>
</html>
If I open up "Inspect Element" when I am in chrome I can see that under the network tab it clearly goes off and does some gets to google. In the console tab I only see the XHR finished loading: GET "https://accounts.google................." message.
What is going on here? Why am I not getting the onSuccess?
Thank you!!!!
Added more notes:
I added a link:
Sign in
that calls this function:
function signIn() {
var auth2 = gapi.auth2.getAuthInstance();
console.log(auth2);
From the console results I can see my website, and my client id, but again I see nothing about my actual user.
jF {zd: Object, po: "single_host_origin", zt: true, ha: true, G: undefined…}
B: bY
B: "777682448638-5tp3rss17g1qarc3em0opcr4rvnbr3p6.apps.googleusercontent.com"
Db: "http://rcps"
Ei: undefined
El: undefined
G: "google"
Ka: false
Ld: Object
openid.realm: undefined
redirect_uri: "http://rcps/academic/academic"
response_type: "token id_token"
scope: "openid profile email"
With the Google Sign-In (gapi.auth2) JavaScript client libraries, you should probably be using listeners to check the state of the client. I'm not sure exactly how you're rendering the button but you might want to take a good look at the Google Sign-in quickstart.
Although I have found using listeners to have advantages over using the success callback, the following code works for me (I see onWin upon sign-in with the z variable containing the authorization response):
function onFail(z){ alert('Fail' + JSON.stringify(z)); }
function onWin(z){ alert('Win' + JSON.stringify(z)); }
gapi.load('auth2', function() {
gapi.signin2.render('signin-button', {
scope: 'https://www.googleapis.com/auth/plus.login',
onsuccess: onWin,
onfail: onFail,
fetch_basic_profile: false });
gapi.auth2.init({fetch_basic_profile: false,
scope:'https://www.googleapis.com/auth/plus.login'}).then(
function (){
console.log('init');
auth2 = gapi.auth2.getAuthInstance();
auth2.isSignedIn.listen(updateSignIn);
auth2.then(updateSignIn());
});
});
Do things when sign-in changes (e.g. show/hide authorized UI):
var updateSignIn = function() {
console.log('update sign in state' + auth2.isSignedIn.get());
}
At any point when auth2.isSignedIn.get() returns true, you can use auth2.currentUser.get() to retrieve the profile data for the currently signed in user.
I had similar problems when testing on localhost. When I pushed my code onto my production server the simple example provided by Google worked perfectly as advertised. The button's values changes or stays accordingly even after a page refresh.
Perhaps your browser is configured to block third party cookies. If so, disable that feature. You may also want to have a note on your login page mentioning that third party cookies are required so that your users will know to do the same.
I have a phonegap application that is styled with jquery mobile. The phonegap part works. But the buttons are not styled in jquery style but normal HTML style. What is the conflict here? I cannot seem to find it.
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64-encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
I would first recommend upgrading jQuery and jQuery Mobile to recent versions. You should try jQuery 1.10.1 (I don't think jQM supports 1.11 yet) and jQuery Mobile 1.4.0 and see if that straightens you out.
Just use the script like this first its needs jquery, second jquerymobile and finally it needs jquery mobile css like this you can try it will definitely work.
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" href="js/jquery.mobile-1.4.4.min.css" />
Try it.