build your web browser & apps with nw.js
TRANSCRIPT
Build your Web browser & apps with nw.js
SM
Web Browser
• 顯⽰示網站伺服器或檔案系統內的檔案，並讓⽤用⼾戶與此些檔案互動的⼀一種應⽤用軟體。它⽤用來顯⽰示在全球資訊網或區域網路等內的⽂文字、影像及其他資訊。這些⽂文字或影像，可以是連接其他網址的超連結，⽤用⼾戶可迅速及輕易地瀏覽各種資訊。⼤大部分網⾴頁為HTML格式。有些網⾴頁由於使⽤用了某個瀏覽器特定的語法，只有那個瀏覽器才能正確顯⽰示。
Web Browser
Open Source?
get depot_tools
get depot_tools
使⽤用技術• HTML
• CSS
• Javascript
• HTTP
• AJAX
• WebSocket
• JSP, ASP, PHP
• Certificate Chain
• WebGL
• Applet
• Plugin
• HTML5
使⽤用技術• HTML
• CSS
• Javascript
• HTTP
• AJAX
• WebSocket
• JSP, ASP, PHP
• Certificate Chain
• WebGL
• Applet
• Plugin
• HTML5
不會寫？你回去翻參考書！
什麼功能我都能做出來，不過就是個網⾴頁⽽而已嘛
寫網⾴頁⼤大神
網⾴頁⼤大神：網⾴頁什麼的，⼩小Case拉！
WebGL? 我要按鈕是3D的！
網⾴頁⼤大神：網⾴頁什麼的，⼩小Case拉！
WebGL? 我要按鈕是3D的！
網⾴頁⼤大神：網⾴頁什麼的，⼩小Case拉！
按這個按鈕要修改電腦上的檔案
WebGL? 我要按鈕是3D的！
網⾴頁⼤大神：網⾴頁什麼的，⼩小Case拉！
按這個按鈕要修改電腦上的檔案
我要不安裝Flash就可以跑Flash！
⼀一個專屬於我特異功能的瀏覽器！
WebGL? 我要按鈕是3D的！
網⾴頁⼤大神：網⾴頁什麼的，⼩小Case拉！
按這個按鈕要修改電腦上的檔案
我要不安裝Flash就可以跑Flash！
⼀一個專屬於我特異功能的瀏覽器！還說是個⾼高⼿手呢！
Webkit
ChromiumWebkit
ChromiumNode.js
Webkit
ChromiumNode.js
Webkit
Server?
MIT
How To Build?• https://github.com/nwjs/nw.js/wiki/Building-node-
webkit
get depot_tools
add environment param.
.gclient
add environment param.
Sync code
index.html<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using node.js <script>document.write(process.version)</script> . </body> </html>
package.json
Browser
File Explorer
Frameless Window
Customized Menu
Mini Editor
MP3 Encoder
WebGL Support
Control Camara & MIC
Security?Hiding Code!
{ "name": "demo", "main": "index.html", "snapshot": BIN }
Compile .js code to binary file.