Webview - html from string with local filesystem stylesheet


#1

I’m trying to do native layout based on json structure with webview for text blocks. I would like it to work based on local resources with dynamic content - so i’d like to embed my css/js files on device and attach them to webview html.

At this point i’m not sure what the path to such local css/js (relative to webview) file will be and how/where to resolve it.


#2

You can do something like this,

const fileSystemModule = require("tns-core-modules/file-system"); 
const currentAppFolder = fileSystemModule.knownFolders.currentApp();

// Assuming you have the CSS files under assets folder of your app root
const cssFilePath = currentAppFolder.getFile(fileSystemModule.path.join("assets", "file.css")).path;

Now embed this cssFilePath in your HTML string.


#3

Thanks for reply,

I’ve tried to make this work for some time and unfortunatally it seems that i have no files in my assetes folder or i’m unable to access them this way.
They are present in dist folder so i’m guessing they should be available as app resources but with this code i cant access them.

I’ve tried:

const fs = require("tns-core-modules/file-system");
const currentAppFolder = fs.knownFolders.currentApp();
const file = currentAppFolder.getFile(fs.path.join("assets", "style.css"));


file.readText()
    .then((res) => {
        console.log({content: res});
    }).catch((err) => {
        console.log(err.stack);
});

which outputs: { content: ‘’} //(empty string).
What am i missing?


#4

It’s hard to debug with a sample, try creating a playground so I can take a look.