Firefox OS 应用样板介绍

在接触一个新的平台或环境时，查看一些代码和示例来了解如何运作始终是一个好主意。对于Firefox OS 和应用开发来说，它仅仅是 Web 加上了一些额外的功能。

之前在 Mozilla Hacks 上，我们已经介绍了一些开始构建 Firefox OS 应用的方法

我的经验

最近，我有幸参加并组织了一些关于 Firefox OS 的研讨会，见证了开发者尝试为其构建应用、移植他们现有的 Web 应用以及更多。

这对我来说是一个极好的学习过程，并且观察到人们可能需要哪些提示、帮助或示例至关重要！

Firefox OS 应用样板

这促使我创建了Firefox OS 应用样板。顾名思义，它旨在为你提供构建应用的最基本功能，无论是从头开始构建还是移植现有的 Web 应用。

其理念也是避免依赖任何外部库或资源，而是保持自包含。

它包含

一个安装按钮，允许你将其安装为托管应用
Web Activities – 许多示例和用例
WebAPIs 在行动
离线支持（默认禁用）
打包应用 – 将你的应用安装为 ZIP 文件

它可在 GitHub 上获取

如何使用它

最简单的入门方法是安装并测试各种功能，方法是在 Firefox OS 设备上的 Web 浏览器或Firefox OS 模拟器中导航到Firefox OS 应用样板。

或者，通过提供以下任一 URL 在 Firefox OS 模拟器仪表盘中安装它

本地运行

一旦你准备好开始开发，下载代码并在 Web 服务器上运行它，或者在 Firefox OS 模拟器中指向你的本地 Firefox OS 应用样板版本。

注意：确保清单文件中的路径在你的本地主机上有效 – 请记住，这些路径相对于提供服务的网站的根目录。

还要确保配置你的服务器以使用正确的Content-type发送清单文件：application/x-web-app-manifest+json。

例如，这在 Apache 中的.htaccess 文件中很容易设置

AddType application/x-web-app-manifest+json .webapp

离线支持

我提供了一个.appcache 文件来启用离线支持（默认禁用）。

要启用离线功能，只需将其添加到index.html 文件中

在启用离线支持之前，请务必做好功课，以避免可能出现的初始问题

请记住，.appcache 文件必须作为 text/cache-manifest 文件提供服务

AddType text/cache-manifest .appcache

打包应用

当你开发 Web 应用时，默认情况下它们是从服务器提供的，因此需要在线连接或启用离线支持才能按预期工作。

但是，你还有另一种选择，即打包应用。基本上，它是将应用的所有文件放入 ZIP 文件中，使其直接在设备上可用。

打包应用还可以请求对 Firefox OS 中某些 WebAPI 的高级访问权限，而这些权限对托管应用不可用（我们将在 Mozilla Hacks 上的后续文章中详细介绍差异）。

Firefox Boilerplate OS 应用中包含几个文件可以帮助你入门，如果你对此感兴趣。

要创建和安装打包应用，你需要执行以下几个步骤

压缩所有应用内容（不包含文件夹），包括常规清单
创建一个迷你清单（package.manifest 文件），并确保“package_path”是 ZIP 所在位置的绝对路径
开发者名称和信息必须与 ZIP 文件中常规清单中的信息匹配
在 JavaScript 中使用installPackage调用指向迷你清单（而不是常规的install调用）– 这在base.js 文件中的注释中显示
在 Firefox OS 模拟器中打开开发者模式（设置 > 设备信息 > 更多信息 > 开发者 > 开发者模式）
如果要访问某些 API，请在清单中添加 type 属性（例如"type" : "privileged"）

正在开发中

Firefox OS 应用样板正在开发中，这意味着它可能会随着时间的推移而发生变化。但是，我相信它可以让你对 Firefox OS 中 Web 应用的可能性有一个良好的开端和了解。

希望你喜欢它，请告诉我你的想法！

技术布道师和 Mozilla Hacks 编辑。发表演讲并撰写关于 HTML5、JavaScript 和开放 Web 的博客文章。Robert 是 HTML5 和开放 Web 的坚定支持者，自 1999 年以来一直从事 Web 前端开发工作 - 在瑞典和纽约市。他还定期在http://robertnyman.com上发布博客文章，并且热爱旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…

36 条评论

Rodolfo De Nadai

哇！太棒了！
这肯定会让开发人员的生活更轻松…

很棒的工作…！

2013年1月30日 02:57
1. Robert Nyman [编辑]
  
  谢谢，希望如此！
  
  2013年1月30日 03:02
mpmedia

请包含一些测试，以便我们学习如何为 Firefox OS 应用编写测试，为什么不也包含一个用于 Firefox OS API 的模拟框架呢？

2013年1月30日 03:13
1. Robert Nyman [编辑]
  
  我相信这超出了样板的范围。这些都是好东西，但我认为它会变得越来越大，并且不会像今天这样易于使用和简洁。
  我相信Mortar 更适合这种情况，并且这些选项可以相互补充。
  
  关于测试的话题，最好的地方可能是查看Gaia 中的测试（Firefox OS 的 UI）。
  
  2013年1月30日 03:46
