Cannot Load Meteor Site In Facebook Mobile Browser IAB

help
1

Trying to load Meteor site on Facebook’s in-app browser, and getting a series of errors. Will post a screenshot.

Screen Shot 2020-02-13 at 12.33.50 PM
Screen Shot 2020-02-13 at 12.33.50 PM1392×1529 647 KB

2

It could be that the modern browser bundle is being served instead of the legacy. FB browser appears as legacy in my logs. I have no issue with it and by this I mean there is no issue like Meteor Apps don’t work in FB browser.

3

This only started happening on February 3rd, so I’m unsure what’s going on. Could this be a jQuery issue?

4

Hi, ok so this is becoming a problem. Would tag @filipenevola for the time being and see if there is some more experience behind this issue.
What I read in public articles hints to the fact that this Facebook browser is a “lite” browser, not comparable with any of the “traditional” mobile browsers.
For me it works ok on IOS, no complaints here. However on Samsung with Android 9 things are different. It looks like I need the legacy bundle instead of the modern one. I don’t really know how to add Facebook to the list of legacy instead of modern and follow with a test afterwards. Haven’t seen this error until this Android occurrence.

Screen Shot 2020-03-05 at 15.22.08
Screen Shot 2020-03-05 at 15.22.08597×686 55.9 KB

5

ok. some progress on this. It looks that the service worker is blocking the load somehow. Just made a conditional registration of the service worker to exclude the FB browser on Android which is anyway of no use. All looks good now.

@shaggykris did you have a service worker registered for things like PWA?


const isFacebookApp = () => {
    const ua = navigator.userAgent || navigator.vendor || window.opera
    return (ua.indexOf('FBAN') > -1) || (ua.indexOf('FBAV') > -1)
  }

  if ('serviceWorker' in navigator && !isFacebookApp()) {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW')
      })
      .catch(err => {
        console.log('ServiceWorker registration failed: ', err)
      })

    // Refresh all tabs after a service worker update takes place
    let refreshing
    navigator.serviceWorker.addEventListener('controllerchange', () => {
      if (refreshing) { return }
      refreshing = true
      window.location.reload()
    })
  }
6

We have a number of these isFacebookApp() calls :sweat_smile:

7

So oddly enough, it was actually the html script tag for loading Cloudinary on our site that was causing the issue. After moving that to be loaded by

$.getScript("https://widget.cloudinary.com/v2.0/global/all.js", function(err) {
        // Handle errors
    });

in Meteor.startup(), things seemed to resolve themselves.

However, I am strongly taking into consideration what you’re posting here. I have not tested using Facebook Lite yet.