Notalib / nativescript-webview-ext

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

nsWebViewBridge undefined in {NS}-6.3.0 with Vue #58

Closed Rho-bur closed 4 years ago

Rho-bur commented 4 years ago

Make sure to check the demo app(s) for sample usage

Same issue as the #48 except that I don't even get the nsWebViewBridge in the window object, everything else loads correctly.

@m-abs Webpack.config.js does contain { from: { glob: "assets/*/" } } all my assets being in subdirs.

Which platform(s) does your issue occur on?

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

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Is there any code involved?

Vue:

<template>
    <StackLayout>
              <WebViewExt
                      autoInjectJSBridge="true"
                      supportXLocalScheme="true"
                      src="~/assets/static/map.html"
                      builtInZoomControls="false"
                      cacheMode="default"
                      databaseStorage="false"
                      debugMode="true"
                      displayZoomControls="false"
                      domStorage="true"
                      viewPortSize="initial-scale=1.2"
                      @loadFinished="logMe"
                      width="100%"
                      height="100%"
              />

<template>
    </StackLayout>
methods : {
   logMe(args) {
                args.object.emitToWebView("hasMarkers", this.getArea);
            }
}

map.html:

window.addEventListener('DOMContentLoaded', (event) => {
window.nsWebViewBridge.on('hasMarkers', (data) => {
                console.log('markers event from native');
                console.dir(data);
        });
    });
Rho-bur commented 4 years ago

Hi guys, I know this is a pro-bono work you offer to community and I am grateful for your doing it. I guess your time is limited but I'd appreciate if you at least could confirm that this is a known issue.

m-abs commented 4 years ago

Hi @Rho-bur

It is an annoying timing issue. nsWebViewBridge is ready just after load.

Try this.

window.addEventListener('load', (event) => {
setTimeout(() => {
    window.nsWebViewBridge.on('hasMarkers', (data) => {
                console.log('markers event from native');
                console.dir(data);
        });
}, 10);
    });

I'm making a custom event to make it more clear when it is ready, I hope to include it when we release v6.3.0

One minor thing supportXLocalScheme is for internal use.

m-abs commented 4 years ago

I just publish v6.3.0-alpha.3 could you try this for me?

window.addEventListener('ns-brige-ready', (event) => {
    const nsWebViewBridge = event.detail || window.nsWebViewBridge;

    nsWebViewBridge.on('hasMarkers', (data) => {
                console.log('markers event from native');
                console.dir(data);
    });
 });
Rho-bur commented 4 years ago

Hi @m-abs , Thank you for taking the time to help on this issue! I have tried with alpha.3 as you recommended above and I am happy to confirm it works, I get my data on the webview :-). I'll close this issue immediately after you read the next lines (as I am not sure that if closing it now will get you notified). A curiosity, not important now that you came up with the event fix but I am a bit puzzled. Before your answer I tried several things in my "desperation" to have this working; I discovered that using the executeJavaScript function you provide I was able to send my data to webview. Ex. Native:

args.object.executeJavaScript("callFromNativeScript(" + markersSent + ")");

Webview:

    function callFromNativeScript(msg) {
        console.log('markers count on webview typeof ' + typeof msg + ' length ' + msgString.length);
        const markersReceived = JSON.parse(msg);
        console.log('markersReceived ' + markersReceived);
}

It works and can pass the data to webview anytime. Is this "feature" intended? One can use it as an alternative to events?

Rho-bur commented 4 years ago

EDIT: on a second thought let's close this as it was fixed. Thank you for your hard work and your community sense!