React app does not render in Facebook in app browser - javascript

I have been searching how to solve this issue for a couple of days with no success, so I decided to open a question here. So I have got a React app which uses Redux and Firebase as a database. Everything loads ok in every desktop and mobile browser except Facebook's in app browser. When I open it through my phone their browser fires and gets the title, it loads the injected scripts from Netlify but does not execute any Javascript and I get a blank page.
I have also tried to prerender the app with React Snap and then my app loads, but never preloads the Javascript and therefore the loaded visible content only stays HTML and CSS and nothing Javascript related works.
I am asking for help since I really have no idea what is wrong. There was no errors on build and as I said on every other browser, the web app works.
I have generated the app with create-react-app.
If someone have any suggestions, that would be helpful!

Okay I found what caused the app not loading in Facebook's in app browser. The problem was due to the Notifications API and the fact that it is disabled there. My app was using it, therefore it crashed in the beginning and the bundle did not load at all. That is why I had a blank screen on the non prerendered version and no javascript on the prerendered. Both ways there was no JS loaded because of this. So now I just check if the user agent supports the API and run my functions accordingly. Hope it helps to someone with the same issue.

Related

React Native JS concern

I am new to react-native world. Following few tutorials, I found that it react-native app runs on javascript engine on mobile. I am following ios tutorial. So when I go to localhost:8081/index.ios.bundle it loads JS for the app. I know I can use ngrok to manipulate this URL.
I have multiple concerns with this:-
If I change the URL of js from something local to something remote, this would result in a completely new app and now I don't need to go through the App Store to upgrade my app version. Can this be a potential issue in the future?
Since anybody can open this JS in a browser which might have important information like client id and secret for the app, can this be an issue as well?
I am not 100% sure. You can indeed update hybrid app easier and if it is only a quick fix you don't need to go through apple store verification process. Apple can also delete your app and ban you if you don't follow guidelines. Usually your js is local in production for instant app start time, and the network is used only for fresh data.
This is solved with an authentication mechanism.

Check if app is installed from webpage

I have an iOS and Android app and I'm building a corresponding website. I would like that the webpage, if opened using a mobile device, opens the app or its corresponding app store page (without using Facebook app links).
On the app side everything is working, including the url schema.
Does someone know how to implement this procedure, without external services, using HTML and JS?
Thanks in advance for your help.
To be honest, this is kind of a pain to implement on your own. There is no easy way to handle everything without a ton of nasty edge cases, most notably the 'Cannot Open Page" error users will see if they don't have your app installed. Until iOS 9, a reasonable basic implementation was putting a JavaScript redirect like this into a dedicated redirect page on your site:
setTimeout(function() {
window.location = "https://yourdomain.com";
}, 25);
// If "yourapp://" is registered, the user will see a dialog
// asking if they want to open your app. If they agree, your
// app will launch immediately and the timer won't fire.
// If not installed, you'll get an ugly "Cannot Open Page"
// dialogue and your fallback page will open when the timer expires.
window.location = "yourapp://";
Unfortunately this would still show a 'Cannot Open Page' error, but until recently it was possible to get around this in a reasonably user-friendly way by using a more nuanced version of this script. Sadly, Apple intentionally broke that with the iOS 9.2 update, so custom URL schemes are actually pretty much useless for deep linking now, unless you are certain the app is already installed on that device.
Apple is obviously trying to push the newer Universal Links standard as much as possible. Universal Links lets you use a normal http:// URL to a page on your website (the page could be a simple redirection to your desired fallback webpage without the custom URL trigger that causes the 'Cannot Open Page' error), which is intercepted by your phone and sent directly into your app if installed.
This is quite a lot to handle, so the best option might be a free service like Branch.io (full disclosure: I work with the team) to take care of all the technical aspects. You can find examples of apps using the Branch service here.

How to open iOS App Store from website in a WebView wrapped app?

