SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

FIREFOX OS

grady-tyler avatar
grady-tyler
25 diapositives · 420 Views · Oct 28, 2014

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.

FIREFOX OS - slide 1
01 / 25FIREFOX OS
1 / 17

Télécharger la présentation

FIREFOX OS
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

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