Update Service Worker in Facebook Browser - facebook

Got a problem where some of our users have a buggy Service Worker sitting in their Facebook Browsers from our sites.
The problem: Facebook App users are getting our 'you are offline page' on the FB browser when they access our pages shared on FB.
The bug appeared to be that an old version of Google's Workbox (3.6.1) was automatically returning the 'You Are Offline' page in the FB app using Chrome 75. Updating Workbox fixed it.
The reference to Workbox was in the service worker, so when we updated our Workbox version (which fixed the issue) some users still had the old one cached.
If users clear their FB App caches or reinstall FB, then all's well and they can see our content. But we'd like to try to force the SW to update without asking them to do that.
To wipe the old Service Worker out from the FB browser, we tried the following:
<script>
"use strict";
console.log("Service Worker Registration");
function isFacebookApp() {
var ua = navigator.userAgent || navigator.vendor || window.opera;
return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
}
if ("serviceWorker" in navigator) {
if(isFacebookApp() == true) {
console.log("Service Worker Registration: using v2, via Facebook App");
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
console.log("Service Worker Registration: "+registration);
registration.unregister();
}
});
} else {
console.log("Service Worker Registration: using v2, not via Facebook App");
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js");
});
}
}
</script>
However our analytics show that we're still getting hits on the You Are Offline page, and we're still getting reports from users that they can's follow links to our articles.
Can anyone help? Is there a way of forcing FB's in-app browser to update the cache, and get our users using a working Service Worker?
Update
So far we have tried:
Fooling the browser to update the Service worker by using a query string in the SW registration URL
Iterating through the registrations and unregister()ing (see above)
Using skipWaiting() in the Service Worker code
Adding 'no-cache' to our headers on sw.js
Ensuring that sw.js isn't being cached by the server
Removing or changing the /offline page resulted in net::ERR_FAILED error
We suspected that all our service worker revisions may have some unseen fault in them, so we tried an 'empty' service worker to see if that would work and flush out the others
Our analytics indicate the following:
Chrome Mobile 75 may be an issue
problems seem to have occurred since 6/7 June.
Nothing's worked: our Service Worker, or something, is still returning the Offline page...

This is a bug in Chrome/the Chromium WebView, tracked in https://bugs.chromium.org/p/chromium/issues/detail?id=977784
The fix should be broadly rolled out at this point.

we experienced the same problem but presenting slightly differently - our users began receiving an error message "net:: ERR FAILED" though it sounds like the same cause. The problem began around 10 days ago, and the only way I've managed to get around the cache is to send the users to a new version of the site - by removing the www. from the URL that I'm sending to, and stopping this from 301'ing to with the www.
I also tried a bunch of solutions like you have, but it doesn't seem to be possible to get the service worker to contact the website - if you put Charles between your phone and the internet you'll see no traffic reaches your site. I'm hoping that after a period of disuse the service worker will be cleaned up by the app cache and we can switch back. Sorry I can't be more help, but rest assured you're not alone!

Related

Facebook login - what on earth am I doing wrong

