search

Notalib / nativescript-webview-ext

Nativescript plugin with extended WebView functionality
Apache License 2.0
76 stars 37 forks source link

iOS Webview runs on simulator but not on real device #138

Closed louisportalest closed 2 years ago

louisportalest commented 2 years ago

Which platform(s) does your issue occur on?

iOS - 15.6

Please, provide the following version numbers that your issue occurs with:

First of all, thank you for this plugin. I'm trying to use photo-sphere-viewer.js in webview on ios. Everything works fine when i tested on simulator, but when i debug on real device, it just display a blank screen. Both code from simulator and real device are the same.

Code to load the webview:

 let sphereWebView = <WebViewExt>args.object;
    sphereWebView.autoLoadJavaScriptFile('three.min', '~/lib/js/three.min.js');
    sphereWebView.autoLoadJavaScriptFile('browser.min', '~/lib/js/browser.min.js');
    sphereWebView.autoLoadJavaScriptFile('photo-sphere-viewer', '~/lib/js/photo-sphere-viewer.js');
    sphereWebView.autoLoadStyleSheetFile('photo-sphere-viewer.min', '~/lib/css/photo-sphere-viewer.min.css', false);

    sphereWebView.src = `
    <!DOCTYPE html>
    <html>
        <body style="background-color: white;">
          test
          <div id="viewer" style="width: 300 px; height: 300 px;  background-color: white;"></div>
        </body>
    </html>`;

    sphereWebView.on(WebViewExt.loadFinishedEvent, (loadFinishedEventData: LoadFinishedEventData) => {

      const loadJsPromises = [
        sphereWebView.loadJavaScriptFile('startSphereViewer', '~/lib/js/startSphereViewer.js')
      ];

      Promise.all(loadJsPromises).then(() => {
        console.dir('JS Loaded')
      }).catch((error) => {
        console.dir('JS Load Error'),
        console.dir(error)
      });

   });

startSphereViewer.js

const viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    navbar: false,
    panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg'
  });

I notice that are some differences between the trace logs for simulator and real device, especially on real device it shows this.ios.loadHTMLStringBaseURL("null"), but on simulator it is not null.

Real device log

NOTA: WebViewExt<WebViewExt(1798).ios>.registerLocalResource("photo-sphere-viewer.min", "/var/mobile/Containers/Data/Application/EF516304-4C1B-417E-8935-63A3DB608EBC/Library/Application Support/LiveSync/app/lib/css/photo-sphere-viewer.min.css") -> file: "/var/mobile/Containers/Data/Application/EF516304-4C1B-417E-8935-63A4D0608EBC/Library/Application Support/LiveSync/app/lib/css/photo-sphere-viewer.min.css" NOTA: WKWebViewWrapper.loadUrl(content) -> this.ios.loadHTMLStringBaseURL("null") NOTA: WebViewExt.src = " <!DOCTYPE html>

test
" - LoadData(" test
") NOTA: webViewDecidePolicyForNavigationActionDecisionHandler: "about:blank" NOTA: WKNavigationDelegateClass.webViewDecidePolicyForNavigationActionDecisionHandler("about:blank", "-1") -> method:GET "other" NOTA: WKNavigationDelegateClass.webViewDidStartProvisionalNavigation("about:blank") NOTA: WKNavigationDelegateClass.webViewDidFinishNavigation("about:blank") NOTA: WebViewExt._onLoadFinished("about:blank", undefined) - > Injecting webview-bridge JS code NOTA: WebViewExtBase.ensurePromiseSupport() - need to check for promise support. NOTA: WebViewExtBase.ensurePromiseSupport() - promise is supported - polyfill not needed. NOTA: WebViewExtBase.ensureFetchSupport() - need to check for fetch support. NOTA: WebViewExtBase.ensureFetchSupport() - fetch is supported - polyfill not needed. NOTA: WebViewExt.registerLocalResource("startSphereViewer", "~/lib/js/startSphereViewer.js") -> file: "/var/mobile/Containers/Data/Application/EF516304-4C1B-417E-8935-63A3DB608EBC/Library/Application Support/LiveSync/app/lib/js/startSphereViewer.js" NOTA: WebViewExt.loadJavaScriptFiles() - > Loading javascript file: "~/lib/js/startSphereViewer.js"

Simulator log

NOTA: WebViewExt<WebViewExt(1210).ios>.registerLocalResource("photo-sphere-viewer.min", "/Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/lib/css/photo-sphere-viewer.min.css") -> file: "/Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/lib/css/photo-sphere-viewer.min.css" NOTA: WKWebViewWrapper.loadUrl(content) -> this.ios.loadHTMLStringBaseURL("file:////Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/") NOTA: WebViewExt.src = " <!DOCTYPE html>

test
" - LoadData(" test
") NOTA: webViewDecidePolicyForNavigationActionDecisionHandler: "file:////Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/" NOTA: WKNavigationDelegateClass.webViewDecidePolicyForNavigationActionDecisionHandler("file:////Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/", "-1") -> method:GET "other" NOTA: WKNavigationDelegateClass.webViewDidStartProvisionalNavigation("file:////Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/") NOTA: WKNavigationDelegateClass.webViewDidFinishNavigation("file:////Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/") NOTA: WebViewExt._onLoadFinished("file:////Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/", undefined) - > Injecting webview-bridge JS code NOTA: WebViewExtBase.ensurePromiseSupport() - need to check for promise support. NOTA: WebViewExtBase.ensurePromiseSupport() - promise is supported - polyfill not needed. NOTA: WebViewExtBase.ensureFetchSupport() - need to check for fetch support. NOTA: WebViewExtBase.ensureFetchSupport() - fetch is supported - polyfill not needed. NOTA: WebViewExt.registerLocalResource("startSphereViewer", "~/lib/js/startSphereViewer.js") -> file: "/Users/userapp/Library/Developer/CoreSimulator/Devices/E4781558-8864-4088-BF9C-7F162C9AA132/data/Containers/Bundle/Application/B6DAD940-86B5-4924-AFD6-508DB98361B2/userapp.app/app/lib/js/startSphereViewer.js" NOTA: WebViewExt.loadJavaScriptFiles() - > Loading javascript file: "~/lib/js/startSphereViewer.js"