zalun

至于在本地运行它，我发现了一个小型的 Python 脚本，如果有人（像我一样）不想运行 Apache：https://gist.github.com/4640534 只需将其放在应用的目录中并运行“python serveapp.py”，它将在端口 3000 上运行

2013年1月30日 03:24
1. Robert Nyman [编辑]
  
  啊，不错 – 谢谢你的提示！
  
  2013年1月30日 03:46
rg

如何在该样板中构建 Gaia 的 UI 块（http://buildingfirefoxos.com/）？是否有要导入的样式表？

2013年1月30日 04:01
1. Robert Nyman [编辑]
  
  现在，你需要将这些构建块中的文件和代码复制到自己的应用中才能使其工作（即，你的应用将无法访问 Gaia 中的文件）。
  
  我们还将在 Mozilla Hacks 上发布一篇关于 Gaia 构建块的未来博文 – 请继续关注！
  
  2013年1月30日 04:58
Fernando Briano

这太棒了！就在昨天，我移植了我的第一个 Web 应用并在 Firefox OS 模拟器中对其进行了测试。在阅读了相关内容后，我现在将添加离线支持。对于新开发者来说，这是一个很棒的起点，谢谢！

现在，如果我能得到其中一部 Peak 手机就好了：D

2013年1月30日 04:39
1. Robert Nyman [编辑]
  
  谢谢，很高兴你喜欢！
  是的，我也想要一部。:-)
  
  2013年1月30日 04:41
Jaydson Gomes

哦，不错！
这个样板正是我一直在寻找的 :)
顺便说一句，FirefoxOS 是有史以来最令人兴奋的技术。

2013年1月30日 06:10
1. Robert Nyman [编辑]
  
  谢谢，听到这些我非常高兴！:-)
  
  2013年1月30日 07:34
Joshua Ols

非常方便，这肯定没错。现在我要用 jQuery 和 Backbone 对其进行一些有趣的重构。:p

附言。
你们会支持主屏幕的自定义启动器吗？

我之所以这样问是因为我个人不喜欢主屏幕作为应用管理器的 iOS 风格隐喻。如果可能的话，我想编写一些更类似于 Android 自定义启动器“Action Launcher”的东西，在那里我可以在主屏幕上放置快速访问应用链接，并为那些我使用频率较低的应用提供一个滑出式字母顺序列表。

有什么想法吗？

2013年1月30日 06:18
1. Robert Nyman [编辑]
  
  听起来不错！
  
  在启动器方面，我现在不太清楚。我绝对同意你的观点，并认为这将是一个很好的替代方案。现在你可以自己修改 Gaia（Firefox OS UI）并将其更新推送到手机，但我认为作为应用，你将无法通过 API 等获得足够的访问权限来更改实际的主屏幕。
  
  2013年1月30日 07:38
Peter Bengtsson

是否有用于自动创建图标的网站？例如，如果我有一个 199×199 的 jpg 文件，它能否生成 60×60 的圆角 png 文件。

2013年1月30日 09:54
1. Robert Nyman [编辑]
  
  很高兴你问！我在GitHub 存储库的自述文件中提到了它
  在Firefox OS 应用图标样式指南中，有一个包含说明、可下载示例等的优秀资源。
  
  2013年1月30日 10:48
  1. Peter Bengtsson
    
    我的意思是，一个可以帮助像我这样的不会使用 Photoshop 的人从任何图像生成正确尺寸图标的 Web 服务。
    
    如果没有这样的 Web 服务；我很乐意编写一个。
    
    2013年1月30日 17:31
    1. Robert Nyman [编辑]
      
      啊，我明白了。如果只是调整现有图片的大小，我相信肯定有现成的方案。不过我个人认为，这样做可能导致图标设计并非最佳（因为图标设计不仅仅关乎大小）。
      
      我建议您从图标样式指南中选择任意一个模板，然后使用在线编辑服务，比如Pixlr或在线Photoshop进行编辑，并根据您的需求进行调整。
      
      2013年1月31日凌晨2:27
Rob Hudson

类似于zalun上面提到的托管应用，我写了一个脚本用于本地服务打包应用。它可以动态压缩内容，并处理小型清单文件。如果您正在开发打包应用，并且有设备可以进行测试，它可以帮助您。欢迎提供反馈和错误报告。
https://github.com/robhudson/packaged-app-server

2013年1月30日晚上9:20
1. Robert Nyman [编辑]
  
  谢谢Rob，这太棒了！
  
  2013年1月31日凌晨2:27
Tin Aung Linn

这真的帮助我理解了工作流程。

谢谢你们。

2013年2月1日凌晨3:10
1. Robert Nyman [编辑]
  
  很高兴听到这个消息！
  
  2013年2月1日凌晨4:17
zalun

在模拟器、桌面B2G或Unagi手机上，都找不到“设置 > 设备信息 > 更多信息 > 开发者”中的“开发者模式”。

是否有其他步骤可以启用此设置？