We have an old iOS app which used WebView to load our website at "m.blablabla.com" (basically, it was wrapping our mobile website).
It's really old. We don't even have build files for that anymore. It has been replaced by a new native app.
But we still have thousands of users who haven't upgraded (even though they can), probably because they turned off auto-update and don't check for updates.
So we added an html/css/javascript message to the mobile website saying "We have a new app! This one will stop being supported soon. [ Update Now ]"
Here I am, genius with no iOS WebView experience (and no environment to test this old app either). I linked the "Update Now" button to our app on the itunes websites, thinking -- it's a WebView, I'm sure the Apple device will figure out it needs to open the app store.
Nope!
Button click does nothing.
I'm actually not sure why it's not working -- not sure if the button click is not registering, or because the device doesn't know what to do with the link.
Any suggestions?
Is there perhaps a specific way to launch app store using JavaScript when this button is clicked...?
Code sample: HTML
Update Now
Code sample: JavaScript
function update () {
window.location = 'https://itunes.apple.com/app/blablabla/id123456789';
}
(Just extracted the relevant code. Implementation is slightly different. On our Android WebView app, it redirects user inside the WebView to the Google Play store app page [using the google play store url]. So the surrounding code is fine, we tested it by mocking the app in Google Chrome. But in the iOS app, just looks like the app doesn't know what to do with the url.)

Can I embed a chrome extension app as part of my main AngularJS app?

I have been doing a lot of reading and studying to figure out.
I basically just want my main AngularJS application to run, but also include an embedded Chrome Extension app - in this case, have regularly scheduled alarms (using the chrome.alarm API).
I want all users of my AngularJS app to have automatic access to the Chrome extension app, embedded in the main clientside one with lots of other Angular features.
It seems like I have to manually enable my Chrome app in Developer mode on my browser and even drag my Chrome app specifically to a location in my Chrome browser. I don't understand how end users can just automatically use my Chrome app then.
I need to add here I have never really used jQuery, only AngularJS but AngularJS extensively. My AngularJS app is the frontend, the backend is provided by Rails.
Some advice would be really helpful. I hope I am not downvoted as it is strange how sometimes questions get downvoted and I am not sure why...I don't really know where else to go with this question.
EDIT:
Ok some code to demonstrate:
myangularapp.controller('myappcontroller', function($scope, $http) {
var delayvar = 5;
chrome.alarms.create("arandomalarm", {delay: delayvar});
};
This doesn't just work as part of my AngularJS, I tried creating a manifest.json file in the app/assets folder too. As well as a background.js file there and my-chrome-app.js file. "chrome.alarms" is undefined, but I haven't enabled Developer mode yet. But still, how are end users supposed to use it if just to make me use it I need to do so much specific browser configuration?
You should have a look at Content Scripts and then at Message Passing which explains you how to communicate between a web page and an Chrome extension.
its not possible to automatically install a chrome extension. the user must install it from the chrome store.
you may make it easier for them to install it by providing an inline installation from your webpage. its in the official documentation and you can see an example on this page with the "add to chrome" button:
http://plusfortrello.com (one of my chrome extensions which has inline installation inside that page).
that example button is further customized to display a message instead if the user is not on chrome desktop.
if your extension also has permission to your webpage then you can also detect from your webpage if the extension is already install it (to hide the button, send messages to it and such).

Meteor rendering in Adobe DPS Overlay after redirect from Facebook Login

I'm running into a pretty specific problem (2 problems, actually, but I believe they're related) and am hoping someone out there can shed some light on what's going on.
I have a Meteor application running inside an HTML overlay inside of an Adobe Digital Publishing Suite (DPS) article. I've tested this with as simple of a configuration as possible, and am able to reproduce the issue consistently.
Overview
1- Meteor works fine in Mobile Safari, and Mobile Chrome on an iPad (3rd gen, ios 6.1.7) but the rendering inside of an Adobe DPS article is generating an error:
TypeError: 'undefined' is not a function
While this error doesn't affect rendering, I believe it's related to my 2nd problem:
2- Upon redirect from facebook authentication (alt. / non-JSSDK flow) the page will not render at all, but there is no additional error message other than #1 above.
Code Example / Details
1. "Headless" browser
I'm Using an HTML overlay in an article, set up inside of InDesign and published to DPS using Folio Producer. The overlay is pointing to a test url (e.g. http://dmx.dod.fbchat.meteor.com), and is refreshed each time the specific page on the article is brought into view.
The details of the browser are as follows:
appVersion: 5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
userAgent: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
I do know that there are some restrictions on this browser (for example, alert = null;), and it's considered "headless" because it's not a legitimate version of chrome or safari, with no address bars, etc.
2. The redirect is achieved via the following method
create a brand new Meteor project (e.g. meteor create DPSFBRender)
decide on the meteor uri you're going to host it from (e.g. dmx.dod.fbchat.meteor.com)
create an application on facebook (https://developers.facebook.com/apps), note the App ID.
add your meteor uri to the domain and to the redirect uri on facebook. for example:
domain: dmx.dod.fbchat.meteor.com
redirect uri: http://dmx.dod.fbchat.meteor.com/
add the following two lines to the click event for the button inside your default meteor project js file:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=[FB APP ID]&redirect_uri=[URL WHERE YOU'LL HOST TEST]&state='+randID+'&response_type=token&scope=[LIST OF PERMISSIONS];
So, for example, if my testing URL were dmx.dod.fbchat.meteor.com, my FB App ID were 514080555337856 and my list of permissions were lengthy (see below), my 2nd line would look like this:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=514080555337856&redirect_uri=http://dmx.dod.fbchat.meteor.com/&state='+randID+'&response_type=token&scope=create_note,email,friends_about_me,friends_actions.books,friends_actions.music,friends_actions.news,friends_actions.video,friends_activities,friends_birthday,friends_education_history,friends_events,friends_games_activity,friends_groups,friends_hometown,friends_interests,friends_likes,friends_location,friends_notes,friends_photo_video_tags,friends_photos,friends_questions,friends_relationship_details,friends_relationships,friends_religion_politics,friends_status,friends_subscriptions,friends_videos,friends_website,friends_work_history,photo_upload,publish_actions,publish_stream,read_friendlists,read_mailbox,share_item,status_update,user_about_me,user_friends,user_groups,user_interests,user_photos,user_relationship_details,user_status,video_upload,xmpp_login';
deploy your meteor app to the test uri (e.g. meteor deploy dms.dod.fbchat.meteor.com)
point your html overlay inside your DPS article to your URL
deploy / publish your article, open it up inside DPS viewer on the iPad, and click on the button, to activate the redirect.
You'll be prompted to allow the FB app permissions, accept.
You'll be navigated back to your meteor url, but the page will not appear.
If you change article pages, go out of the article and back in, or just bring up your app bar, and then go back to the article, the page will refresh, and render.
As long as you have your permissions set (as long as you aren't prompted to accept), the page will render fine. It is only after the FB prompts from the custom login and the subsequent redirect that the page won't render.
If you want to test it again, log into your fb account in a regular browser, and delete the app.
3. Debugging / Discovery
I started debugging this, using debuggify, and that's when I was able to see the TypeError: 'undefined' is not a function error. It doesn't stop anything from rendering at first glance, but I believe on the redirect that it is the culprit (see thoughts section below).
This error will appear on ANY meteor page that is rendered inside a DPS overlay. It doesn't have to be a redirect, or have anything on it. You can simply create a new meteor project, deploy it, point an HTML overlay in DPS to it, and the error will appear (only noticeable with a remote debugging tool like debuggify).
Likewise, this error will not occur inside of the IOS safari mobile browser, or the chrome browser. The above-mentioned rendering problem after redirect from FB will also work as expected in both browsers (the page will render after the "accept permissions" screens).
The 'undefined'... error has no stack trace:
Stack: TypeError: 'undefined' is not a function at ? (http://dmx.dod.fbchat.meteor.com/:1:0)
..although we do know that it happens after the load event:
Happened: After onload
Thoughts
I'm thinking this may be a combination of the dynamic JS loading inherent in Meteor, combined with the redirect. Simply, the redirect isn't waiting long enough for the JS to load (especially handlebars) and it therefore isn't rendering.
I don't believe the entire page is shut down, because in my app (not the tests) I am harvesting the App Key inside the URL Hash, and successfully storing it. So, I know that Javascript isn't completely shut down on the page. It's just the rendering portion for some reason that is not working.
I believe the 'undefined' is not a function error is related - could be Jquery, Handlebars, DDP.... something isn't loaded when expected. On a normal page load (e.g. a refresh) the browser is overcoming this. On the redirect from FB, it isn't.
It may have to do with the JS/Browser restrictions for the embedded DPS browser. Adobe limits some functionality (for security and for performance reasons), and maybe they're turning something off that meteor needs to run.
Workarounds I've tried:
Using the Default Meteor FB Login -- doesn't recognize the 'headless browser', and popups are disallowed in DPS anyway.
Using the standard JSSDK login flow from FB -- same deal, popups aren't allowed
Ideas?
So, at this point, I'm open to anything, even if it's not solving this specific problem.
Workarounds, similar problems you've experienced, thoughts, speculation on why this may be happening on the redirect, but not normally, etc.
I know there may be several ways to skin this cat, but I'm stuck right now, and would love to hear some suggestions. I just need to get FB login to work, inside of DPS. I don't care how, even if all the code is client side (this is just a test, not a production system)
I've even considered trying to edit the accounts-facebook and accounts-base packages in meteor to recognize a headless browser, but don't even know where to start on that...
Also, the 'undefined'... error happens on every single meteor page inside a DPS article, no matter what. That's annoying, and may be useful for some mobile headless browser compatibility improvements, if someone has any idea why it's occurring.
Follow ups are welcome as well. I'll be monitoring this thread.
It turns out that Tom Coleman helped me find this specific problem.
When JS is minified, if there's a missing semicolon, it can wreak havoc, and cause the above-mentioned 'undefined' error.
So, after further testing, I've discovered that this is most likely inside of the Adobe-specific DPS Javascript that is loaded with every overlay.
I've filed a bug with Adobe and will see if/when it's fixed, if it fixes the rendering problem as well.

Categories

Resources