NW.JS로 크로스 플랫폼 데스크탑 앱 구축

nw.js : 웹 기술을 사용하여 기본 애플리케이션을 구축하기위한 프레임 워크

다른 하이브리드 애플리케이션 프레임 워크와 비교하여 NW.JS는 다음과 같은 장점이 있습니다. Chrome 지원.* API, Chrome Applications, NACL 및 PNACL 애플리케이션, V8 스냅 샷 소스 코드 보호, 내장 PDF 뷰어, 인쇄 미리보기 웹 작업자의 Node.js를 통합합니다.

NW.JS를 사용하여 하이브리드 애플리케이션을 작성하는 프로세스에는 프로젝트 구조 설정, 매니페스트 파일 생성 및 기본보기가 포함됩니다. GitHub의 샘플 응용 프로그램을 참조 할 수 있습니다.

nw.js는 각각 및

패키지를 사용하여 개발 및 생산 및 설치할 수 있습니다. 파일에 NPM 스크립트를 추가하여 포장 및 배포 프로세스를 단순화 할 수 있습니다.

NW.JS는 Chromium을 기반으로하기 때문에 NW.JS 응용 프로그램의 테스트 및 디버깅을 수동으로 수행 할 수 있습니다. Karma의 NW.JS 런처 플러그인 (Karma-Nodewebkit-Launcher)을 사용하여 자동화 된 장치 테스트를 구현할 수 있습니다.

이 기사는 Tim Severien과 Joan Yin이 검토했습니다. Sitepoint의 콘텐츠를 완벽하게 만들어 주신 Sitepoint의 모든 동료 검토 자에게 감사드립니다!

nw.js는 HTML, JavaScript 및 CSS와 같은 웹 기술을 사용하여 기본 응용 프로그램을 작성하기위한 프레임 워크입니다. 간단히 말해서, 정상 프로세스를 사용하여 웹 응용 프로그램을 개발합니다. 프로세스가 끝나면 모든 것을 기본 응용 프로그램으로 컴파일하는 생성기를 실행하고 응용 프로그램은 브라우저처럼 웹 응용 프로그램을 표시합니다. 이러한 응용 프로그램을 "하이브리드 응용 프로그램"이라고합니다. nw 하이브리드 응용 프로그램은 이미 익숙한 언어 (HTML, JavaScript 및 CSS)로 작성되었을뿐만 아니라 정기적 인 웹 응용 프로그램에 비해 다음과 같은 중요한 이점이 있기 때문에 훌륭합니다. nw-builder 브라우저 및 브라우저 버전 제어 (응용 프로그램이 호출되는 브라우저를 알고 있음). NW.JS 하이브리드 애플리케이션은 Chromium (Chrome 뒤에서 실행되는 오픈 소스 브라우저)을 사용하여 표시됩니다. 따라서 Chrome에서 실행되는 응용 프로그램도 NW.JS에서 실행해야합니다. package.json <.> 뷰포트 제어. 예를 들어, 고정 또는 최소/최대 뷰포트를 정의 할 수 있습니다.

로컬 파일로 인해 동일한 원인 정책 제한이 없습니다. 파일 시스템에서 로컬 파일을 열면 브라우저는 동일한 디렉토리에없는 파일에 대한 xmlhttprequest 요청을 차단합니다. 이 동작은 NW.JS 응용 프로그램에서 비활성화 될 수 있습니다.

그들은 또한 다음과 같은 이점을 가져 오는 사용자 정의 API를 제공합니다.

