1 / 25

FIREFOX OS

FIREFOX OS. 应用开发、发布. 使用HTML5, CSS 和 JavaScript 建立Web应用. Web应用. 使用标准Web技术和Web工具开发，在浏览器中运行 Web站点添加少量信息可以改造为Web应用。 运行于多种平台：桌面浏览器、移动设备。. Web应用源码结构. HTML文件 JS文件 CSS、图像及其他资源 Manifest文件. 步骤. 1. 使用HTML5, CSS, & Javascript 开发web应用. 2. 为应用创建manifest文件. 3. 发布/安装应用. 1.

grady-tyler
Télécharger la présentation

FIREFOX OS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FIREFOX OS 应用开发、发布

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

  3. Web应用

  4. 使用标准Web技术和Web工具开发，在浏览器中运行使用标准Web技术和Web工具开发，在浏览器中运行 Web站点添加少量信息可以改造为Web应用。 运行于多种平台：桌面浏览器、移动设备。

  5. Web应用源码结构 HTML文件 JS文件 CSS、图像及其他资源 Manifest文件

  6. 步骤

  7. 1. 使用HTML5, CSS, & Javascript 开发web应用 2. 为应用创建manifest文件 3. 发布/安装应用

  8. 1. 使用HTML5, CSS, & Javascript 开发web应用

  9. 重用现有的网站/web应用，或者从头开发新的web应用。重用现有的网站/web应用，或者从头开发新的web应用。 利用HTML5的功能: 本地存储(Local Storage) 离线清单(Offline manifest) 索引型数据库(Indexed DB) Web API 设计要适应不同的屏幕分辨率和屏幕方向。

  10. 2. 为应用创建manifest文件

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

  12. {"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"}

  13. 应用权限(Permission) 部分功能敏感的WebAPI使用前需要声明权限 声明格式 {权限名: {访问属性}} 示例 访问属性包括： read readwrite readcreate createonly "permissions": { "device-storage:pictures":{ "access": "readwrite" }, "device-storage:videos":{ "access": "readwrite" }, "settings":{ "access": "readonly" }, "camera":{} },

  14. CSP Content Security Policy 保证内容安全，防止跨站攻击等 Privileged App的默认CSP default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline' Apps CSP

  15. default-src *; //默认接受所有内容 script-src 'self'; //不允许使用其他域的js, 不允许使用内联js, 不允许eval object-src 'none';//不允许使用Plugin style-src 'self' 'unsafe-inline'//不允许使用其他域的css，但可使用内联css Privileged App的默认CSP

  16. 3. 发布/安装应用

  17. 两种方式 托管的应用(Hosted App) Web站点托管应用 独立域名或子域名 打包的应用(Packaged App) 所有资源和文件打包为一个zip压缩包

  18. 托管的应用服务器设置 让Web Server识别manifest.webapp文件， 添加Content-type/MIME type: application/x-web-app-manifest+json

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

  20. 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.

  21. 验证应用

  22. 在线安装托管应用

  23. 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}

  24. Thank You!

  25. 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 参考

More Related