Search code examples
androidangularcrashandroid-webviewwkwebview

Angular 7 website crashing on android WebView when linked from Facebook/Instagram

I have searched through all sources I could find and tried everything, but can't seem to find a solution. I have a website (Angular 7 form) that runs perfectly on all devices and all browsers BUT when I posted a link on Facebook, on Android phones it opens in Facebook's WebView browser and crashes when hitting the first button or when pressing the three dots in the browser corner. The WebView browser works well on some Iphones, but some have the same issue. Also the css stylings are not similar, the background is not covering the whole device and button is almost not visible. I tried posting a link straight to the other pages on the site, and always when navigating to next page on the router or tapping basically anything on the page, it crashes.

Some testers claimed that they could make it to the third page (out of 8), and then it crashed.

I've read about fixes and tried the following:

  1. Removed Google Tag manager script, since it was inside an Iframe
  2. Changed CSS styling so that there are no width/height values in pixels or percents
  3. Added viewport meta tags
  4. Checked that all URL:s are https
  5. Removed target="_blank" from a link on the last page
  6. Changed CSS styling so that positions are absolute

Is there something else that the WebView doesn't support? Where do I find this information or should I just keep guessing? Is there a way to debug the WebView somehow, when it's not my own app's WebView but Facebook's?

Thanks in advance, this is such an annoying problem! Unfortunately this website is the kind that will be published through social media.

Solution

  • So I finally solved this (workaround), with only one line of code. My workaround is to redirect the user to an external browser, when it tries to open in Facebook's or Instagram's In App browser.

    I detect if it's FB or Instagram and then run this line of code in the html:

    <meta http-equiv="refresh" content="0; url=intent://YOURURL#Intent;scheme=https;action=android.intent.action.VIEW;end;" />

    Hope this helps someone, these In App browsers seem to be a real pain!