node.js 통합 클립 보드 액세스
• 파일 시스템에 액세스 하드웨어 액세스 (예 : 프린터 목록 가져 오기) 팔레트 아이콘
사용자 정의 파일 선택기 대화 상자
• 쉘 통합 (기본 파일 브라우저 또는 브라우저에서 파일 또는 URL 열기) 전체 창 (닫기 버튼, 메뉴 막대) 및 컨텍스트 메뉴를 사용자 정의하는 옵션 줌 레벨을 설정하고 얻는 기능.
• 좋은 소리? 그런 다음 시작합시다. 이 기사에서는 실제로 NW.JS에 대해 배우고 하이브리드 응용 프로그램을 만드는 방법을 배웁니다. GitHub 의이 기사의 지침을 사용하여 구축 된 샘플 응용 프로그램을 찾을 수 있습니다.
전자와 비교하여 NW.JS의 장점 우선, 한 가지 언급 : NW.JS만이 하이브리드 애플리케이션을위한 유일한 프레임 워크는 아닙니다. 다른 경쟁자를 전자라고합니다. NW.JS보다 2 년 뒤에 2013 년에 시작되었지만 Github에서 나왔기 때문에 빨리 잘 알려졌습니다. 이제 당신은 그들 사이의 차이에 관심이있을 수 있습니다. 전자와 비교하여 NW.JS의 장점은 다음과 같습니다.
• <.> chrome.* API. 이 API는 브라우저와 상호 작용하는 데 사용될 수 있습니다. (NW.JS 문서에서 더 많은 관련 정보를 찾을 수 있습니다.)
Chrome 앱을 지원합니다. Chrome 앱은 웹 언어로 작성된 패키지 응용 프로그램입니다. (자세한 내용은 Chrome Developer 문서를 참조하십시오.) 이러한 응용 프로그램은 Node.js 통합이없고 Chrome Web Store를 사용하여 게시되기 때문에 NW.JS와 다릅니다. (Chromium은 2018 년 8 월까지 지원을 취소 할 것입니다 (블로그 게시물 참조). 그러나이 게시물에 따르면 NW.JS는 여전히 Chrome 앱을 지원합니다.) 는 NACL (기본 클라이언트) 및 PNACL (휴대용 원시 클라이언트) 응용 프로그램을 지원합니다. 그들은 성능에 중점을 두므로 주로 C와 C로 작성됩니다. (NW.Js.에서 사용하는 방법은이 자습서를 참조하십시오. 에는 응용 프로그램의 소스 코드를 보호하기위한 V8 스냅 샷 소스 코드 보호 기능이 있습니다. NWJC 도구를 사용하면 코드가 기본 코드로 컴파일됩니다. (자세한 내용은이 기사를 참조하십시오.)

• 에는 PDF 뷰어가 내장되어 있습니다.

미리보기를 인쇄하십시오.
• 는 웹 워커에서 node.js의 통합을 지원합니다. 그것들은 멀티 스레드 응용 프로그램을 작성하는 데 사용됩니다.
• 그러나 Electron은 또한 언급 할 가치가있는 몇 가지 이점이 있습니다.
내장 자동 업데이트 프로그램 (NW.JS 자동 업데이트 프로그램에 대한 질문을 따를 수 있음).
• 는 충돌 보고서를 원격 서버에 자동으로 보냅니다. NW.JS는 로컬 파일에만 기록한 다음 수동으로 제출할 수 있습니다.

또 다른 근본적인 차이가 있습니다. NW.JS 응용 프로그램은 입력 지점을 HTML 파일로 지정합니다. 이 HTML 파일은 GUI에서 직접 열립니다.

반면에, 전자 애플리케이션은 JavaScript 파일을 입력 지점으로 지정합니다. 이 JavaScript 파일은 별도의 기본 프로세스에서 열리고 HTML 파일을 GUI에서 열 수 있습니다. 이것은 이론적으로 GUI없이 전자 응용 프로그램을 실행할 수 있음을 의미합니다. 또한 GUI를 닫으면 API 메소드를 호출하여 수동으로 종료해야합니다.

Electron은 JavaScript로 작성된 데스크탑 응용 프로그램의 문을 열고 GUI가없는 경우 HTML 기반 애플리케이션을 표시하려면 NW.JS 애플리케이션을 설정하기가 더 쉬울 수 있습니다.

참고 : Electron의 장점이 마음에 들면 Electron을 사용하여 데스크탑 응용 프로그램 작성에 대한 SitePoint의 최근 기사를 확인하십시오.

데모 애플리케이션을 만듭니다 나중에 기본 응용 프로그램으로 컴파일 될 응용 프로그램을 만들어 봅시다. 다양한 JS 언어 (Typescript, CoffeeScript 등), 모듈 로더 (요구 사항, 웹 팩, SystemJ 등), 프레임 워크 (AngularJS, React, Vue.js, Vue.js, 등) 및 사전 처리기 (SCSS, LESS, HAML 등) - 모든 사람이 자신의 선호도를 가지고 있으며, 우리는 기본 HTML, CSS 및 JS (ES6 Standard) 기술 만 사용합니다. 모든 설정에 대한 NW.JS 보일러 플레이트 (시작 프로젝트)가 없습니다. 이 모든 것은 특정 프레임 워크, 모듈 로더 또는 전처리기를 위해 구축되었습니다. 따라서 우리는 간단한 NW.JS 응용 프로그램을 처음부터 스스로 구현할 것입니다. 이해하기 쉽고 나중에 필요에 따라 쉽게 사용자 정의하거나 보일러 플레이트로 전환 할 수 있습니다.

프로젝트 구조 먼저 프로젝트 구조와 파일을 만들어야합니다.

<: :> 지침 :

> src/는 응용 프로그램의 소스 파일을 포함합니다.

/> src/ app/에는 JavaScript 파일이 포함되어 있습니다.

SRC/ ASSETS/ 이미지가 포함되어 있습니다. 이 예에서는 파일 icon.png (창 아이콘으로 표시 될) 만 정사각형이어야합니다.

> src/ styles/ 일반적으로 SCSS 이하의 파일이 포함되어 있습니다.이 예에서는 간단한 CSS 파일 일뿐입니다.

> src/ views/ HTML보기 파일이 포함되어 있습니다.

> src/package.json은 nw.js 응용 프로그램의 매니페스트 파일입니다 (Manifest 형식 참조). 또한 여기에 응용 프로그램의 종속성을 지정합니다.

package.json은 빌드 워크 플로우를 수행하고 실제 NW.JS 응용 프로그램 (예 : 빌딩 종속성)에 필요하지 않은 종속성을 지정 해야하는 NPM 패키지 파일입니다.

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

목록을 작성하십시오 이제 프로젝트 구조 및 파일을 만들었으므로 NW.JS Manifest 파일 SRC/PACKET.JSON을 사용할 수 있습니다. 문서에 따르면, 파일은 기본적으로 두 개의 속성, 이름 (응용 프로그램 이름)과 기본 (진입 지점으로 사용되는 HTML 파일의 경로) 만 필요합니다. 그러나 사용자가 예상치 못한 것을 볼 수 없도록 창 아이콘의 경로와 최소 너비 및 높이와 같은 추가 정보를 추가했습니다.

그게 다야! 기본 경로는 매니페스트 파일과 관련이 있으므로 응용 프로그램은 나중에 시작시 SRC/Views/Main.html을 시작합니다.
• 홈 뷰를 만듭니다 이 시점에서 우리는 할 일 신청서를 작성할 수 있습니다. 그러나 우리는 NW.JS와 그 기능에 집중하고 싶습니다. 이를 위해
you
• 가 앱이 무엇을하는지 결정하게하는 것을 선호합니다. GitHub에서 Project NW.JS-Examples 예제를 만들어 Node.js 통합 및 클립 보드 액세스와 같은 몇 가지 NW.JS 기능을 시연했습니다. 응용 프로그램에서 자유롭게 시도하십시오. 그러나 다른 콘텐츠도 사용할 수 있습니다.
당신이 결정한 것에 대해, 당신은 응용 프로그램 입력 지점이기 때문에 최소한 src/views/main.html 파일을 만들어야합니다. 다음과 같이 보일 수 있습니다

실제 응용 프로그램에는 다른보기 파일이 있고 Ajax를 사용하여로드 할 수 있습니다. 단순화하기 위해 기본 하이퍼 링크를 만들고 다른 HTML 파일을 참조 할 수도 있습니다. 예를 들면 :

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

그런 다음 그런 다음 https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e src/views/views/views/. 이것이 예제 프로젝트에서 수행하는 방법입니다.

<.> NW.JS 를 설치하십시오 우리는 이제 Manifests 및 Main View를 포함하여 NW.JS 프로젝트를 만들었습니다. 결국 개발을 위해 개발 기계에서 NW.JS를 직접 실행하고 여러 운영 체제에 대한 기본 응용 프로그램을 생성하는 빌드 프로세스를 구현할 수있는 방법이 필요합니다.

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>

이렇게하려면 다음 두 가지 패키지가 필요합니다.
nw (개발) NW-Builder (생산)

실제 응용 프로그램과 관련이 없기 때문에 (개발 목적 및 생산 빌드에만 사용됨), 우리는 루트 폴더의 두 번째 package.json에서 필요한 이름 및 버전 필드에서 devdependencies로 만듭니다.

이제 우리는 devddependencies를 설치하려면 프로젝트의 루트 폴더에서 다음 명령을 실행하면됩니다.

완료! 구축합시다.

포장 및 배포 포장을 단순화하기 위해 Package.json 파일에 NPM 스크립트를 추가합니다. 이를 통해 오른쪽에 정의 된 CLI 명령을 실행하고 바로 가기를 사용하여 왼쪽에서 NPM 실행을 사용합니다. 우리는 두 개의 스크립트를 추가했고 하나는 개발을위한 것과 생산을위한 하나를 추가했습니다.
<.> nw.js를 직접 실행하십시오 nw.js 응용 프로그램을 직접 시작하려면 를 실행하십시오
• 이 단축키는 NW 패키지를 사용하여 DEV의 스크립트에서 정의한 명령을 호출합니다. SRC/Views/Main.html을 보여주는 개발 시스템에서 새 창을 직접 열어야합니다.
• 생산 구조 프로덕션 빌드는 Windows, Linux 및 MacOS의 출력을 지원하는 NW 빌더를 사용합니다. 이 예에서는 32 비트 및 64 비트 버전을 포함하여 이러한 모든 플랫폼에 대한 패키지를 구축했습니다. MACOS의 경우 현재 32 비트 만 기존 버전 모드에서 구축 할 수 있습니다. (Github 에서이 질문을 참조하십시오.) 따라서 64 비트 만 구축됩니다.
생산 빌드를 실행하려면
nw.js를 직접 실행하는 것과 마찬가지로, 이것은 스크립트에서 정의한 CLI 명령을 사용합니다.

시간이 걸릴 것입니다 ...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1 id="Hello-World">Hello World :-)</h1>
    <🎜>
