Local html to desktop

How to create a desktop application with CSS + HTML + JS

Recently, I have studied the scheme of customized browser based on Chromium and consulted a lot of information. The specific scheme also has a general blueprint ?

For more details, check out my blog lishaoy.net

Here are a few words to know about the plan:

Introduction to the

Chromium

Chromium is a Web browser led by Google, distributed under multiple Copyrights including a BSD license and open source. Chromium development probably started as early as 2006.

Chromium is a project that Google opened to develop their own browser, Google Chrome, so Chromium is an engineering or experimental version of Google Chrome (although there is a beta version of Google Chrome itself), The new function will be opened in Chromium first and will be applied in Google Chrome after verification, so the function of Google Chrome will be relatively backward but stable. — Wikipedia

CEF

Chromium Embedded Framework (CEF) is an open source Web Browser control based on Google Chromium project, supporting Windows, Linux and Mac platforms. In addition to providing C/C++ interfaces, ports are also available for other languages.

Because of Chromium, CEF supports HTML5 features implemented in Webkit Chrome, and is relatively close to Chrome in performance. CEF also provides the following features: custom plug-ins, custom protocols, custom JavaScript objects, and extensions; Control resource loading, navigation, context menus, etc

NW

Nw.js runs on Chromium and Node.js, formerly known as nodeWebkit. This gives you the possibility to create desktop applications using HTML and JavaScript. You can call node.js apis and existing third-party packages directly from within the app. Because Chromium and Node.js are cross-platform, your app can be cross-platform, too. — SegmentFault

Electron

Electron (originally called Atom Shell) is an open source framework developed by GitHub. It allows desktop GUI application development using Node.js (as the back end) and Chromium (as the front end). Electron has been used for front-end and back-end development by several open source Web applications, including GitHub’s Atom and Microsoft’s Visual Studio Code. — Wikipedia

Therefore, CEF, NW and Electron are open-source frameworks based on Chromium, which can achieve the required custom browser requirements. Specifically, they should use HTML5, CSS3 and JavaScript to make desktop applications with beautiful interfaces.

A local client application uses a built-in browser kernel to render the front-end interface, and on the other hand can call the local system-level API to implement various functions of the local application.

The market research

Through consulting a large number of information, online products and technologies used by various enterprises for reference.

CEF case

According to CEF, the following desktop applications are using CEF.

Domestic desktop apps include youdao cloud note (netease), dingding (alibaba), QQ (Tencent), etc. After checking the installed directories and files, you can see that youdao cloud note and dingding use CEF, and the interface of dingding uses AngularJs. It is known that the back end should use C++ and Python.

QQ has long implemented some of its functions and interfaces through embedded Internet Explorer. Starting in 2013, QQ introduced CEF, which replaced some places that had previously used IE.

NW case

Here’s the official list of apps that use nw.js: github.com/nwjs/nw.js/.

And domestic, such as wechat development tools, is based on the DEVELOPMENT of Nw.js.

Electron case

This is Electron. The official list of applications that use Electron is electronjs.org/apps

Electron, shown here, has been used by companies like Microsoft, Facebook, Slack and Docker to create applications.

The editor I use, Visual Studio Code, is based on ELECTRON

In actual combat

A simple Dome will be made using Nw.js and ELECTRON respectively.

Because CEF documents are few and the original is C\C++, although the official Java version of JCEF is given, the development efficiency is low, so I do not know the demonstration.

This is the CEF website, which lists the supported languages in the External Projects section:

• Net (CEF3) — https://github.com/cefsharp/CefSharp
• Net (CEF1) — https://bitbucket.org/fddima/cefglue
• Net/Mono (CEF3) — https://bitbucket.org/xilium/xilium.cefglue
• Net (CEF3) — https://bitbucket.org/chromiumfx/chromiumfx
• Delphi (CEF1) — http://code.google.com/p/delphichromiumembedded/
• Delphi (CEF3) — https://github.com/hgourvest/dcef3
• Delphi (CEF3) — https://github.com/salvadordf/CEF4Delphi
• Go — https://github.com/CzarekTomczak/cef2go
• Java — https://bitbucket.org/chromiumembedded/java-cef
• Java — http://code.google.com/p/javacef/
• Python — http://code.google.com/p/cefpython/

NW = Hello, world!

Let’s see how to write a NW application from a simple example.

< "name": "helloworld"."main": "index.html"."icon": "img/app.png"."window": < "icon": "img/app.png">>Copy the code

Main The home page is displayed. Name Indicates the name of the application.

 html lang="en" head meta charset="UTF-8" meta name="viewport" content="Width = device - width, initial - scale = 1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleHolle NW/title /head style html.body < height: 100%; margin: 0; > .box < height: 100%; display: flex; /* CSS3 elastic box */ justify-content: center; align-items: center; > /style body div class="box" h1Holle NW!/h1 /div /body /html Copy the code

