I was trying to build a sample app through phonegap(3.7)(build.phonegap.com) made using polymer(0.5).The build was successful.
However, when I installed the app in my android(v4.4+) device, I could not see the polymer element(I just inserted a <paper-checkbox> to test). All other simple HTML elements were rendered normally.
I read about the android webview support of HTML import, so I tried to vulcanize the index.html, but it didn't help. But I can see the polymer element by running the python SimpleHTTPServer on my laptop, and there's no error in the browser javascript console (other than failed to load resource.. cordova.js).
Here's the index.html (non-vulcanized version) I have created:
<!DOCTYPE html>
<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 -->
<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" />
<link rel="import" href="res/bower_components/paper-checkbox/paper-checkbox.html">
<script type="text/javascript" src="res/bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<h3>POLYMER!</h3>
</div>
<br>
<p>Introducing Polymer element next...</p>
<hr>
<paper-checkbox></paper-checkbox> This is a polymer checkbox
<hr>
</div>
<script type="text/javascript">
app.initialize();
</script>
</body>
Here is the directory structure of the project
config.xml
hooks
platforms
plugins
www
config.xml
css
icon.png
img
index.html
js
index.js
res
bower_components
polymer
webcomponentsjs
icon
screen
spec
spec.html
Is there anything I'm missing?? Please help. Thanks!
Regards,
Soumya
I saw this issue in from a library that uses Polymer in github. It says its not supporting devices below Android 4.4 (Probably). I am trying to integrate with Cordova Crosswalk and see if I can get it to work. The stock browsers from lower version of Android before 4.4 are really crappy. I am really having hard time making my web apps work on lower-end devices.
Some issues like abysmally slow js performance, exceptions, bugs are rampant on older webviews. What we can do for now is to wrap our app using a different webview such as using Cordova with Crosswalk as also suggested from the link I provided above.
Hope this helps.
Related
I'm making an app in cordova. I've installed some plugins, but problem is that I cannot use those plugins as when I try to call them like window.plugins.googleplus.login then it says property 'plugins' does not exists on window. So I searched from solution and they said use window['plugins'] I tried that too, but now it says undefined.
I tried cordova plugins ls and it lists all my plugins. Also checked available plugins in android.json, all plugins are there. Can anyone help me why it is undefined? My index.html looks like below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrmbl</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="./">
<script type=”text/javascript” src="cordova.js"></script>
</head>
<body>
<app-root>
<center>
<div style="margin-top: 200px;">
<img src="./assets_v2/images/icon.png" alt="" >
<br><br>
<img src="./assets_v2/images/preloader.gif" alt="">
</div>
</center>
</app-root>
</body>
</html>
Any help will be highly appreciated.
cordova --version
8.0.0
I think you are calling it without deviceready. None of the googleplus methods should be called before deviceready has fired. The plugin should be called when everything's ready for the plugin to be called.
Example:
document.addEventListener('deviceready', deviceReady, false); function deviceReady() {
console.log('Device is ready!'); window.plugins.googleplus.trySilentLogin(...); }
Reference visit here
I want to know if it's possible to create a page (example login) with Ionic creator web site (see http://ionic.io/products/creator), download it as .zip archive (always via their web site), and than open the index.html page inside an Android webView. I need of this page only for a "GUI" of a web application (on a server) that a want to execute inside my native Android app (creating an hybrid app).
I have tryed to call this index.html page inside the WebView of my Android app but I obtain "404 - not found" message.
This is the index.html page inside the .zip archive of this my Ionic Creator little project that I have obtained from their web site:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development)
<script src="cordova.js"></script>
-->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link href="css/ionic.app.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div style="">
<div style="">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Did you linked it properly? Did you placed it in the www folder? Can you show us our java code where you load the webview into?
I am running my Angular2/Ionic2 app under Android 4.4.4 on a real device; however, I am getting a white black screen, after inspecting the device I got the following error:
Uncaught Cannot resolve all parameters for 'App'(?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'App' is decorated with Injectable.
I've tried to run it on Android 5.1, it worked fine!
I've read some posts saying that in order to hide the error, I should use crosswalk, but I believe that Ionic2 support Android versions >= 4.4.4 So it should work without crosswalk!
My index.html:
<html dir="ltr" lang="en">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.4/moment-timezone.js"></script>
<script src="lib/polyfill.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/zone.js"></script>
<script src="build/js/Reflect.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
</body>
</html>
App.js
export class MyApp {
static get parameters() {
return [[Platform], [MenuController],[Http], [TranslateService]];
}
constructor(platform, menu, http, translate) {
this.menu = menu;
this.platform = platform;
this.http=http;
this.translate = translate;
this.guestViewBool = localStorage.getItem('guestView');
platform.ready().then(() => {
});
}}
ionicBootstrap(MyApp, [], {
iconMode: 'ios',
backButtonIcon: 'ios-arrow-back',
prodMode:'true',
});
Here is the tutorial which I am following.
http://ccoenraets.github.io/cordova-tutorial/setup-files.html
I've done 1 to 4 steps in Module 3: Setting Up the Workshop Files.
The problem is number 5. I typed the cordova build and cordova run android exactly same as prev page. The copied contents in www folder are restored when I type those commands.
The index.html prev image is fine right after copying the contents of starter-www however they restore as initial.
Here is the initial index.html code.
<!DOCTYPE html>
<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 -->
<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>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="js/index.js"></script>
</body>
I didn't get any error but why did it restore automatically? Did i miss something?
Does anyone have same experience?
If you have modified something within the platform specific assets/www folder then it will be re-generated on each Cordova build
So as you said: C:\dev\plz\workshop\platforms\android\assets\www (path). If you modified any file inside this location then it will be re-generated each time.
In order to create a new project, use below command:
cordova create hello com.example.hello HelloWorld
Now it should have created a folder with name hello, go inside the folder
cd hello
Here you can see the www folder that is a common place for the code. Whatever you place here will be generated for all your specified platforms. So in your case, you copy all those files inside this folder i.e. hello/www
After that, add your desired platform, for example:
cordova platform add android
Now you can issue the build command
cordova build
and to run on device. Note device should be connected already in order to work.
cordova run android
Here you can see full list of commands
I'm creating an app with Phonegap 2.2.0 and I'm trying to play videos locally in my tablet. I'm using MacDonst videoplayer and I'm testing my app in a Galaxy Tab 10.1 with Android 3.1, but I'm no able to see the videos. The links simply don't do any action when I touch them. This is mi html in my assets\www folder:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/cordova-2.2.0.js"></script>
<script src="js/video.js"></script>
<script type="text/javascript">
function init(){
document.addEventListener("deviceready", console.log('ready'), true);
}
function playVideo(vidUrl) {
window.plugins.videoPlayer.play(vidUrl);
}
</script>
</head>
<body onload="javascript:init()">
<h1>MacDonst videoplayer</h1>
<h3>videos</h3>
Play File MP4<br><br>
Play File WEBm<br><br>
</body>
</html>
I followed the instructions in https://github.com/macdonst/VideoPlayer
And I tried several aproaches found here in stack overflow, but I can't make it work :/
My tablet doesn't have an external sdcard, could that be the problem?
I'm new to Phonegap and Android developing, but I can´t se any erros in LogCat, and I only get 2 warnings:
The field Context.MODE_WORLD_READABLE is deprecated VideoPlayer.java
Using MODE_WORLD_READABLE when creating files can be risky, review carefully
Can you please help me? I really appreciate your help.
"The field Context.MODE_WORLD_READABLE is deprecated" is just a warning. It is not stopping you from playing any video.
all you have to do is-
1. open VideoPlayer.java file in eclipse and press ctrl+shift+o. This will update your plugin.
2. add <plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/> line in your res/xml/config.xml file.
And done.