JavaScript Browser - 利用JavaScript实现的Web浏览器Windows App

g2md 8年前

利用JavaScript开发的一个Web浏览器 Windows app。这个项目是Windows 10中Web平台的一个示例指南。这个浏览器是一个简单App,基于HTML WebView control构建。主要使用JavaScript来点亮用户界面。开发工具使用 Visual Studio 2015, 这是一个 JavaScript Universal Windows Platform (UWP) app.

除了使用 JavaScript之外,HTML和 CSS也是其使用的主要核心编程语言。Some C++ code is also included to enable supplemental features, but is not required to create a simple browser.

Additionally, we’re taking advantage of the new ECMAScript 2015 (ES2015) support in Chakra, the JavaScript engine behind Microsoft Edge and the WebView control. ES2015 allows us to remove much of the scaffolding and boilerplate code, simplifying our implementation significantly. The following ES2015 features were used in the creation of this app: Array.from(), Array.prototype.find(), arrow functions, method properties, const, for-of, let, Map, Object.assign(), Promises, property shorthands, Proxies, spread operator, String.prototype.includes(), String.prototype.startsWith(), Symbols, template strings, and Unicode code point escapes.

用户界面

用户界面包含了10个组件:

  • Title bar
  • Back button
  • Forward button
  • Refresh button
  • Favicon
  • Address bar
  • Share on 推ter button
  • Favorites button and menu
  • Settings button and menu
  • WebView control

Favorites

附加功能

There are several additional features implemented to make the browsing experience more pleasant:

  • Keyboard shortcuts - press F11 to toggle fullscreen mode, ESC to exit fullscreen mode, or Ctrl + L to select the address bar
  • CSS transitions for animating the menus
  • Cache management
  • Favorites management
  • URL input analysis — “bing.com” navigates to http(s)://bing.com, “seahawks” searches Bing
  • Auto-de/select the address bar on blur/focus
  • Responsive design

项目主页:http://www.open-open.com/lib/view/home/1441163830612