Text

FIREFOX OS应用开发、发布

使用 HTML5, CSS 和 JavaScript 建立 Web 应用 .使用 HTML5, CSS 和 JavaScript 建立 Web 应用 .

Web 应用Web 应用

•使用标准 Web 技术和 Web 工具开发，在浏览器中运行

•Web 站点添加少量信息可以改造为Web 应用。

•运行于多种平台：桌面浏览器、移动设备。

Web 应用源码结构•HTML 文件

•JS 文件

•CSS 、图像及其他资源

•Manifest 文件

步骤步骤

使用 HTML5, CSS, & Javascript 开发 web 应用

1.

为应用创建 manifest 文件2.

发布 / 安装应用3.

1.使用 HTML5, CSS, &

Javascript 开发 web 应用

•重用现有的网站 /web 应用，或者从头开发新的 web 应用。

•利用 HTML5 的功能 :

• 本地存储 (Local Storage)

• 离线清单 (Offline manifest)

• 索引型数据库 (Indexed DB)

•Web API

•设计要适应不同的屏幕分辨率和屏幕方向。

为应用创建 manifest 文件

2.

创建一个 manifest.webapp 描述文件创建一个 manifest.webapp 描述文件

{ "version": "1.0", "name": “My App", "description": “Simple app description!", "icons": { “60": "/img/icon-60.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, “permissions": { “settings": {“access", “readwrite” }, “camera": {} }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { “en": { "name": “My App", "description": " Simple app description " }, “zh-CN": { “name”: “My App”, “description”: “ 应用的简单描述。 " } }, "default_locale": "en"}

应用权限 (Permission)•部分功能敏感的 WebAPI 使用前需要声明权限

•声明格式

•{ 权限名 : { 访问属性 }}

•示例

访问属性包括：readreadwrite readcreatecreateonly

访问属性包括：readreadwrite readcreatecreateonly

"permissions": { "device-storage:pictures":{ "access": "readwrite" }, "device-storage:videos":{ "access": "readwrite" }, "settings":{ "access": "readonly" }, "camera":{}},

Apps CSP

• CSP

•Content Security Policy

•保证内容安全，防止跨站攻击等

•Privileged App 的默认 CSP

•default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'

Privileged App 的默认CSP

•default-src *; // 默认接受所有内容

• script-src 'self'; // 不允许使用其他域的js, 不允许使用内联 js, 不允许 eval

• object-src 'none';// 不允许使用 Plugin

•style-src 'self' 'unsafe-inline'// 不允许使用其他域的 css ，但可使用内联 css

发布 / 安装应用

3.

两种方式•托管的应用 (Hosted App)

•Web 站点托管应用

•独立域名或子域名

•打包的应用 (Packaged App)

•所有资源和文件打包为一个 zip 压缩包

让 Web Server 识别 manifest.webapp 文件，添加 Content-type/MIME type:

application/x-web-app-manifest+json

让 Web Server 识别 manifest.webapp 文件，添加 Content-type/MIME type:

application/x-web-app-manifest+json

托管的应用服务器设置

Apache - in mime.types:application/x-web-app-manifest+json webappApache - in .htaccess:AddType application/x-web-app-manifest+json webappNGinx - in mime.types:types { text/html html htm shtml; text/css css; text/xml xml; application/x-web-app-manifest+json webapp;}

IIS:In IIS Manager, right-click the local computer, and click Properties.Click the MIME Types button.Click New.In the Extension box, type the file name extension.In the MIME type box, type a description that exactly matches the file type defined on the computer.Click OK.

验证应用

在线安装托管应用在线安装托管应用

var request = navigator.mozApps.install( "http://mozillalabs.com/MozillaBall.webapp", { user_id: "some_user" });

request.onsuccess = function() { // Success! Notification, launch page etc}

request.onerror = function() { // Failed. this.error.name has details}

Thank You!

参考•CSP

•https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy

•https://developer.mozilla.org/en-US/docs/Security/CSP/CSP_policy_directives

• 权限

•https://developer.mozilla.org/en-US/docs/Apps/App_permissions