I'm tearing my hair out here.
We've got a web app that is hosted on a bunch of different domains and we have a facebook login on the page. This works just peachy. Most of them run of our root domain eg newsite.ourplatform.com and we reuse the same facebook app and add a new domain in.
We've had a request to set up a new site on a different url. In the past, this hasn't really been a problem. We set up a new facebook app, add the appid to out config and voila, facebook login working. (we don't do this so often, so I've potentially broken it)
This time around. I've set up a new app id and plugged it in, but whenever I call the facebook login, it authenticates me, but I get a useless response from facebook.
eg. On a working site I call
FB.api("/me/", function(response){console.log(JSON.stringify(response));});
and get response
"{id":"12345678910","email":"my#email.com","first_name":"My Name","gender":"male","last_name":"Myname","link":"https://www.facebook.com/app_scoped_user_id/12345678910/","locale":"en_GB","name":"My Name","timezone":10,"updated_time":"2014-01-19T10:44:20+0000","verified":true}
but on the broken site I do the same call and get a response
{"name":"MyName","id":"12345678910"}
Which is sort of good, but I need their email. As far as I can tell, I'm not asking for any permissions beyond email,public_profile and user_friends
Because of the way the app setup works, we have different apps running 2.1, 2.2 and 2.4 and this new one on 2.4 doesn't work. I'm not sure if that's a red herring or if I've got a misconfigured facebook app.
(edit - removed the sites affected to protect the innocent)
As #CBroe said you really need to checkout the v2.4 changelog for the API. In version 2.4 of the API Facebook introduced 'declarative fields'. This means that when you make a base request, like to /me you will only get a small amount of info back, e.g. 'name' and 'id'.
You have two options to get more fields:
Option One
FB.api('/me?fields=first_name,last_name,gender', function(response) {
console.log(response)
});
Option Two
FB.api('/me', function(response) {
console.log(response)
}, {'fields': 'first_name, last_name, gender'})
This will return a response that looks like the following:
{"first_name":"First", "last_name":"Last", "gender":"gender", "id":"ID"}
The key in the request above is specifying the fields URL parameter in your request and is documented in the link #CBroe linked and I have linked above.

Azure mobile facebook authentication with iPhone HTML5 in app (full screen) mode

