Browser adds the same facebook user avatar image in on every page - javascript

I'm using AngularJs 1.4 with ngFacebook module. I have a similar issue which I have been convinced that can be ignored more about this here.
But the problem here (it had existed, but I didn't noticed it until now) is that avatars which I fetch during my App login process are progressively added to browser cache on each Back<->Forward click on browser's buttons after login. Here is example url: https://scontent.xx.fbcdn.net/hprofile-xla1/v/t1.0-1/c15.0.50.50/p50x50/1379841_10150004552801901_469209496895221757_n.jpg?oh=6bb0a02a85736c3eef0f79cc7f4f652e&oe=5701F533
(This is test user which no more exists) I show the upper full fb url for more clearance.
I just want to prevent accumulating of these images in browser cache.
And may be more important - How did you proceed in such cases, best practice, only using facebook login utilizing fb profile pictures as avatars in my WebApp?
Forgot to mention that I'm using Phaser framework where I load this avatar again, but it already exists in browser cache, because Angular based page already use it in my header bar. I'm confused about that.
PP: Refreshing through browser removes all.

Solution - if you use fb login along with Phaser framework, and use fb user profile as avatar in both Phaser canvas game page and on some Angular page, then don't set this in Phaser preload stage:
this.game.load.crossOrigin = true;
Facebook has its own iframe based code to handle such COR issues.

Related

How can I open a mobile app (eg Facebook) via a browser redirect?

I've been searching for the past few hours for this and decided I'd just try asking.
I have a URL that people will visit, it loads a PHP page which checks a database for a specific Facebook link, and then instantly redirects them. I want it to open the app if they have it, otherwise it will go to the browser version.
The issue I'm facing is that I can't get the Facebook app to open when it's a redirect. If I instead create a button or a link and I tap on it, it will launch the app correctly, but navigating to that same link without the user interaction will not work.
I know it's possible because I've seen it done elsewhere, but I guess there is something I'm missing.
I've tried using headers("Location: fb://profile/username") and have also tried other Javascript options such as window.open, window.location, window.location.href and window.location.replace
So far I've only tested this an on android phone. The link initially launches in the chrome app.
If you have a look at this Youtube video, you'll see it's doing what I want to do. It goes to a website and then straight away launches the app.
https://youtu.be/Acl7JnRFxzI?t=17
Thanks!
I think you talked about Deep linking.
Deep linking is not supported on Web so there aren’t the same functionalities as on Android and iOS. You still need to guide your users in the right direction, so we recommend adding a link to your login page.

Is it possible to install a PWA precached with server's data?

Let me give you an example of the flow I am trying to achieve:
A user enters the website
The user has everything loaded (both files and network requests)
Files are now cached due to fetch event listener
The user installs the app on their phone (so far everything works as expected)
All the data that has already been fetched by the user is transferred to the app so that the user could launch the app in offline mode.
Currently, the last step is not working. User must open the app at least once whilst online in order to make it work. Is it possible to "transfer" the website's cache to the app? If so, could you nudge me in the right direction with some helpful links? Thanks!

Facebook Login and UIWebview

I'm currently developing an app that is essentially a single WebView that allows access to a specific website (terrible idea I know, but the decision comes from higher up); said website offers the option to login through Facebook with the standard Facebook Connect procedure.
The login process works fine in Mobile Safari but unfortunately when a UIWebView attempts to do the same thing after authorizing a blank page is displayed and nothing happens. This is of course because of the page actually being just a JavaScript that communicates with the original page through postMessage (I think!).
I tried searching and while this is a pretty widely recognized problem all the solutions I found are either not applicable or won't work. I found somewhere that it's possible to pass mode=redirect to the oauth URL to prevent the whole process to involve popups which sounds promising but as far as I tell it doesn't work.
Is there a way to make Facebook Connect work for a website inside a UIWebView? I'm considering the option of having the Facebook button call a special URL that I would then listen to inside the ap to trigger a native authentication process but unfortunately since my company is not the one developing the website so this kind of solution would be the least preferred.

Deep linking javascript powered websites

I have a website which has two versions, an all singing all dancing javascript powered application which is served when you request the root url
/
As you navigate around the lovely website the content updates, as does the url, thanks to html5 push state or good old correctly formatted #! urls. However if you don't have javascript enabled you can still use all functionality of the site as each piece of content also exists under it's own url. This is great for 3 reasons
non javascript users can still use the site
SEO - web crawlers can index the site easily
everything is shareable on social networks
The third reason is very important to me as every piece of content must be individually shareable on the site. And because each piece of content has it's own url it is easy to deep link to that url, and each piece of content can have it's own specific open graph data.
However the issue I hit is the following. You are a normal person and have javascript enabled and you are browsing and image gallery on the site and decide to share the picture of a lovely cat you have found. Using javascript the url has been updated to
/gallery/lovely-cat
You share this url and your friend clicks on it. When they click on the link the server sends you the non javascript / web crawler version of the site, and the experience is no where near as nice as the javascript version you would have been served if you directly went to the root of the site and navigated there.
Do anyone have a nice solution / alternative setup to solve this problems? I have several hacks which work, however I am not that happy with them. They include :
javascript redirect to the root of the site on every page and store a cookie / add a #! to the url so on page render the javascript router will show the correct content. ( does google punish automatic javascript redirects? )
render the no javascript page, and add some javascript which redirects the user to the root, similar to above, whenever the user clicks on a link
I don't particularly like either of these solutions, but can't think of a better solution. Rendering the entire javascript app for each page doesn't appear to be a solution to me, as you would end up with bad looking urls such as /gallery/lovely-cat/gallery/another-lovely-cat as you start navigating through the site.
My solution must support old browsers which do not implement push state
Make the "non javascript / web crawler version of the site" the same as the JavaScript version. Just build HTML on the server instead of DOM on the client.
Rendering the entire javascript app for each page doesn't appear to be a solution to me,
That is the robust approach
as you would end up with bad looking urls such as /gallery/lovely-cat/gallery/another-lovely-cat
Only if you linked (and pushStateed) to gallery/another-lovely-cat instead of /gallery/another-lovely-cat. (Note the / at the front).
Try out this plugin it might solve your 3rd reason, along with two reasons.
http://www.asual.com/jquery/address/

Loading js for Facebook Connect on demand

Our site uses Facebook Connect to allow users to post updates to their Facebook. The javascript that allows this has to be loaded directly through Facebook's Feature loader, and we had been loading it on every page where a user might want to connect to Facebook. Unfortunately, because some users have Facebook blocked at their workplace, this is causing our site to hang for those users.
Ideally, what we'd like to do is to load the js through the feature loader only just before it is actually needed. However, we do not know whether the feature will be needed until after the page on which it will be used is already loaded. Specifically, a user will open up a dialog box and check "publish to facebook" before submitting a form by AJAX (but NOT leaving the page). It is at this point that we'd like both to load the Facebook js, and immediately execute the code to bring up their dialog box. Is there a reasonable way to do this?
Essentially what you want to do is load the js on demand after the page has already been loaded. This is certainly doable; there is a decent article that summarizes how you might accomplish it here:
http://ajaxpatterns.org/On-Demand_Javascript
I also like the following little functions from phpjs.org:
http://phpjs.org/functions/require_once:503
http://phpjs.org/functions/include_once:434
http://phpjs.org/functions/include:433

Categories