NativeScript Webview newbie questions

Question

I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.

If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.

This is pretty much Day 1 for me with NativeScript and I have run into a few issues.

I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html

to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy

app
|
 ____home
|
 ____www
      |
       ______ index.html
      |
       ______css
      |
       ______ tpl
      |
       .....

However, when I use the markup

<Page actionBarHidden="true" >
 <WebView src="~/www/index.html"></WebView>
</Page>

I am shown the error message

The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.

I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.

Nick Iliev Nick Iliev · Accepted Answer · 2020-03-16T11:24:27

About using local HTML file

Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.

new CopyWebpackPlugin([
    { from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
    { from: { glob: "fonts/**" } },
    { from: { glob: "**/*.jpg" } },
    { from: { glob: "**/*.png" } },
]

Example here

About hiding the ActionBar

NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here

NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.

NativeScript Webview newbie questions

1 Answers