I'm just building a starter app with polymer starter toolkit.
Everything was fine till yesterday. I could build android app with cordova and run it straight to my android device. Now I've added a new route in routing.html called login where I did setup a simple firebase connection as well.
<script src="../../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
app.route = 'home';
});
page('/users', function () {
app.route = 'users';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
page('/login', function () {
app.route = 'login';
});
// add #! before urls
page({
hashbang: true
});
});
</script>
If I run it local in chrome it work really well. But then when built with cordova and I click on the menu to open a page that error appear:
Anything to do with the new route or the firebase connection?
#Dragod83
It has to do with polymer being new and not support by many browser.
Polymer - Browser Compatibility
In it you will see that Android is support, but they fail to give a version. We can assume it is the latest - using Lolipop or better. Even so, the library that is used for Phonegap development is not that current.
It might working with crosswalk, but I have not information on that either way.
In short, polymer is not ready for prime-time, and therefore not ready for use with Cordova or Phonegap. This may change, but polymer has been slow in giving details for using polymer on hybrid platforms.
Best of Luck
Solved. For some reason (unknown to me) I had to create a folder named android_asset inside
AndroidStudioProject/myappname/app/src/main/android_asset
Then I paste the content of www folder and it's now working.
Also replaced jQuery & firebase CDN link with bower. Look like file that require a connection do not work.
https://github.com/PolymerElements/polymer-starter-kit/issues/374
Related
I'm working on my first Cordova app to use AngularJS and I'm a bit lost as to how to coalesce the starting JS for a Cordova project.
I presently have the default index.js file that is included with Cordova that I've modified to include some events based on when the device goes on or offline. It creates an object (app) and adds functions for initialize, bindEvents, and onDeviceready.
Where should I define the AngularJS application? After the app.initialize() function call at the bottom of the document? Or can I ditch the original Cordova structure for the JS file entirely and do something else for the onDeviceReady?
Thank you!
Basically you can define angular anywhere, I recommend a separate file.
The thing you have to worry about is angular being loaded first before cordova.
Below is an example how to overcome this using a service.
.service('cordovaReady', function($q){
var cordovaDefer = $q.defer();
//Note: if you want browser support you'll need to detect
//what platform you're running because deviceready event won't be called
//unless cordova is running.
document.addEventListener("deviceready", cordovaDefer.resolve, false);
return function(){
return cordovaDefer.promise;
};
});
And using it every time you use a cordova plugin in your app like so:
//$cordovaFacebook is just an example
.controller('someCtrl', function(cordovaReady, $cordovaFacebook){
cordovaReady()
.then(function(){
//Plugins available here
$cordovaFacebook.api('/me').then(...);
});
I've built a SPA using Durandal and it all works fine in a browser. What I'm trying to do now is wrap it up with Phonegap (ideally using Phonegap Build) and deploy it as an Android app.
The Durandal documentation on the subject (http://durandaljs.com/documentation/Native-Apps-With-PhoneGap-Cordova/) is pretty sparse. It's key points of optimizing the app to generate a main-built.js file were done as were gathering the js/css assets into one place.
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one. I've packaged the app according to instructions. It installs alright on my Android device but gets stuck on the splash screen. Other questions have asked about being stuck on the splash screen, but the solutions posted there don't help. I can't help but think something fundamental is missing here?!?
Do I need to have Phonegap specific code in index.html? In any javascript?
Note: I'm using Durandal 1.2 but the same questions apply for v2.0.
You can hook into the Phonegap device ready event in main.js, you can then be sure the device is ready before the shell or any view activate events are fired. This example checks the agent so it will still fire up in a browser. This is from my example Durandal 2 / Phonegap Build project.
https://github.com/BenSinnott/LandmarkTracker
define(['durandal/app', 'durandal/viewLocator', 'durandal/system'], boot);
function boot(app, viewLocator, system) {
var useragent = navigator.userAgent.toLowerCase();
if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios') || useragent.match('Windows Phone') || useragent.match('iemobile')) {
document.addEventListener('deviceready', onDeviceReady, false);
}
else {
onDeviceReady();
}
function onDeviceReady() {
app.title = 'Landmark Tracker';
app.configurePlugins({
router: true
});
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('viewmodels/shell', 'entrance');
});
}
}
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one.
jQuery can listen for document ready via $(document).ready but HTML/javascript itself doesn't have a document ready event. The closest pure javascript equivalent is listening for the DOMContentLoaded event. Phonegap/Cordova offers the device ready event as documented here. Be sure to include <script type="text/javascript" charset="utf-8" src="cordova.js"></script> in your <head></head> tags.
It installs alright on my Android device but gets stuck on the splash screen.
Take a look at your config.xml. Do you have <preference name="splash-screen-duration" value="xxxx"/> where xxxx is set to some crazy high number?
You could always call navigator.splashscreen.hide() after device ready fires but you will need to build in the deviceready listiner. Easy to do using the documentation I provided above. If that doesnt fix it, then we will need to take a look at some of your code to dig into what is going on.
First of all try an unminified Version. Means copy all the folders into your assets folder. Then look at logcat. Most likely u had a js error. If that works try the minified version and check if that one throws errors via logcat
Edit: sry this applies of course only for manual build in android not for the online service. For IOS as far as i remember you get the errors thrown in the output window.
I have an app running on http://localhost:6543 - it's a Pyramid app.
This app serves the AngularJS app at /
This app uses socket.io itself
The question is: is it possible to test that application using those tools ?
I have this in my scenario.js file:
beforeEach(function() {
browser().navigateTo('http://localhost:6543/');
});
but the moment I launch testacular (with run or start), I get this error message:
Chrome 23.0 registration: should delete all cookies when user clicks on "remove all" button FAILED
browser navigate to 'http://localhost:6543/'
/home/abourget/myapp/jstests/scenarios/registration_scenario.js:9:5: Sandbox Error: Application document not accessible.
so I understand the browser doesn't give access to the iframe's document, because it'd be some Cross-Origin violation.
What I tried:
Proxying to my app using the Testacular web server (with the proxies option), but / would conflict with Testacular's own serving of its framework. Also, both apps would eventually try to use /socket.io and that would conflict also.
Doing the reverse (tweaking my app to proxy to Testacular's server), but then, we'd get the same issues with /socket.io.
Thanks for these great tools, btw!
Instead of having
beforeEach(function() {
browser().navigateTo('http://localhost:6543/');
});
change this to
beforeEach(function() {
browser().navigateTo('/');
});
and then in your testacular-e2e.conf.js file add:
proxies = {
'/': 'http://localhost:6543/'
};
You might still have other issues, but I can reproduce the "Sandbox Error: Application document not accessible." message with just the Pyramid Hello World App and this configuration problem.
We had a similar problem, and had already proxies and navigateTo('/'). We needed to add some urlRoot to avoid conflicts when loading socket.io. We simply added '/e2e' and that was enough to solve the conflict. Actually, there was a warning message when running testacular for this issue.
I am trying to work with Meteor. Now I have the entire setup running in my localmachine with apache2 and the meteor.js also works when browsing the same URL from Android Emulator's Browser . Now the main problem is that I need the functionality in my android app from a local URL and here the page is not able to load the remote js. I am loading the following html using WebViews loadURL method after setting the javascript as enabled .The js embedded in the html will be something like this
<script type="text/javascript" src="http://meteor.mywebserver.com/meteor.js"></script>
<script type="text/javascript">
window.onload = function()
{
Meteor.host = "meteor.mywebserver.com";
alert(textStatus);
// Call the test() function when data arrives
Meteor.registerEventCallback("process", commentsUpdate);
// Join the demo channel and get last five events, then stream
Meteor.joinChannel("demo", 0);
Meteor.mode = 'longpoll';
// Start streaming!
Meteor.connect();
// Handle incoming events
function commentsUpdate(data)
{
alert(data);
};});
After searching around a lot I tried this stackoverflow answer
To no avail . Can anybody help me find a work around here , I cant use a local meteor.js as it wont work.
Thanks
This has since been addressed in Meteor by way of integrated Cordova, which you can read about here. Basically, you tell Meteor that you want to add the Android platform to your app, and it builds the Android project files for you. Your app will look as if it's running native, but it's really just running in a light app surrounding a "web view". In iOS this is done using WebKit, but I think in Android it depends on the version of the OS.
You will still need to deploy your app to the Play store, which requires signing the app and all.
I made a great app for windows with appcelerator and I want to convert it to mobile (android).
Problem is, unlike creating an app in windows where the default launcher is "index.html" and I can have all my javascript/css/html mixed in together, the mobile default launcher is app.js.
I've tried the following:
var webview = Titanium.UI.createWebView({
url : 'index.html'
});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open({modal:true});
This works great however none of the api's I'm using inside of index.html are being run, it just alerts an error (undefined).
Does anyone know how to fix this issue?
EDIT:
There are only two API's I'm using in my app:
var db = Titanium.Database.open('app_data');
var device_id = Titanium.Platform.id;
you dont have access to all of the API from the webview, see link below
http://developer.appcelerator.com/question/8991/webview-usage-guideline
you will need to do most of your business logic in the js files and through the event mechanisms move data from you app to the ui level