Skip to content

Tutorial

Jump to bottom
winteru edited this page Dec 31, 2023 · 10 revisions

Introduction

This is a simple tutorial for begginers to use webview-nodejs. webview-nodejs is a Node.js binding to webview, which aims to make web-based desktop apps.

This tutorial is based on webview-nodejs@0.1.3, Node.js@18.12.1 and npm@9.1.2 on Windows 10. But should work in v0.2~v0.3.

Prerequisites

  1. Node.js >= 12.22.0 (>=10 if using v0.1.x)
  2. Windows: Webview 2 Runtime and Visual Studio C++ Build Tool
    macOS: Xcode
    Linux: webkitgtk2

For more information, see webview#prerequisites

Setup

This section will help you build a basic webview-nodejs application from ground up.

Step 1: Created and change into a new directory

mkdir myapp
cd myapp

Step 2: Initialize your project and install webview-nodejs

npm init
npm install webview-nodejs

Step 3: Created and edit a index.js

// index.js
const { Webview } = require('webview-nodejs');

let w = new Webview();
w.title("Hello World");
w.size(800,600);
w.navigate("https://example.com");
w.show();

Step 4: Run index.js

node index.js

Step 5(Optional): Add a script to package.json
Add "start": "node index.js" to package.json so that you can start you application by npm start

Usage

Basic Usage

  1. Import the webview-nodejs
const { Webview } = require('webview-nodejs');
  1. Create a webview instance
let w= new Webview();
  1. Set the url, size and title of the webview window
w.title("Hello World");
w.size(800,600); // WEBVIEW_HINT is an optional argument for MIN,MAX,FIXED window
w.navigate("https://example.com");
  1. Run and show the webview
w.show()

This will block the thread.

Interact between Webview and Node.js

webview provide bind, dispatch and some other functions to interact between Webview and Node.js.

Bind

bind can add a global function to Webview which calls a function in Node.js.

webview.bind(
    functionName, (webview, arguments...) => {
       /* Your codes */
       return result;
    }
)

Here is a simple example where we add a addInNode function to our HTML, so that when we press the button, it as user to input two number by using prompt and then call the lambda function in Node.js to add them to r and return the result :

const {Webview} = require('webview-nodejs');

let w = new Webview();
w.title("Hello");
w.size(600,600);
w.html(`
    <html><body>
    <button onclick="addInNode(prompt(), prompt()).then((r)=>alert(r))">
        Test
    </button>
    </body></html>
`);

w.bind("addInNode", (w,arg1,arg2)=>{           // The first parameter is the Webview and the rest are user's.
    let r = parseInt(arg1) + parseInt(arg2);   // This will run in Node.js
    console.log(r);                            // This will run in Node.js
    return r;                                  // return the result to webview
});

w.show();

Eval

You can run code in webview directly from Node.js by calling eval:

w.html(`
    <html><body>
    <button onclick="addInNode(prompt(), prompt());">
        Test
    </button>
    </body></html>
`);

w.bind("addInNode", (w,arg1,arg2)=>{
    let r = parseInt(arg1) + parseInt(arg2);  // This will run in Node.js
    console.log(r);                           // This will run in Node.js
    w.eval(`alert(${r})`);                    // `alert` will run in webview
    return r;                                 // return to webview
});

Feel free to edit! Any contribution to Wiki is welcomed!

Clone this wiki locally