一旦清单文件中出现“type”: “privileged”，应用程序就会安装失败:(

2013年2月4日凌晨4:46
1. Rob Hudson
  
  zalun——我相信现在这叫做“远程调试”？我就是这样成功安装打包应用的。
  
  据我所知，如果您的打包应用类型为“privileged”，目前无法将其安装到实际设备上。如果您运行`adb logcat`，您会看到错误提示，很可能是类似于无效包的内容，这意味着签名无效（因为它没有签名）。
  
  2013年2月4日上午10:51
  1. Robert Nyman [编辑]
    
    我知道我用installPackage和安装ZIP文件测试过样板代码，但我需要进一步了解它的实际功能。
    
    2013年2月4日下午1:18
  2. Maël Lavault
    
    当然有一种方法。查看b2g remote
    github上的ff插件。我经常用它在unagi上测试我的特权打包应用！
    
    2013年2月5日凌晨5:46
    1. Robert Nyman [编辑]
      
      是的，这可以将应用推送到设备，但它无法启用网页浏览器中来自网页的installPackage。
      
      2013年2月5日上午7:23
2. Robert Nyman [编辑]
  
  我刚刚在我的模拟器（版本1.1pre3）中检查过，它就在那里。
  您可以通过FTP获取所有可用版本 – 祝您好运！:-)
  
  2013年2月4日下午1:16
JulienW

嘿，感谢这篇博文 :)

更正一点：打包应用的迷你清单文件应该像web应用清单文件一样提供服务，而不是缓存清单文件。最值得注意的是，它的MIME类型是application/x-web-app-manifest+json。因此，只需将其命名为.webapp扩展名即可，因为您已经添加了Apache配置。

一般来说，永远不要使用.manifest扩展名命名文件，因为它被过度使用了。

2013年2月4日上午6:29
1. Robert Nyman [编辑]
  
  谢谢，很高兴您喜欢它！
  
  关于迷你清单文件，这很有趣！打包应用的文档说它应该命名为package.manifest（因此，我想用它对应的Content-type提供服务，以免覆盖其他清单文件等）。
  
  我同意.manifest文件的过度使用，但遵循了文档（并且它起作用了:-)）。我很乐意将其替换为package.webapp。
  
  你能对此多做一些解释吗？
  
  2013年2月4日下午1:24
  1. Julien Wajsberg
    
    MDN本身并没有错，但我认为它有些误导性。
    
    – 文件名并不重要。但是，我们习惯称之为update.webapp（因为我们也称之为“更新清单”，因为它用于安装和更新打包应用）。
    – Content-Type显然是application/x-web-app-manifest+json :) 但是，如果安装网站的来源与应用程序的来源相同，我们不会检查这一点，而这种情况大多数时候都会发生。也许这就是它起作用的原因。
    
    有机会的话，我会修改MDN上的内容，感谢您指出这一点！
    
    2013年2月5日凌晨0:12
    1. Julien Wajsberg
      
      顺便说一句，我创建了https://github.com/julienw/self-updating-packaged-app，它可以用来展示打包应用如何自我更新（这对托管+appcache应用也有效）。
      
      2013年2月5日凌晨0:14
      1. Robert Nyman [编辑]
        
        不错，感谢分享！
        
        2013年2月5日凌晨2:00
    2. Robert Nyman [编辑]
      
      谢谢，更清晰了！我也更新了样板代码库和博文。
      
      2013年2月5日凌晨2:00
Fernando Jiménez

嗨，Robert，

如果我没弄错，迷你清单文件不需要使用特定的名称。它只需要使用正确的Content-type提供服务，正如Julien提到的，它是“application/x-web-app-manifest+json”。

您可以查看我们检查打包应用安装的Content-type的源代码。
1. https://mxr.mozilla.org/mozilla-central/source/dom/apps/src/Webapps.jsm#1675
2. https://mxr.mozilla.org/mozilla-central/source/dom/apps/src/AppsUtils.jsm#237

需要使用特定名称（“manifest.webapp”）的清单文件是ZIP文件中的清单文件(https://mxr.mozilla.org/mozilla-central/source/dom/apps/src/Webapps.jsm#2217)

干杯！

2013年2月4日下午2:51
1. Robert Nyman [编辑]
  
  是的，我对ZIP文件中的那个非常清楚。但对迷你清单文件不清楚。
  感谢您的澄清，这意味着我们可以对迷你清单文件使用.webapp扩展名——好消息！
  
  我将更新样板应用并相应地发布。
  
  2013年2月4日下午2:54

本文评论已关闭。

Hacks

作者：Robert Nyman [荣誉编辑]

我的经验

Firefox OS 应用样板

如何使用它

本地运行

离线支持

打包应用

正在开发中

关于 Robert Nyman [荣誉编辑]

36 条评论

Firefox OS 应用样板介绍

作者：Robert Nyman [荣誉编辑]

我的经验

Firefox OS 应用样板

如何使用它

本地运行

离线支持

打包应用

正在开发中

关于 Robert Nyman [荣誉编辑]

发现 Web 开发的优秀资源

感谢！请查看你的收件箱以确认你的订阅。