</body>
</html>

완료되면 Dist/Folder를 확인하십시오. 다음과 같이 보일 것입니다 :

<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>

좋아요, 우리는 거의 끝났습니다!

테스트 및 디버그

매뉴얼 <.> NW.JS는 크롬을 기반으로하기 때문에 수동 테스트는 Chrome과 마찬가지로 쉽습니다. 오류 (시각적 또는 기능)가 발생하면 키보드 단축키 F12 또는 프로그래밍 방식으로 개발자 도구를 열 수 있습니다.

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

이것은 SDK 빌드 스타일이 필요합니다. 프로덕션에서 개발자 도구를 비활성화하려면 다른 스타일로 NW.JS를 구축하거나 F12 이벤트를 비활성화 할 수 있습니다.

자동화 자동화 된 장치 테스트 (운 좋게)는 지속적인 수동 테스트없이 다양한 구현에서 제대로 작동하는지 확인하는 데 널리 사용됩니다.

응용 프로그램에서 NW.JS- 특이 적 API 메소드를 사용하지 않으면 이론적으로 일반적인 웹 애플리케이션 워크 플로우 (예 : Karma를 사양 러너로 사용하여 Jasmine과 테스트 프레임 워크로 결합 할 수 있습니다.

그러나 NW.JS 특정 API 메소드를 사용하는 경우 API 메소드가 정의되도록 NW.JS 응용 프로그램에서 테스트를 실행해야합니다. 한 가지 방법은 Karma-Nodewebkit-Launcher와 같은 Karma의 NW.JS 런처 플러그인을 사용하는 것입니다. Karma의 다른 브라우저 런처 플러그인과 같은 방식으로 작동합니다. NW.JS 컨테이너의 응용 프로그램을 열어 확인을 수행 한 다음 자동으로 닫습니다.

그러나 NW.JS는 헤드리스가 아니기 때문에 (Phantomjs 등과 달리) 항상 실제 디스플레이가 필요합니다. 이것은 순수한 CLI 서버에서 테스트를 실행하는 것이 불가능하다는 것을 의미합니다. 다행히도이 경우 XVFB를 사용하여 디스플레이를 모방 할 수 있습니다. 예를 들어 Travis CI에서 작동합니다. Jenkins의 경우 XVFB 플러그인을 설치해야합니다. 자세한 내용은 Github 에서이 질문을 참조하십시오.

결론

이 기사가 NW.JS의 장점과 사용 사례에 대한 심층적 인 이해를 제공하기를 바랍니다. 하이브리드 애플리케이션을 사용하는 것이 HTML 파일이 포함 된 .zip 폴더를 배포 한 다음 파일 시스템에서 실행하는 것보다 더 나은 이유는 여러 가지가 있습니다. NW.JS는 복잡한 GUI에 초점을 맞출 필요가 없으며 비디오 플레이어와 같은 많은 내장 기능이 있으므로 기본 응용 프로그램을 대체 할 수 있습니다. 환경을 감지 할 수 있으므로 NW.JS를 사용하여 일반 웹 서버 및 클라이언트 컴퓨터에서 실행할 수있는 응용 프로그램을 개발할 수도 있습니다. 몇 가지 트릭과 강력한 크롬 엔진 덕분에 사용자는 기본 응용 프로그램과 차이를 느낄 수 없습니다. 새로운 NW.JS 프로젝트를 작성할 때 먼저 사용하려는 프레임 워크, 모듈 로더 및 전처리 (익숙한 것에 대해 설명하는 것)을 결정하거나 처음부터 시작하십시오. 이러한 결정을 내린 후에는 귀하의 요구에 맞는 NW.JS 보일러 플레이트를 찾을 수 있습니다. 적절한 보일러 플레이트가 없으면이 튜토리얼을 기반으로 응용 프로그램을 사용할 수 있습니다.

선호하는 모델은 무엇입니까? 또는 NW.JS 응용 프로그램을 개발하기 위해 어떤 기술을 선택합니까? 이 기사에서 할 일지 애플리케이션 구현 대신 NW.JS 예제를 사용하는 것이 효과적입니까? 의견에 알려주십시오.

nw.js FAQS (FAQ)
NW.JS와 다른 크로스 플랫폼 데스크톱 응용 프로그램 프레임 워크의 주요 차이점은 무엇입니까?
NW.JS는 크로스 플랫폼 데스크탑 응용 프로그램을 개발하기위한 강력한 도구입니다. 다른 프레임 워크와 달리 NW.JS는 개발자가 웹 개발에 일반적으로 사용되는 HTML, CSS 및 JavaScript에서 코드를 작성할 수 있도록합니다. 이를 통해 웹 개발자가 데스크탑 애플리케이션 개발로 쉽게 전환 할 수 있습니다. 또한 NW.JS에는 DOM의 Node.js API에 직접 액세스 할 수있는 고유 한 기능이있어보다 복잡하고 강력한 기능이 가능합니다.
NW.JS를 시작하는 방법?
NW.JS를 시작하려면 먼저 공식 웹 사이트에서 다운로드하여 설치해야합니다. 설치가 완료되면 새 프로젝트 디렉토리를 작성하고 HTML, CSS 및 JavaScript 파일을 추가 한 다음 NW.JS 실행 파일을 사용하여 응용 프로그램을 실행할 수 있습니다. NW.JS 문서는 시작 방법에 대한 자세한 안내서를 제공합니다.
상업 프로젝트에 nw.js를 사용할 수 있습니까?
예, 상업 프로젝트에 NW.JS를 사용할 수 있습니다. NW.JS는 오픈 소스이며 무료로 제공되므로 크로스 플랫폼 데스크톱 응용 프로그램을 개발하기위한 비용 효율적인 솔루션입니다. 그러나 사용 된 모든 타사 모듈에는 자체 라이센스 요구 사항이있을 수 있습니다.
NW.JS 응용 프로그램을 패키지 및 배포하는 방법은 무엇입니까?
NW.JS 응용 프로그램 포장 및 배포에는 대상 플랫폼에서 실행될 수있는 독립형 실행 파일을 작성해야합니다. 이것은 NW-Builder 또는 Webpack과 같은 도구를 사용하여 수행 할 수 있습니다. 일단 포장되면 응용 프로그램은 직접 다운로드 또는 앱 스토어와 같은 다양한 채널을 통해 배포 할 수 있습니다.
NW.JS는 어떤 플랫폼을 지원합니까?
nw.js는 다양한 플랫폼을 지원합니다. Windows, Mac 및 Linux 용 응용 프로그램을 개발하는 데 사용할 수 있습니다. 이 크로스 플랫폼 지원은 개발자가 한 번에 코드를 작성하고 여러 플랫폼에서 실행할 수 있기 때문에 NW.JS를 사용하는 데있어 주요 장점 중 하나입니다.
NW.JS 응용 프로그램을 디버그하는 방법은 무엇입니까?
디버깅 NW.JS 응용 프로그램은 웹 응용 프로그램 디버깅과 유사합니다. NW.JS 번들이 제공하는 Chrome 개발자 도구를 사용하여 디버깅 할 수 있습니다. 이 도구는 코드를 확인하고 디버깅하기위한 많은 기능을 제공합니다.
nw.js 응용 프로그램에서 node.js 모듈을 사용할 수 있습니까?
예, NW.JS의 주요 기능 중 하나는 Node.js 모듈을 DOM에서 직접 사용하는 기능입니다. 이를 통해 응용 프로그램에서보다 복잡하고 강력한 기능을 구현할 수 있습니다. NW.JS 응용 프로그램에서 NPM에서 사용 가능한 수천 개의 모듈을 사용할 수 있습니다.
NW.JS 응용 프로그램을 업데이트하는 방법은 무엇입니까?
> NW.JS 응용 프로그램 업데이트에는 기존 응용 프로그램의 기존 버전을 새 버전의 응용 프로그램으로 바꾸는 것이 포함됩니다. 사용자가 수동으로 수행하거나 NW-Updater와 같은 모듈을 사용하여 응용 프로그램에서 자동 업데이트를 구현할 수 있습니다.
nw.js를 사용하여 기본 API에 액세스 할 수 있습니까?
예, NW.JS는 Node.js를 통해 기본 API에 직접 액세스 할 수 있습니다. 즉, 애플리케이션에서 파일 시스템, 네트워크, 장치 등과 같은 기본 기능을 사용할 수 있습니다. 이것은 전통적인 웹 기술에 대한 NW.JS의 주요 장점입니다.
NW.JS 응용 프로그램의 성능을 최적화하는 방법은 무엇입니까?
NW.JS 응용 프로그램의 성능을 최적화하려면 JavaScript 파일 최소화 및 연결, 이미지 최적화, 효율적인 알고리즘 및 데이터 구조 사용과 같은 다양한 기술이 포함됩니다. 또한 Chrome 개발자 도구를 사용하여 성능 문제를 분석하고 디버깅 할 수 있습니다.
이 개정 된 출력은 원래 이미지 배치 및 형식, 독창성을위한 문장 및 단락을 유지하면서 더 간결하고 영향력있는 언어를 사용합니다.

위 내용은 NW.JS로 크로스 플랫폼 데스크탑 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!