Developing Apps for Firefox OS Concepts, Techniques and Practical Solutions
Total Page:16
File Type:pdf, Size:1020Kb
Developing Apps for Firefox OS Concepts, Techniques and Practical Solutions Michael Romer This book is for sale at http://leanpub.com/firefox-os This version was published on 2013-08-15 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. ©2013 by Michael Romer, Grevingstrasse 35, 48151 Münster, Germany, [email protected] - All rights reserved. Also By Michael Romer Webentwicklung mit Zend Framework 2 Web Development with Zend Framework 2 Persistenz in PHP mit Doctrine 2 ORM PHP Data Persistence with Doctrine 2 ORM Contents 1 Introduction (available) .................................... 1 1.1 Firefox OS at a glance ................................... 1 1.2 Open Web Apps ...................................... 2 1.3 Web Runtime ....................................... 2 1.4 Firefox Marketplace .................................... 3 1.5 WebAPIs .......................................... 3 1.6 Web Activities ....................................... 3 1.7 Firefox OS Boilerplate ................................... 3 2 A basic development environment (available) ....................... 4 2.1 The browser now is the mobile apps developer’s best friend .............. 4 2.2 Firefox OS Simulator ................................... 4 2.3 Firefox OS hardware devices ............................... 4 2.4 Mortar & FxOSstub .................................... 5 3 Hello, Firefox OS! (available) ................................. 6 3.1 Building the first app ................................... 6 3.2 Firefox OS architecture: Gonk, Gecko & Gaia ...................... 8 3.3 Security .......................................... 10 4 The Manifest file (available) ................................. 11 4.1 Meta information about an app .............................. 11 4.2 App settings ........................................ 12 4.3 Developer settings ..................................... 14 4.4 Permission settings .................................... 14 5 WebAPIs by example (partly available) ........................... 16 5.1 The Grumpy Phone app (using Vibration API & Proximity API) . 16 5.2 More Web APIs (TODO) ................................. 20 6 Web Activities by example (partly available) ........................ 25 6.1 Introduction ........................................ 25 6.2 The Funny Faces app (Pick Activity) ........................... 25 6.3 More Web Activities (TODO) ............................... 31 CONTENTS 7 Programming the Firefox OS Web Runtime (partly available) .............. 32 7.1 HTML & CSS (TODO) .................................. 32 7.2 JavaScript (partly available) ............................... 32 7.3 Firefox UI Build Blocks & Transitions (partly available) . 34 7.4 Single Page Apps (partly available) ............................ 35 7.5 HTML5 canvas (TODO) ................................. 36 7.6 Working offline (TODO) ................................. 36 7.7 jQuery Mobile UI framework (TODO) .......................... 36 7.8 WebGL (TODO) ...................................... 36 8 Distributing apps (partly available) ............................. 37 8.1 Introduction (TODO) ................................... 37 8.2 Distributing via a website (TODO) ............................ 37 8.3 Submitting to a Marketplace (available) ......................... 37 8.4 App updates on a Marketplace (available) ........................ 38 9 Modifying the Firefox OS core UI Gaia (TODO) ...................... 39 1 Introduction (available) We live in crazy times. Not long ago everybody moved to the Web mainly for its killer feature to easily access applications-no downloads, no installs, no updates, no hassle. People more and more moved away from native Windows or Mac applications and into the browser using apps running online directly in the browser. They did so on their PCs and laptops, but then Apple came with its iPhone and later the iPad. Surprisingly, with the iPhone and iPad, locally installed apps had a very successful comeback. Its hard to tell why exactly this happened, but there are definitely good reasons, e.g.: • Apple opened up its App Store with a payment system built-in. In fact, the Web still lacks of a standard solution to make it as easy as in an app store to pay for media or applications. In fact, with a typicall app store, it couldn’t be much easier anymore to buy digital products. This is the main reason for publishers and developers to hop onto the native apps wave-they can easily monetize their digital products. • New apps can be discovered easily using the App Store. • Its easy to launch an app (via a home screen icon) and to switch between running apps. • Native apps mostly offer great usability and feel snappy. They are built from the ground up for the touch interfaces of smartphones and tablets. • Apps can do things which web apps cannot. Mainly because web apps running in a browser are not allowed or simply technically cannot access important device features such as camera, proximity sensor and the like. • Push notifications offer a great way to receive messages from the web in a convenient short message (SMS) fashion. • Native apps mainly always still work well while being offline. • And lastly: Apps are en-vogue. However, in fact, there is no reason why an app needs to be built with proprietary technology. With Firefox OS, Mozilla now brings open web technologies to mobile app development, challenging proprietary platforms from Apple (iOS) or Google (Android). Firefox OS essentially is completely based on open standards and is a new competitor to the established mobile platforms. If one believes in the web, Firefox OS is an interesting new mobile platform which huge potential. 1.1 Firefox OS at a glance On first sight, Firefox OS looks like just another operating system for mobile phones. However, what it makes special is that its apps are developed using standard web technologies like HTML5, CSS and Introduction (available) 2 JavaScript. Mozilla, the creator of the famous Firefox browser-and now also of Firefox OS-calls these kinds of apps “Open Web Apps”. This is a fundamentally different approach compared to Apple with iOS and Objectiv-C or Google with Android and Java. 1.2 Open Web Apps Open Web Apps come in two different flavors: Hosted apps and packaged apps. While hosted apps run on a server on the web, packages apps bring all the app’s code with them in an installer-like fashion. Obviously, both types have its pros and cons, but by definition, both types are “real” Firefox OS apps. 1.3 Web Runtime Open Web Apps run in a so-called Web Runtime. A Web Runtime essentially is a browser-like runtime environment for web apps while the browser itself is invisible during execution-no typical browser frame, toolbar, etc. One may remember Mozilla Prism¹ and Adobe Air-both conceptually web runtimes as well. Prism is not an active project anymore. A web runtime to power open web apps is available in Firefox OS, but also on Windows, Mac as well as Android. 1.3.1 Hosted apps Hosted apps can simply be existing websites that also work well on small screen sizes and touch interfaces. If an existing websites is built in a fluid manner, e.g. by using responsive web design techniques, they may work on a Firefox OS mobile device “as-is”. This is especially true, if a website already has an “app-like” UI, e.g. if jQuery Mobile is used. Also with hosted apps, updating the app simply means updating the website-the workflows are very much the same compared to regular web site development. On the flip side, hosted apps mostly don’t work without Internet connection. Thanks to the HTML5 Appcache Specification this issue can partly be solved elegantly, as we will see later in the book. A bit more painful is the fact, that hosted apps cannot access all the APIs offered by Firefox OS, meaning they cannot access several device features. The reason for this mainly is security, as hosted apps cannot fully be security cleared beforehand. This may or may not be an issue depending on the application itself. Hosted apps are deployed on a remote server. The only component installed locally on the mobile device is the app’s Manifest. 1.3.2 Packaged apps Packaged apps are much more like apps on Android or iOS as they are self-contained and don’t need a website running on a remote host to function. Of course, they may also consume remote ¹https://mozillalabs.com/en-US/prism/ Introduction (available) 3 web services, however, this is not required. A packaged app works standalone by default, therefore often does not need constant Internet connectivity. As packaged apps can be reviewed for security issues beforehand, they may access more APIs compared to hosted apps. This makes packaged apps particular interesting. As with hosted apps, there is a flip side. Packaged app updates must be distributed to all devices with the app installed. This, obviously, is harder than updating a website. Technically, a packaged app simply is a zip file with some additional metadata. This means, a packaged app is installed completely on the device with its code and assets as well the Manifest file. 1.4 Firefox Marketplace The Firefox Marketplace is a place get new apps for a Firefox OS device. By design, there might be other stores distributing Firefox Apps, very much like in the Android ecosystem while Apple runs the