This is a simple HTML file with a bit of CSS added to make Holle NW! Horizontal and vertical center.

Here I only tested the packaging for Mac and Windows, not Linux.

Mac Package apps: Run the following command in the project root directory to compress all files into app.nw files.

zip -r app.nw * Copy the code

Then the app. Nw files into NWJS. App/Contents/Resources/directory, effect as shown in figure:

Windows Package application: Put all relevant files of the application into a compressed package named package.nw, and put package.nw and NW executable files into the same directory. The effect is shown in the following figure:

Electron = Hello, world!

Electron allows you to create desktop applications using pure JavaScript calling rich native APIs.

You can build a simple application with just three files

├─ download.txt └─ download.txt └─ download.txtCopy the code

First you need to install the Node environment and use NPM to create a package.json configuration file for your application

Add the start command to package.json

< "name": "your-app"."version": "0.1.0 from"."main": "main.js"."scripts": < "start": "electron .">>Copy the code

const = require('electron'); const path = require('path') const url = require('url') function createWindow( ) < win = new BrowserWindow(< width: 1008.height: 759 >) win.loadURL(url.format(< pathname: path.join(__dirname, 'index.html'), protocol: 'file:'.slashes: true >)) > app.on('ready', createWindow) Copy the code

CreateWindow creates a desktop window with the size controlled by width, height and win.loadURL used to load the page.

 html lang="en" head meta charset="UTF-8" meta name="viewport" content="Width = device - width, initial - scale = 1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleHello Electron/title /head style html.body < height: 100%; margin: 0; > .box < height: 100%; display: flex; /* CSS3 elastic box */ justify-content: center; align-items: center; > /style body div class="box" h1Hello Electron!/h1 /div /body /html Copy the code

This is a simple HTML file with a bit of CSS added to make Holle NW! Horizontal and vertical center.

Package application: The package application can be packaged using the electron packager tool. You need to run the following command in package.json

Then, run the command NPM run packagerMac on the terminal to package the application packages of Linux, Mac, and Windows. The result is shown in the following figure:

GitHub attention and activity

First of all, we need to understand the meaning of GitHub’s three statuses.

pull request issue

fork (Generally used for modificationbugAnd optimize the project or develop new features on the project, etc.)

CEF

CEF could not find the project on GitHub. The data provided by this official website is as shown in the figure (since there is no project on GitHub, the relevant data cannot be accurately counted).

NW

NW activity: shown in figure

Electron

Through the above market research, actual combat, GitHub attention and activity, Electron has advantages as follows

• There are many market cases and large enterprises are using them
• The development of actual combat code is more intuitive, easy to understand and maintain, a variety of sound documents, more network information and high quality, complete peripheral auxiliary tools, development efficiency can be greatly improved
• GitHub continues to grow in popularity and activity

All of the above will be combined with the following technology stack to make a complete case

• Cross-platform Desktop Application Framework: Electron (Chromium + Node.js)
• The UI library: iView
• Js framework: vue.js
• Automated build tool: Webpack
• HTML5, CSS3, ES6

Источник

From a HTML JS PHP Website to an Installable Desktop Application

If you developed a website or a web app it’s very easy to transform it in an installable desktop application. Here’s how.

STEP 1

Go to this repo https://github.com/cztomczak/phpdesktop by Czarek Tomczak, then search for downloads. As I’m working with Windows, I used PHP Desktop v57.0 for Windows release (https://github.com/cztomczak/phpdesktop/releases/tag/chrome-v57.0-rc).

Download the zip file and extract the content wherever you want. Rename the folder as you prefer, you could use the name of your website. Let’s call it Myapp .

This is a sort of container with a self-contained web server (Mongoose) and PHP 7.1.3.
For example, launching the exe file called phpdesktop-chrome.exe will “read” what’s inside the Myapp/www folder. That’s where you will have to move your entire website to.

STEP 2

Erase what’s inside Myapp/www folder and copy there your entire website (don’t put inside a sub folder). Be careful that any resource used in your website should be available inside that folder , locally, or available online if you don’t mind your desktop application will need internet connection to work. If, for example, you used CDNs, then your desktop application will not work properly without connection.

STEP 3

Rename the Myapp/phpdesktop-chrome.exe file, you can use the name of your application, let’s put Myapp.exe

At this point I suggest testing the application by double clicking on myapp.exe and be sure everything works as expected. If you find some bugs due to the different environment you can debug it as a normal website from that same window, inspecting it with devtool and working on the Myapp/www folder files in your IDE.

STEP 4

Источник