Note: 一个初步的 Chrome Packaged App 写法 - 快车库

主要看 Chrome App 文档里的两个页面:
Chrome App Lifecycle
Create Your First App

代码基本上和官方给的一样, 我放在仓库里了:
https://code.csdn.net/jiyinyiyong/demo-packaged-app/tree/master
后面就记一些我关心的点了:

资源相对路径问题

首先是目录结构, 主要是 HTML 文件, 我没有放在根目录:

➤➤ tree
.
├── README.md
├── css
│   └── main.css
├── html
│   └── app.html
├── js
│   ├── bg.js
│   └── main.js
└── manifest.json

3 directories, 6 files

然后是 js/bg.js, 注意这里的 HTML 相对路径,
是从 app 根目录而不是 bg.js 路径作为基准的:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('html/app.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

Packaged App 和插件的启动方式不同, 不能通过 manifest.json 声明,
一般扩展是需要手动声明使用版本的, 这里的例子不用..

然后是 app.html, 注意, 这里 JS CSS 又是根据文件的相对路径来的:

<!DOCTYPE html>
<html>
<head>
  <title>APp</title>
  <link rel="stylesheet" type="text/css" href="/css/main.css">
  <script type="text/javascript" src='/js/main.js'></script>
</head>
<body>
hello APp
</body>
</html>

之所以特别关注相对路径, 是因为 HTML 会是 Jade 生成的, 不方便任意使用路径,
设置为了 HTML 能在 App 或者 server 同时运行, 必需事先了解.

开启 DevTools

App 的调试需要在 chrome://flags 开启对应的选项, 否则没有 DevTools..

Find "Experimental Extension APIs", and click its "Enable" link.

页面的 Reload

App 打开后, 似乎屏蔽了刷新的机制, 只能从页面上手动触发..
Console 调用 location.reload() 无法对页面进行刷新
还好, chrome.runtime.reload() 还是能正常使用的.
https://developer.chrome.com/extensions/runtime#method-reload

还有需要注意的是, App 的权限和 Extension 不同, Extension 里获取不到 App
就是说, 我用 Chrome Extension 来 reload 这个 App 就不成功了.
不过 App 的一个好处可以直接使用 TCP, 这就有可能通过网络检测自动刷新页面了...
http://developer.chrome.com/apps/app_network