I'm having problems getting Branch.io to work in a Cordova powered Android app. I have a landing page that parses the data from branch.io deep links and forwards the user to the correct page. My javascript for this page contains:
function onDeviceReady() {
console && console.log("Device Ready");
initBranch();
}
function initBranch() {
branch.init(<branchKey>, function(err, data) {
console && console.log("branch init error: " + err);
//then the parsing and forwarding follows - omitted here
}
I then created a Branch.io deep link to this landing page in the web api and tested it in chrome which works.
Then i tried to move to the Cordova app...
I followed this guide to prepare the app for branch.io:
https://dev.branch.io/recipes/quickstart_guide/cordova/ (I installed the plugin and adapted the Manifest file.)
But when i try to open the same link that worked in chrome on my Android device the app opens correctly and the landing page loads, but i'm not forwared. Instead i see the following error in logcat:
I/chromium(19382): [INFO:CONSOLE(22)] "Device Ready"
[...]
I/chromium(19382): [INFO:CONSOLE(29)] "branch init error: Error: API request /v1/open missing parameter device_fingerprint_id"
Can anyone tell me what i'm doing wrong? I'm just getting to know Cordova and Branch.io so it's probably something small i'm overlooking.
Thanks,
Lif
A colleague of mine figured it out:
Branch.io creates an entry branch_session in the local storage of the android device. On my device this session was corrupted somehow and the device_fingerprint_id was empty:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":null,"browser_fingerprint_id":null,"link":"<link>","data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
After clearing the local storage* the session was freshly created, and now looks like this:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":"118176839880411216","browser_fingerprint_id":null,"link":<link>,"data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
And now deep linking works.
Kr,
Lif
* To clear the local storage i used chrome://inspect --> inspect webview, go to resources tab, choose "local storage" and the the correct url, then remove all values.
Related
I am using the excellent file-collection package,
https://atmospherejs.com/vsivsi/file-collection
to store images in my Mongo database. Running the app on Android doesn't show the images (they appear as broken images). In the browser it is perfect.
I don't think the problem is unique to this package, as it is using Mongo's gridfs to store the images, and provides URL's to access them.
Here is a note from Vaughn in the documentation:
Cordova Android Bug with Meteor 1.2+
Due to a bug in the Cordova Android version that is used with Meteor
1.2, you will need to add the following to your mobile-config.js or you will have problems with this package on Android devices:
App.accessRule("blob:*");
Which I have done, but without success.
I also see the documentation references setting headers to deal with CORS issues, like this:
myFiles = new FileCollection('myFiles',
{ resumable: true, // Enable built-in resumable.js chunked upload support
http: [ // Define HTTP route
{ method: 'get', // Enable a GET endpoint
path: '/:md5', // this will be at route "/gridfs/myFiles/:md5"
lookup: function (params, query) { // uses express style url params
return { md5: params.md5 }; // a query mapping url to myFiles
},
handler: function (req, res, next) {
if (req.headers && req.headers.origin) {
res.setHeader('Access-Control-Allow-Origin', 'http://meteor.local'); // For Cordova
res.setHeader('Access-Control-Allow-Credentials', true);
}
next();
}
},
But again without success.
Looking at the network tab on the inspector, I can't even see requests for the images from the server, which suggests that it is being denied by something in the Cordova code, and it's not even trying to go out and get the images.
I have reproduced the problem using Vaughn's demo app, which I have forked and added the android platform, so it's ready to go if you care to try and help.
https://github.com/mikkelking/meteor-file-sample-app
If you do a meteor run android-device it should run on the Android. You will need to register and then upload an image to see the problem. From a browser it works fine.
Any help would be appreciated, this is a show stopper for my project. One option I have considered is to move the images to an S3 bucket, which I think should work, but I'd like to keep the images in the db if I can.
I had a similar issue once with gridfs. I believe that the issue comes because the image source is a relative source. So your image sources are coming from localhost. It works on the web version because the browser is on the same machine as your server, so a localhost source works fine. But on the android device it won't work because the images are not served on that device.
When I had this problem I just deployed to production and it worked on mobile devices because the image source pointed to a url that was on the internet and not relative to the device. This works for production but not for dev testing.
When I saw this question I cloned your code and got it working on an android device for local dev.
The first step I did is to set the ROOT_URL env variable and mobile server to point to the your local server. When you run meteor locally you can run a command like this to set these variables, using your computer's local ip address
export ROOT_URL=http://192.168.1.255:3000 && meteor run android-device --mobile-server=http://192.168.1.255:3000
Next, in your sample.coffee Template.collTest.helpers link function, you need to use the absolute url instead of a relative one (so that on your mobile device it will look to your local server instead of localhost). To dynamically get this so that it works on different servers, you can use something like this
Meteor.absoluteUrl(myData.baseURL + "/md5/" + this.md5)
Then I had to add the computer's ip address http://192.168.1.255:3000 to the content security policies in the sample.jade file.
I almost forgot, at this point I was getting a 403 forbidden error. I changed the myData.allow read function in sample.coffee and just returned true and the 403 was gone, something was happening with the permissions there
After that the image showed up on my android device.
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
I'm developing a Phonegap application using Phonegap Developer for Android. And I have a big problem: after I change some file, like index.html, or some.js, some.css, some.png... it doesn't works on app. Basically the application reload and I get same old file.
I tried use four fingers to reload, and three fingers to back to application home, and connect again. I tried inspect via desktop and force location.reload(true). Nothing. The unique solution is force close Phonegap Developer and open it again.
Even if I put something like some.js?$timestamp, it doesn't works, because index.html is cached too. I guess that this cache is cleaned time in time, but I don't know how much. And some changes I need test imediatly.
don't know if this is the same issue I had two days ago, but the simptoms are like you described. I finally solved it upgrading phonegap. Maybe it's not the best solution, but it worked for me.
$ sudo npm update -g phonegap
You can check a similar answer here : PhoneGap disable caching
document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady()
{
var success = function(status) {
alert('Message: ' + status);
}
var error = function(status) {
alert('Error: ' + status);
}
window.cache.clear( success, error );
}
I'm trying to integrate Phonegap 3.1 with phonegap-facebook-plugin, to make my application able to login with facebook:
https://github.com/phonegap/phonegap-facebook-plugin
After various searches I found a way to make it work with last version of phonegap, but I'm having 2 main issues:
1) I really don't understand how to configure the "Native Android App" on facebook developer panel, in particular the "Class Name".
Information I found online are a bit confusing. I tried:
com.facebook.LoginActivity
my.app.main.activity
com.phonegap.plugins.facebookconnect
With both of them I receive this error in the logcat:
Failed to find provider info for com.facebook.katana.AttributionIdProvider
Even if this error is thrown, facebook login works, but:
2) FB.init returns status unknown even if I'm already logged and, when I call FB.login, I receive:
You already authorized appname.
It's a bit frustrating that the app user have to confirm authorization everytime he opens the app...
I'm doing something wrong?
If someone is interested, I finally resolved leaving the facebook connect plugin and using facegap
It's incredibly simple to integrate.
EDIT:
example:
$(document).FaceGap({
app_id : 'xxxxxxxxxxxxxxxx',
scope : 'user_photos',
host : 'https://yourdomain.com', //App Domain ( Facebook Developer ).
onLogin : function (event)
{
if (event.message == "Success")
{
alert("LOGIN WORKED!");
}
},
onLogout : function (event) {
if (event.status === 1)
{
alert("LOGOUT!");
}
}
});
Important: the host parameter must be a valid URL in your app domain (the one you set in the facebook app configuration). It could be also a blank page, it will be never be loaded, but needs to be a working url, in order to make facegap work.
I also created a fork with a bug fix and a new function (feed functionality):
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.