search

mikemaccana / outdated-browser-rework

Detects outdated browsers and advises users to upgrade to a new version. Handles mobile devices!
MIT License
224 stars 62 forks source link

Add name for Facebook Browser to docs #57

Open essteffan opened 5 years ago

essteffan commented 5 years ago

Hi Guys. I'm using outdated-browser-rework in one of my projects and when i try to use the link from my fb page it says "Your browser is out-of0date".

I notice that they have their own browser, Facebook Browser Is there a way to bypass that?

My current setup is: outdatedBrowserRework({ fullscreen: true, browserSupport: { 'Chrome': -15, // Includes Chrome for mobile devices 'Edge': -15, // 'Safari': -15, // 'Mobile Safari': -10, 'Firefox': -15, 'Opera': -15, 'IE': 11 }, })

thanks

essteffan commented 5 years ago

No answer to this guys?

mikemaccana commented 5 years ago

Find the name for FB browser in ua-parser-js and add it to your supported browsers then update the README to tell everyone else!

On Tue, 27 Nov 2018 at 3:18 pm, essteffan notifications@github.com wrote:

No answer to this guys?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mikemaccana/outdated-browser-rework/issues/57#issuecomment-442095911, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKiMo472y4vJJ_AEjEPp6vwlJdu5GYzks5uzVeqgaJpZM4YtYwF .

mikemaccana commented 5 years ago

@essteffan no answer?

kanapka94 commented 5 years ago

Hi @mikemaccana. The name of facebook browser is just: "Facebook". I have the same problem like @essteffan. I will add this name to my config-file and tell you if this will work.

mikemaccana commented 5 years ago

Thanks Adam!

On Mon, 3 Dec 2018 at 11:49 am, Adam notifications@github.com wrote:

Hi @mikemaccana https://github.com/mikemaccana. The name of facebook browser is just: "Facebook". I have the same problem like @essteffan https://github.com/essteffan. I will add this name to my config-file and tell you if it will work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mikemaccana/outdated-browser-rework/issues/57#issuecomment-443683686, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKiMvB5jAkPW9Gqi1d81NHbC3VdaCdGks5u1Q_VgaJpZM4YtYwF .

kanapka94 commented 5 years ago

Hmm, this: 'Facebook': 1 not working :/ I stayed at isUnknownBrowserOK: true.

@mikemaccana do you have any idea?

mikemaccana commented 5 years ago

@kanapka94 Nope, sorry. I don't really use FB so can't test. The code is pretty simple though so it shouldn't take you long to fix!

essteffan commented 5 years ago

Is it fixed guys, sorry i don't get that from the history of this chat :)

mikemaccana commented 5 years ago

@essteffan Nope. If you use FB you can fix it though, it's pretty easy!

EsaNuurtamo commented 5 years ago

Facebook and Instagram uses the core browsers of the device in webview: https://www.stateofdigital.com/facebook-browser-biggest-browser-ignore/

Facebook in-app browser in iOS changes the browser name to "Safari (in-app)" but with android devices you have just "Chrome". You can find out that the browser is opened in facebook from the userAgent string (contains 'FBAN' or 'FBAV' and 'Instagram' for insta).

How could this be handled? The problem is that many of the full features of the browsers won't work in the in-app-version.

Vadorequest commented 4 years ago

Fix it by using isUnknownBrowserOK as mentioned previously.

See https://github.com/UnlyEd/next-right-now/pull/42/commits/f9259c29d7ea5f9fa231bd959dda0e719d148b94

mikemaccana commented 4 years ago

@Vadorequest I'd consider that a workaround, rather that a fix.

If you, @EsaNuurtamo (or anyone else reading this) wants to support Facebook browser please send a PR and some tests and I'll merge it!

See: https://github.com/mikemaccana/outdated-browser-rework/issues/57#issuecomment-442096842

Vadorequest commented 4 years ago

Yeah, it's a workaround, and it doesn't really work for my use case (I thought it did)

The issue is actually different, it's because when you open http://solidarity.unly.org/ from a mobile, from the Facebook/Linkedin app, it'll open the link inside the embedded browser (e.g: embedded chrome running inside fb) and the version of such a browser is out of date, but the end-user cannot do anything about it (updating its own Chrome app won't solve the issue and the warning will still appear on http://solidarity.unly.org/)

This is becoming harder than expected... I think the only thing I can do to fix this would be to disallow all browsers besides IE. (On Android, it uses Chrome and asks to update Chrome, on IOS is uses Safari and asks to update IOS)

Vadorequest commented 4 years ago

I've tried to do the following:

outdatedBrowserRework({
  browserSupport: {
    Chrome: true,
    Edge: true,
    Safari: true,
    "Mobile Safari": true,
    Opera: true,
    Firefox: true,
    Vivaldi: true,
    IE: false
  },
  isUnknownBrowserOK: true, // Needs this to avoid displaying message on Facebook/Instagram internal browser - See https://github.com/mikemaccana/outdated-browser-rework/issues/57
});

But opening https://tfp-unly-solidarity-v3-fix-outdated-browser-fb.now.sh/ from Facebook mobile app still displays the warning. I'm not sure if it's because it doesn't work, or if it's related to some internal caching on the FB browser. Quite hard to debug.

Vadorequest commented 4 years ago

@mikemaccana Are you aware of this issue? 👆 Unrelated to the current issue, but I've disabled OBR entirely until a fix/workaround is found.

mikemaccana commented 4 years ago

@Vadorequest that sounds like a separate issue - isUnknownBrowserOK: true (apparently) not working on Facebook browser.

Vadorequest commented 4 years ago

I do think that's a separate issue, but not for the reason you mention.

I believe Facebook browser uses Chrome (on Android) behind the wheel, but an outdated Chrome. Thus, it displays a warning asking the end-user to update its own Chrome, without understanding it's not the Chrome app installed on the device, but the app used by Facebook (probably managed by them, installed in some server or so)

cain commented 4 years ago

Any update on this besides the workaround?

mikemaccana commented 4 years ago

No @cain did you send a PR?

cain commented 4 years ago

just going to stick to isUnknownBroswerOk

https://stackoverflow.com/a/32348687 Looks like "FBAN" or "FBAV" and even "Instagram" might work but havent tried

joedaniels commented 4 years ago

isUnknownBroswerOk: true still shows a warning when opening in Facebook and Instagram.

cain commented 4 years ago 
outdatedBrowserRework({
  browserSupport: {
    Chrome: 57, // Includes Chrome for mobile devices
    Edge: 16,
    Safari: 11,
    'Mobile Safari': 11,
    Firefox: 52,
    Opera: 50,
    IE: false,
    FBAN: true,
    FBAV: true,
    Instagram: true,
  },
  requireChromeOnAndroid: false,
  isUnknownBrowserOK: true, // Needs this to avoid displaying message on Facebook/Instagram internal browser - See https://github.com/mikemaccana/outdated-browser-rework/issues/57
  debug: false,
});

@joedaniels this confirm works on 2.10

joedaniels commented 4 years ago

@cain I can now confirm isUnknownBrowserOK does indeed work to avoid Facebook, Instagram etc. in app browsers being detected as outdated. However, it would cause IE to be undetected when testing using LambdaTest. This may have just been an issue with their virtual machines or something, I'm not sure, but in the end what worked best for me was the following:

outdatedBrowserRework({
    browserSupport: {
        IE: false
    },
    isUnknownBrowserOK: true,
    requiredCssProperty: 'borderImage',
});

With that borderImage property taken from the original outdated-browser package.