Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at

Installed app 注意事项



在设计一个可安装的 Open Web App 时, 关于 app 在安装后在行为上的表现, 有一些注意事项需要考虑。本文则对其进行了一一介绍。


在 app 安装后, 将会运行在缺少浏览器界面的自包含实体中。这就意味着除了浏览器中有效的功能外, 你需要提供给用户一切使用 app 的内容以及将对 app 布局产生的效果(参考下面的 “灵活性与响应” 一节)。总之, app 不过是让人看起来想内容动态变化的一个页面,而不是一系列页面间的切换。 


你不能指望着用户用他们的设备导航栏上的“返回”按钮来回到app的上一个或者之前浏览过的页面. 一般来说, 使你的web app本身就具备这些功能是明智的选择--提供一个你自己的返回按钮, 或者是针对不同页面的导航标签,甚至是定义一套用来前进/后退的滑动手势, 当然也可以用一些其他的令你的app显得更加独特功能.





I'm sure you get the idea by now! Search is another function that users often rely on while using a web app, for further or related information, or usage instructions. To save users the irritation of having to keep going back and forth to and from their browser app, provide an in-app view to give users the resources they are most likely to need, such as a glossary, or a basic usage guide. Although saying that, if an app is so complicated that it needs a large usage manual to accompany it, it would be questionable whether it works as a single app.



You also need to consider availability of accessibility features. The browser's zoom function won't be available, and you can't set apps to have an increased default text size, so you'll need to progam in your own functionality for increasing text size, etc.

灵活性 & 响应性

我们知道许多可安装的开放 web 应用将安装在不同的设备上, 因此需要开发一个灵活的行为,以使布局和图形能够在多种情况下,如宽屏和窄屏,低分辨率和高分辨率等。在不同目标设备上均能满足条件的最好的方法就是强制您的 UI 使用整体视图,使用百分比来灵活设定大小,使用媒体查询 ( media queries)将优化布局应用在你的目标屏幕(例如,平板,智能手机,功能手机,电视等)中主要的 class 上。

在 App 布局layout 页面,你可以得到关于开放 web App 布局更多的信息。

Native look versus web individuality

One issue you will come across when designing an installable Open Web App concerns going with the native look of the device, versus preserving individuality. After all, most platforms tend to have design guidelines that the device manufacturers like third party apps to adhere to, to a greater or lesser degree, but on the other hand the web champions individuality of sites, and you don't want your creations looking exactly the same as everyone else's (often an issue when you use a popular UI framework for rapid app development.)

If you are making an app mainly aimed at the Firefox OS platform, there are Firefox OS design guidelines available, but you should try to follow those as closely as possible while still preserving a bit of your own personality. One option is even to apply a custom stylesheet to your UI when it is installed on a certain platform, but by default use something more individual.


 此页面的贡献者: burningheart, sleelily, ReyCG_sub
 最后编辑者: burningheart,