NativeScript WebView cargando recursos locales en el documento src

Question

Nov 14, 2018, 11:27 PM

webview nativescript local-files nativescript-vue

NativeScript WebView cargando recursos locales en el documento src

Estoy cargando un archivo html local como src para un componente NativeScript WebView. Dentro del archivo html hay etiquetas de script que hacen referencia a archivos javascript que también son recursos locales (incluidos en la aplicación). El archivo html se carga en WebView muy bien, pero el archivo de script referenciado (mylib.js) no lo hace.

Sospecho que hay un problema de ruta, pero he probado casi todas las variaciones que se me ocurren en vano.

Mi proyecto es en realidad un proyecto NativeScript-Vue y es el siguiente:

App.vue

<template>
    <Page @loaded="onPageLoaded">
        <ActionBar title="Welcome to WebView"/>
        <GridLayout>
            <WebView ref="myWebView" row="0" col="0" 
            :src="filePath" @loadFinished="onWebViewLoaded" />
        </GridLayout>
    </Page>
</template>

<script>
import * as fs from "tns-core-modules/file-system"
import * as utils from "utils/utils"

  export default {
    data() {
      return {
        filePath: ''
      }
    },
    methods: {
        onPageLoaded () {
            this.setLocalIndexFilePath()
        },
        onWebViewLoaded (event) {
            if (event.error) { 
                console.log(error)
            } else {
                console.log('webview loaded')
            }
        },
        setLocalIndexFilePath () {
            const deviceName = 
            utils.ios.getter(UIDevice, UIDevice.currentDevice).name
            // iPhone 6 is the name of my simulator
            if (deviceName == 'iPhone 6') {
                const webViewSRC = 
                encodeURI(`${fs.knownFolders.currentApp().path}/www/index.html`)
                this.filePath =  webViewSRC
                console.log(webViewSRC)
            } else {
                this.filePath = "~/www/index.html"
            }
        }
    }
  }
</script>

index.html

<!doctype html>
<head>
    <script src="./mylib.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onBodyLoaded() {
            var msg = document.getElementById('msg');
            msg.insertAdjacentHTML('beforeend', '<br />body loaded!');
        }

        function onLocalButtonClicked() {
            var msg = document.getElementById('msg');
            msg.insertAdjacentHTML('beforeend', '<br />local: You clicked button!');
        }
    </script>
</head>
<html>
    <body onload="onBodyLoaded()">
      <Button onclick="onLocalButtonClicked()">Click Me</Button>
      <Button onclick="onButtonClicked()">Click Me to test external js</Button>
      <p id="msg">Debug:</p> 
    </body>
</html>

mylib.js

// This function never gets called
function onButtonClicked() {
  var msg = document.getElementById('msg');
  msg.insertAdjacentHTML('beforeend', '<br />external js file: You clicked button!');
}

webpack.config.sys

... 
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
    { from: "fonts/**" },
    { from: "**/*.+(jpg|png)" },
    { from: "assets/**/*" },
    { from: "www/**/*" }, 
...