I have an HTML5 application that uses Azure mobile services authentication to login (straight from the example code...provided below). It works fine in all desktop browsers and iPhone 5 in Safari. But from app / full screen mode, it does nothing (doesn't ask for permission to show a popup window like it does in safari and no popup windows shows up) and I can wait forever and nothing happens. If I invoke it a second time, it gives an error saying "Error: Unexpected failure"...perhaps because the 1st attempt is still running? Any help/insight is appreciated.
client.login ("facebook").done(function (results) {
alert("You are now logged in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
edited update with more info and 2 potential ideas*
I did some more research and found a site that uses an approach that overcomes this problem and also solves two other side effects with the current Azure mobile approach to authentication. I think the Azure mobile team might be looking to do something similar because there are some hints of other authentication options in the code (although difficult to read and be sure because the minimized code is obsfucated). It might be just a matter of activating these in the code...
The "solution":
Go to http://m.bcwars.com/ and click on the Facebook login. You'll see it works perfectly in iPhone Safari in "app mode" becuase instead of doing a popup, it simply stays in the current browser window.
This approach solves two other problems with the current Azure mobile approach. First, the popup gets interpreted by most browsers as a potential ad and is either blocked automatically (desktop Chrome) ... and the user doesn't know why it's not working...or gives a warning which the user has to approve (iPhone Safari in "browser mode") which is a hassle. And if the user has a popup blocker, it gets more difficult and even more potential for the user not getting it to work properly. The bcwars.com method doesn't have this problem.
Second, in iPhone Safari, when the popup window auto closes, the original page doesn't get focus if there are other browser windows open in Safari. Instead, it's in the smaller/slide mode so they can choose which one to show. If this happens, the user has to go through one more sttep...click on the browser window to activate it and give it focus..again more of a pain and more potential for them to mess up and not do it correctly and need help. The m.bcwars.com doesn't have this problem.
Azure options:
Looking at the Azure mobile code it looks like may already have the solution. I can't read it easliy becuase it's minified/obsfucated, but it seems to have 4 options (including iFrame, etc.) for invoking the authentication, and only 1 (the "less ideal one" of a popup) is being used. An easy solution would be to set a property to allow one of the alternate authentications to work. But I can't read it well enough to figure it out. Another would be to hack the code (temporarily until a fix is put up by Microsoft).
Could I get some help there perhaps?
You can implement an authentication flow with Facebook that doesn't use a popup. The basic idea is to use the 'Web Flow' for doing the login, and once the window return from the login, use the access token to login the user in to Azure Mobile Services.
The Facebook documentation for doing this is here:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2
Some code samples to make it easier for you.
You would start by something like this:
(Remember to replace YOUR_APP_ID and YOUR_URL with something relevant to your site.
function logIn() {
window.location.replace('https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2FYOUR_URL&response_type=token')
}
This redirects the window to the Facebook page for the user to log in and authorize your app. When the user is done, Facebook will redirect the user back to YOUR_URL given above.
There you can handle the redirect and do the Mobile Services Login with something like this:
function handleLoginResponse() {
var frag = $.deparam.fragment();
if (frag.hasOwnProperty("access_token")) {
client.login("facebook", { access_token: frag.access_token }).then(function () {
// you're logged in
}, function (error) {
alert(error);
});
}
}
In here you parse the access token you get as a URL fragment and pass it as argument to the login call you make to Azure Mobile Services.
This code depends on the jquery BBQ plugin to handle the URL fragment easily.
Hope this solves your problem!

AgileToolkit OAuth add-on error 500 at facebook's mobile site

I am using the OAuth Facebook controller add-on for ATK4.
It works as expected when authenticating with Facebook from a regular desktop browser.
It works when authenticating using a mobile browser that is telling face book that it's a desktop browser.
It does not work when Facebook detects a mobile browser and redirects to m.facebook.com/dialog/oath.
What's more, is that it works fine for signups from mobile browsers (ie, when Facebook asks the user to give permission to the app).
The login flow stops with an Error 500 at:
https://m.facebook.com/dialog/oauth?redirect_uri={my_url_encoded_landing_page_where_the_OAuth_controller_lives}&scope=email&client_id={fb_app_id}
What the hell is going on here? There isn't some difference between the Facebook mobile service and the regular one that the addon isn't taking care of, or is there?
It must be something I'm doing wrong. In init() on the page that handles the FB, I am doing the following:
function init(){
parent::init();
$f = $this->add("oauth/Controller_OAuth_Facebook", array('sign_method'=>'PLAINTEXT'));
if ($fbtoken = $f->check()) {
$f->setSignatureInfo();
$f->setAuthToken($fbtoken["access_token"], $fbtoken["expires"]);
$s = $this->add("sni/Controller_SNI_Facebook");
$s->setOAuth($f);
// ...
// grab profile from SNI, database lookup, session stuff, etc
// ...
}
}
I've tried all three sign_methods, and tried leaving it alone, but that doesn't make much difference because the user is not making it back to the controller with an access token to use anyway.
I tried creating a new app with Facebook and I get the same issues with a basically vanilla configuration on that. I've only marked and specified the "Website with Facebook Login" site URL integration.
The image below was captured from Chrome after overriding the user agent to a mobile device to trigger the forward to facebook's mobile servers:
Screen shot of request
Facebook closed my bug report with them stating that it's not an issue since no one else is reporting the bug. I am removing the ATK4 tag, as I get the same issue using the example PHP code provided by Facebook on GIT.
Created dedicated example here:
http://demo.ambienttech.lv/d.html?ns=d3
Example is downloadable and includes instructions of setting up facebook app as well. See if that helps.
Try This:
<?php
class page_fb extends Page {
function init(){
parent::init();
$f = $this->add("oauth/Controller_OAuth_Facebook");
$fbtoken = $this->api->recall("fbtoken");
if ($m = $_GET["error_msg"]){
$v=$this->add("View_Error");
$v->add("Text")->setHTML("You can't connect to the application.");
$v->add("Button")->setHTML("Try again")->js("click", $this->js()->univ()->location("fb"));
return;
}
if (!$fbtoken){
if ($fbtoken = $f->check("email")){
$this->api->memorize("fbtoken", $fbtoken);
$this->api->redirect($this->api->url("/index"));
}
} else {
$f->setSignatureInfo();
$f->setAuthToken($fbtoken["access_token"], $fbtoken["expires"]);
$c = $this->add("sni/Controller_SNI_Facebook");
$c->setOAuth($f);
if (!$this->api->recall("fbuserinfo")){
$this->api->memorize("fbuserinfo", $c->getUserProfile());
}
$info = $this->api->recall("fbuserinfo");
$username = $info->username;
$img = $c->customRequest("/" . $username . "/picture?type=large");
$this->api->memorize("userimg", $img);
$this->api->memorize("userinfo", $info);
if (!$this->api->auth->isLoggedIn()){
$this->api->auth->login($info->email);
}
$this->api->redirect($this->api->url("/index"));
}
}
}
I've got the same problem, but using PHP: just using a mobile web browser is not working, giving '500 internal server error'.
I'm just asking myself if exists a parameter for the method getLoginUrl to force return a non-mobile version of the authentication page...
I reported this issue here: https://github.com/atk4/atk4-addons/issues/35
Please stay tuned and if you can, you can always make changes yourself and pull request.
I can't test and fix this because strangely I still don't have smart phone :(
Something changed in FB's mobile OAuth service that is causing the error. I ran a test with my code base on a shorter URL (ie; http://domain.net/fb/ rather than http://development.project.domain.net/fb) and it works fine. I am not entirely sure of what exactly is causing the problem as Facebook refuses to acknowledge the issue as being on their server, but I have a few possible culprits that may be triggering the error on their side, but since they don't care, I don't either, and I am providing my results for anyone else who encounters this bs.
The environment I am developing in uses semi-complex (apparently) naming scheme. The development server has its own hostname under a subdomain. The issue may be caused by the fact that there are multiple components to the host portion of the URL or simply too many characters.
The name servers for the development environment are provided by DynDNS. Facebook's mobile OAuth service may be choking on the idea of a development site being hosted on a non-permanent IP address.
I'm not going to do anymore testing on this because it really is a problem with Facebook, not my code or servers, and it will work in production.

Facebook Connect Problems With Grails

I am trying to use the Grails Facebook Authentication plugin but am running into problem. I have (I believe) successfully installed the plugin, put a facebook connect control on a page, and ran the installation script.
When I click on the Facebook Connect button I am correctly brought to Facebook, where I login correctly. At this point the popup closes and nothing happens. I have a custom FacebookAuthService but no breakpoints inside ever get called. I believe I have either 1) hooked up the Service incorrectly or 2) hosed up my Facebook settings so that I am not getting the information back, but I am not sure how to diagnose the problem.
When I run the app locally, it runs on http://localhost:8080/TestApp
In my Facebook App Settings I have tried using "http://localhost", "http://localhost:8080", and "http://localhost:8080/TestApp" as the Site URL and I have "localhost" as the App Domain. What am I missing?
Here is a link to the GitHub Project (I've changed the fb private key).
Any ideas? Thanks.
Button authorize you only on client side, because of Facebook Javascript SDK. Please reload page after susseccful authization, like:
FB.getLoginStatus(function(response) {
if (typeof(response) == 'undefined') {
return
}
if (response.status == 'connected') {
window.location.reload();
}
})
The JS SDK does not currently have support for non-standard ports in this scenario, but come Tuesday, this will be corrected, and it will once again support it.

Facebook API: FB.Connect.requireSession issues

I have a Facebook app that is built as an iFrame. I am using the JavaScript client API loaded via:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
In my initialization code, I use the requireLogin method to ensure that the user has authorized the app. I have found this to be necessary to be able to gather the user's name, avatar, etc. for the scoreboard. Here's a representative code snippet:
FB_RequireFeatures(["Connect","Api"], function() {
FB.Facebook.init("...API_KEY_HERE...", "xd_receiver.htm");
var api = FB.Facebook.apiClient;
api.requireLogin(function() {
api.users_getInfo(
FB.Connect.get_loggedInUser(),
["name", "pic_square", "profile_url"],
function(users, ex) {
/* use the data here */
});
});
});
This causes the iframe to redirect causing the Facebook authorization screen to load within my app's iFrame. This looks junky and is somewhat confusing to the user, e.g. there are two Facebook bars, etc.
Question 1: is there anything I can do to clean this up while still implementing as an iFrame, and still using the JavaScript APIs?
According to the FB API documentation:
FB.ApiClient.requireLogin
This method is deprecated - use
FB.Connect.requireSession instead.
My experience though when I replace api.requireLogin with FB.Connect.requireSession it never gets invoked. I'd prefer the recommended way of doing it but I struggled and was not able to find a way to get it to work. I tried adding various arguments for the other two parameters as well with seemingly no effect. My expectation is that this method will load in a dialog box inside my app iFrame with a similar authorization message.
Question 2: what am I missing with getting FB.Connect.requireSession to properly prompt the user for authorization?
Finally, at the end of the game, the app prompts the user for the ability to publish their score to their stream via FB.Connect.streamPublish. Which leads me to...
Question 3: am I loading the correct features? Do I need both "Api" and "Connect"? Am I missing any others?
Here is a summary of the changes I needed to make to clean up the authorization process. It appears that iFrames must fully redirect to properly authorize. I tried using the FBConnect authorization but it was a strange experience of popup windows and FBConnect buttons.
Ultimately this game me the expected experience that I've seen with other FB apps:
FB_RequireFeatures(["Connect","Api"], function() {
var apiKey = "...",
canvasUrl = "http://apps.facebook.com/...";
function authRedirect() {
// need to break out of iFrame
window.top.location.href = "http://www.facebook.com/login.php?v=1.0&api_key="+encodeURIComponent(apiKey)+"&next="+encodeURIComponent(canvasUrl)+"&canvas=";
}
FB.Facebook.init(apiKey, "xd_receiver.htm");
FB.ensureInit(function() {
FB.Connect.ifUserConnected(
function() {
var uid = FB.Connect.get_loggedInUser();
if (!uid) {
authRedirect();
return;
}
FB.Facebook.apiClient.users_getInfo(
uid,
["name", "pic_square", "profile_url"],
function(users, ex) {
/* user the data here */
});
},
authRedirect);
});
For iFrames, the solution was ultimately to redirect to the login URL which becomes the authorization URL if they are not already logged in.
I think that FB.requireSession only works from a FB connect site outside of
Facebook. If you're using an app hosted on apps.facebook.com use the php api
call instead,
$facebook = new Facebook($appapikey, $appsecret);
$facebook->require_login();
or link to the login page.
Of these methods to login
* Using the PHP client library
* Directing users to login.php
* Including the requirelogin attribute in a link or form
* Using FBML
only the first 2 are available to iframe apps hosted on apps.facebook.com
I think requirelogin and fbml only work with fbml canvas apps.
see
http://wiki.developers.facebook.com/index.php/Authorization_and_Authentication_for_Canvas_Page_Applications_on_Facebook
Question 1: is there anything I can do
to clean this up while still
implementing as an iFrame, and still
using the JavaScript APIs?
Question 2: what am I missing with
getting FB.Connect.requireSession to
properly prompt the user for
authorization?
Please have a look at this. This article discusses correct use of require session and provides links on how to implement that. And yes, you are right, the requireLogin has been deprecated and won't help any more.
Question 3: am I loading the correct
features? Do I need both "Api" and
"Connect"? Am I missing any others?
As far as I know, you can use both API and Connect together, basically you access Facebook's API with the help of JavaScript.
For iframe apps however, there is no great help and minimum support of API with some handful functionality available. See this for more info.
This causes the iframe to redirect
causing the Facebook authorization
screen to load within my app's iFrame.
This looks junky and is somewhat
confusing to the user, e.g. there are
two Facebook bars, etc.
Finally and personally I have not seen any iframe app requiring user to add the app first. This will create the problem of two bars you mentioned as quoted above.
The link I posted at the beginning of my answer has some useful links to get you started and decide the next-steps or possibly making changes to your apps.