search

apache / cordova-plugin-inappbrowser

Apache Cordova InAppBrowser Plugin
https://cordova.apache.org/
Apache License 2.0
1.12k stars 2.15k forks source link

Rendering Sharepoint Modern Site Navigation Elements- reactjs? #552

Open Emlynkm opened 5 years ago

Emlynkm commented 5 years ago

Bug Report

Problem

InAppBrowser does not render Sharepoint Online Modern Sites as expected.

What is expected to happen?

InAppBrowser should render the site fully without excluding elements. Note the Blue primary navbar and the site header 'Blank Modern Team Site' in the image below. This is how it should render.

image-issue2

What does actually happen?

All Sharepoint sites visited via the InAppBrowser does not display the main navigation and site header. Note Nav and Site header missing from screenshot below.

image-issue1

Information

As noted this issue presents on all Sharepoint Modern site templates which makes extensive use of Reactjs. Sharepoint "classic" sites seem to render as expected.

Command or Code

To reproduce:

  1. Use sample InAppBrowser code
  2. Navigate to url https://greenlightdev.sharepoint.com/sites/BlankModernTeamSite
  3. Test user and password details are: Username: unlicensed@greenlightdev.onmicrosoft.com Password: Green@123

Environment, Platform, Device

Issue experienced on Android and iOS devices

Version information

Cordova 9.0.0 Cordova-android 8.0.0 Cordova-ios 5.0.1 "cordova-plugin-inappbrowser": "~3.1.0"

Checklist

Jan-Kruse commented 5 years ago

I can reproduce this issue regarding missing elements on SharePoint pages. For example the comments section on modern newspages are missing.

breautek commented 5 years ago

I'm not experience with sharepoint but at a glance this is likely a CSS issue. Does the HTML for the missing elements exists at all in the DOM? If you mess with the CSS inside the web inspector can you make it appear?

Jan-Kruse commented 5 years ago

@breautek The elements are missing in the DOM, so it seems to be not a CSS issue.

I'm using iOS 13.2 Beta with cordova-plugin-inappbrowser on master branch.

breautek commented 5 years ago

How are elements created? Are they created dynamically through javascript?

brodycj commented 5 years ago

I just added the help wanted label.

This does sound like an issue with elements dynamically created, using React JS.

Unfortunately I don't have so much experience with this plugin, suspecting it was not designed to handle this kind of an application.

I wonder if we can glean any ideas from react-native inappbrowser?

breautek commented 5 years ago

I had a look at the debugger, it's not easy to read since everything is minified, but there is an error occurring in the javascript on mobile.

Uncaught (in promise) Error: No callbackHandler found.
    at e.sendMessage (sp-pages-assembly_en-us_55b97cf6b87daa33a4755975e5cedd80.js:formatted:23649)
    at sp-pages-assembly_en-us_55b97cf6b87daa33a4755975e5cedd80.js:formatted:10277

Which I do not see on the desktop, where the navigation bar is working. So I suspect that this error is preventing the bar from rendering properly.

I think this is the most cordova community members can do to assist.

Emlynkm commented 5 years ago

It’s worth noting that these sites render as expected via a mobile device browser. So it’s not a desktop vs mobile issue; the issue then seems to be specific to the InAppBrowser webview/rendering engine.

It’s also worth noting that the Cordova-plugin-safariviewcontroller renders the page as expected. The plugin employs the sfsafariviewcontroller on iOS and Googles Custom Tabs on Android. This plugin does come with its own quirks though eg. After loading events not firing.

So while the above may be a work-around for some it will be good to have the core Cordova plugin capable of rendering these dynamic reactjs components, in the same way as does a mobile browser.

Thx E

On Wed, 16 Oct 2019 at 18:22, Norman Breau notifications@github.com wrote:

I had a look at the debugger, it's not easy to read since everything is minified, but there is an error occurring in the javascript on mobile.

Uncaught (in promise) Error: No callbackHandler found. at e.sendMessage (sp-pages-assembly_en-us_55b97cf6b87daa33a4755975e5cedd80.js:formatted:23649) at sp-pages-assembly_en-us_55b97cf6b87daa33a4755975e5cedd80.js:formatted:10277

Which I do not see on the desktop, where the navigation bar is working. So I suspect that this error is preventing the bar from rendering properly.

I think this is the most cordova community members can do to assist.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/apache/cordova-plugin-inappbrowser/issues/552?email_source=notifications&email_token=AECVTNG3BGCNVEOIU56YNQ3QO45UHA5CNFSM4I73P5RKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBNDFBA#issuecomment-542782084, or unsubscribe https://github.com/notifications/unsubscribe-auth/AECVTNC6CFSVESAT7FBFROLQO45UHANCNFSM4I73P5RA .

Jan-Kruse commented 5 years ago

Looks great! I will give it a try.

brodycj commented 5 years ago

+1 for using cordova-plugin-safariviewcontroller, another nice plugin by @EddyVerbruggen!

I just added the enhancement label, cannot promise when we can work on this due to our maintenance overload.

I think we should document the tip to use cordova-plugin-safariviewcontroller.

I am now wondering how this would work in similar frameworks such as Capacitor, React Native, and Nativescript.