Downloaded 42 times
![{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
},
"installs_allowed_from": [
"https://appstore.mozillalabs.com"
],
"default_locale": "en"
}
This is a JSON file that effectively describes your application; it’s name, icons, and other
related data.](https://image.slidesharecdn.com/mozillaapps-120204081353-phpapp01/85/Open-Web-Apps-and-the-Mozilla-Labs-Apps-project-17-320.jpg)
![{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
},
"installs_allowed_from": [
"https://appstore.mozillalabs.com"
],
"default_locale": "en"
}
This is a JSON file that effectively describes your application; it’s name, icons, and other
related data.](https://image.slidesharecdn.com/mozillaapps-120204081353-phpapp01/75/Open-Web-Apps-and-the-Mozilla-Labs-Apps-project-17-2048.jpg)
Uploaded byRobin Hawkes
Open Web Apps and the Mozilla Labs Apps project
Rob Hawkes discusses the Mozilla Labs Apps Project, emphasizing the potential of HTML5 and JavaScript to create web applications that rival native applications on various devices. The project aims to empower developers and users by promoting open technology and providing tools to develop and distribute web apps easily. He highlights features like the application manifest that transforms websites into apps and introduces the WebRT technology, allowing web apps to be installed and function like native applications.
More Related Content
Similar to Open Web Apps and the Mozilla Labs Apps project
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Open Web Apps and the Mozilla Labs Apps project
- 1. P S AP ject E B s pro N W s Ap p aw kes PE Lab Ro bH O Mozilla Hi, I’m Rob Hawkes and I’m going to talk about the Mozilla Labs Apps project and what it means for the Web.
- 2. I work atMozilla, a non-profit company who is fighting for a better Web. If you’re unsure about how much I love Mozilla then check out this beautiful chicken and leek pie with extra Firefox goodness. It was made by my talented girlfriend and it was delicious.
- 3. My official jobtitle is Technical Evangelist but I prefer what it says on my business card. Part of my job is to engage with developers and designers like you and I about cool new technologies on the Web. I’m interested in everything that’s going on but my particular focus at Mozilla is on game development using Web technologies. And for those of you with no idea of what a rawket is, I made a multiplayer game called Rawkets in which players fly around in little rockets and shoot each other in the face with HTML5 and JavaScript. It’s actually quite fun! http://rawkets.com
- 4. We might haveenough time for questions at the end but feel free to grab me in person after this talk or on Twitter. I’m always happy to help. These slides will go online after this talk and they’ll be available from my personal website. I’ll put all the details up at the end.
- 5. Created by PhilBanks (@emirpprime) Now, it’s no secret that I spend most of my time experimenting with HTML5 and other cool technologies like JavaScript. If you’ve met me before then you probably already know about my slight addiction to HTML5 canvas, visual programming, and gaming.
- 6. The concept ofWeb apps is something that is gaining a lot of traction at the moment. No doubt this is as a result of the success of native applications on the desktop and mobile, particularly with iOS and Android. What’s exciting is that HTML5 and JavaScript are now allowing developers to create app experiences on the Web that can rival those on the desktop and mobile. But just having the technology isn’t good enough.
- 7. ion at situ etter nt be b rre ou ld Cu ing sc Th Currently, app platforms are predominantly closed in either the technology required to make the apps or the methods that are used to distribute them. Although these approaches do have their benefits they also put unnecessary constraints on the developers and users of apps. It’s also not an ideal solution if we want an open Web.
- 8. je ct p ro eb p s W A p fthe bs good o La rthe zilla Fo Mo At Mozilla we think there is a better way, a way that puts the developers and users of apps back in charge. We think there is a way that embraces open technology and is for the good of the Web. We call it the Mozilla Labs Apps project and we’re working hard to make it a reality.
- 9. ach Re rm tfo s-pla cros ed us be an sc App It allows you to create rich HTML5 app experiences that run across multiple devices and form factors (desktop, mobile, tablet, etc.)
- 10. g y o lo ch n es e sit n t ew eb pe om ak O us et eady alr ou ty Wha It allows you to use Web standards and open technologies such as HTML5, CSS and JavaScript. Anything you currently use to build a website with can be used to build an app.
- 11. oice f ch ol o on tr o m ers in c ed Fre d consum an vs de tting Pu It puts you in control of every aspect of the app experience; from easy development, to distribution, to direct communication with your customers.
- 12. ie w rev r p wo rk p e nd velo theg rou De aying L Right now we’re in a limited Developer Preview to lay the groundwork and test things but we’ll soon be opening that up so more people can try it out.
- 13. te d r ta app g s ttin te an Ge to crea How Creating a Web app isn’t crazy hard, it’s just a case of understanding the new features in browsers.
- 14. tes bsi we olo gy ar e tec hn ps me Ap et he sa us ey Th Apps are websites and are built using the same technology and processes. If you already know how to make a website then creating your first Web app is a breeze.
- 15. s ite e b e w ap ps th for in g on ality nd fun cti Exte g new ddin A The Mozilla Labs Apps project proposes some additions to standard websites and introduces a few new JavaScripts APIs into the browser that help make apps an experience unlike any other on the Web. If you don’t know JavaScript then don’t be put off, the amount that’s needed to make an app is relatively small and should make sense to you. However, I would definitely advise learning JavaScript development if you’re planning on getting really involved in Web apps.
- 16. fe st n i a m o an a pp io n int a t ite plic we bs Ap rninga Tu The only thing that you need to do to turn a website into app is create an application manifest.
- 17. { "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": [ "https://appstore.mozillalabs.com" ], "default_locale": "en" } This is a JSON file that effectively describes your application; it’s name, icons, and other related data.
- 18. nts e irem ember q u t re ttor em fes tan ni mp or Ma I There are a couple of important things to remember when creating an application manifest.
- 19. a in o m ty e d curi am nt of se S me ele An The first is that it needs to be hosted from the same domain as your Web app. This is pretty straightforward and it adds an element of security in that it is unlikely that a rouge manifest file will be able to be put on the same domain without your knowledge.
- 20. Content-type header application/x-web-app-manifest+json The second is that it needs to be served with a specific content type (application/x-web-app- manifest+json). This is probably the most tricky process in turning a website into an app as it involves changing settings on your server or a bit of hackery in your manifest file. If you don’t want to fiddle with your server then you can always set the content-type header using something like PHP or Node.js.
- 21. Extension my-manifest-file.webapp It’s also recommended that the manifest file has an extension of .webapp, although this isn’t enforced.
- 22. to r a lid s ok va st hin g i nife everyt Ma su re king Ma If you want to make sure your manifest is valid you can have it checked at http:// appmanifest.org
- 23. p s a p lin g er tal bro ws Ins nt he oni so nd na sio xten Viae You can install and manage apps using an extension for Firefox on the desktop and an application for Android. We’re working on building the necessary functionality directly into Firefox, as well as providing a JavaScript include that can be used in other browsers. https://addons.mozilla.org/en-US/firefox/addon/app-runtime/ https://apps.mozillalabs.com/bin/Soup-0.1.apk
- 24. Installing an app navigator.mozApps.install(manifestUrl) Installing an app is achieved through the new mozApps JavaScript API, particularly the install method. By passing it a string URL to the app’s manifest file you will trigger the installation process. An example of when you would call this method is after a user clicks on an “Install this app” button on your own website.
- 25. The install methodtriggers an installation dialogue within the browser that allows the user to decide what to do with the app.
- 26. When installed, appscan be accessed and managed via a special dashboard during the developer preview. This is available by accessing https://myapps.mozillalabs.com or clicking on the Apps link at the bottom of the Firefox window.
- 27. Apps launched fromthe dashboard are opened in an application tab at the far left-hand side of the tab bar. An application tab is different in that it has a much smaller visual footprint in the tab bar and there is little browser UI cluttering the screen, like the address bar.
- 28. ion u t trib ey Dis dm on s an tore ps Ap Creating an app is only half the story, the final chapter is distributing your app and getting it in the hands of users. There are a couple of prominent options here.
- 29. ne alo o it elf rs G it y ou do land tro on full c Take The first option is to provide the app only via your own website and do the leg work in regards to promotion. This option is an enticing one for developers who want full control over where and how their app is distributed. However, right now this is a tricky option if you want to charge for your app.
- 30. s rm fo ace lat g park etpl tin pM Exis illa Ap Moz he et Lik The second option is to use an existing platform like the Mozilla App Marketplace. There are many benefits to this option but the main ones are that you don’t need to worry about payment systems nor have to do as much promotion. The marketplace uses PayPal and BrowserID to make the purchase and confirmation of purchase as easy as possible. http://apps-preview.mozilla.org/
- 31. nce erie exp eb sit es ive ifie dw at lor N er jus tg long no are ps Ap I think what is most interesting about the apps project is the ability to break away from the concept of apps being nothing more than glorified websites. Instead, the new functionality allows Web apps to look and act much like native applications that you would find in an operating system, rather than a website running within a browser.
- 32. RT eb W e OS th ithin sw pp ga llin Insta We call this WebRT (Web run-time) and it’s really cool. It allows you to install Web apps in the operating system as if they were a native application. Right now, WebRT is supported on Windows, Mac, and Android. It’s built into the Firefox extension, Android application, and JavaScript include that I mentioned earlier for installing and managing apps.
- 33. It’s really easyto use and you don’t need to do anything special as a developer to enable it in your app. Whenever a user requests to install an app they will see an option to install it natively.
- 34. ock e d th reen m ro or home sc f nch sktop, Lau or de … Apps installed using WebRT are no different to any other native application that you have on your computer. They’re installed in a standard applications folder and can be launched in the same way that you launch any other application. For example, on the Mac your app would be installed in the ~/Applications directory.
- 35. U I ser row alo ne o b rs ou N an dy rs ou isy ation lic app The WebRT applications use a browser rendering engine behind the scenes but don’t display any normal browser UI that would clutter your app. Instead, WebRT apps look and feel like native applications while actually using HTML and JavaScript behind the scenes.
- 36. This is anexample of my HTML5 game running as a WebRT application, check out the lack of browser UI. Right now WebRT uses the version of Firefox you already have installed to grab the rendering engine. In the future you won’t necessarily need a browser installed and WebRT will handle grabbing a relevant rendering engine behind the scenes.
- 37. gy olo c h n er rth d te even fu late ap ps Re shing Pu Aside from WebRT and the apps API there are many other Web technologies that help push apps even further.
- 38. PI n A re e ul Sc we rf ull et po F im ple ,y S The Full Screen API allows you to expand any HTML element to fill the users screen, even if the browser isn’t running full screen itself. It’s different to using the F11 shortcut for full screen a that makes the entire browser full screen and keeps the address bar and other UI if you place the mouse near the top of the screen. With the Full Screen API only the specific HTML element that you choose will be made full screen and the browser UI will be hidden. It’s useful for things like video and games. https://bugzilla.mozilla.org/show_bug.cgi?id=545812 http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.html https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
- 39. e ts ock bS ation e W omm un ic ec l-tim al rea ction ire Bi-d WebSockets is particular favourite of mine. It a JavaScript API that allows you to provide bi-directional real-time communication between a browser and a server. This means you can instantly push data to and from the user as soon as it becomes available.
- 40. se ts a s line yw ay Off ern et an Int he st ed ne Who Technologies like the application cache, Local Storage, and IndexedDB allow for a website or app to cache necessary assets to that it can still run while offline. This includes things like JavaScript files, CSS and images as well as standard key/value data. Combining these techniques will allow your application to continue working even if the Internet connection goes down. You just sync up all the changes when it gets connected again. https://developer.mozilla.org/en/Offline_resources_in_Firefox
- 41. P Is e A evic cript D aS Jav ith arew ardw h ssing ce Ac Device APIs is a catch-all term for the technologies that allow developers to access hardware and operating system APIs using JavaScript.
- 42. At Mozilla we’reworking on the WebAPI effort which is our attempt at solving this problem. In other camps it might be referred to as DAP, which is the Device APIs Working Group who are producing a W3C specification for accessing various parts of a device through JavaScript. In fact, we recently joined the DAP to collaborate and contribute to the existing efforts. The approach we’re taking is to try and replicate the functionality of a mobile phone with JavaScript. What APIs would you need to do that? http://hacks.mozilla.org/2011/08/introducing-webapi/ http://arewemobileyet.com/
- 43. tes uri avo for y f ait tw M Ican no Is AP evice D There are so many Device APIs in the pipeline when you combine all the efforts by the various browser manufacturers. Here are just a few of my favourites.
- 44. PI A re tu phone ap ia C m icro ed era and M cam the ssing ce Ac The Media Capture API will let you access the camera and microphone on a device. Being able to do this with JavaScript will make a whole world of difference in so many areas. For example, instead of requiring a user to upload a profile image you could take one using the webcam and use that instead. Simple but effective. You could also do things like using the microphone input for voice recognition in for input areas. I know Google are already experimenting heavily in this area.
- 45. P I A tery eft at eisl B juic uch m ow th ou Find The Battery API is interesting because it allows you to find out how much power is remaining, or whether the device is currently being charged.
- 46. P I C A NF ion eb un icat W m om sc les wire -like RFID The WebNFC API is pretty cool. It gives you the ability to transmit and receive data within distances no larger than a few centimetres. The idea is that it can be used in phones for things like payment (like the new Barclaycard), travel (think Oyster Card), and file transfer. https://bugzilla.mozilla.org/show_bug.cgi?id=674741
- 47. P I n A tio ogies ibra hn ol V ent ec op ith youw ating Vibr Or what about the Vibration API that gives you access to the vibration motors of a device. Apart from having a humorous name, it’s APIs like this are really going to change the way that apps are created with JavaScript. https://bugzilla.mozilla.org/show_bug.cgi?id=679966
- 48. o re t m ou rces ind res ou F ion and ntat e ocum D I hope I’ve given you a taste for the Mozilla Labs Apps project and the potential for Web apps right now. There is much, much more to learn about them and the related technology.
- 49. One of theplaces to check out for general information is the apps section on the Mozilla Labs website. https://apps.mozillalabs.com/
- 50. For technical informationthe apps section of the Mozilla Developer Network is the place to go. It’s full of clear documentation on every detail of the project so far and is being update all the time. https://developer.mozilla.org/en/Apps
- 51. u s lk to C Ta illa IR M oz on ps ap eb nw pe #o For anything that can’t be answered by those websites you should get in touch with us. The developers and relevant apps-related people at Mozilla hang out in the #openwebapps room on irc.mozilla.org so definitely head over there if you have any particular questions or concerns. We’ll be happy to help.
- 52. Rob Hawkes @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Rawket Scientist Delving into your soul Technical Evangelist at Mozilla Rawkets.com ExplicitWeb.co.uk HTML5 & WebSockets game Web development podcast Get in touch with me on Twitter: @robhawkes Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http:// rawkes.com I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/ blog/2011/05/05/people-love-a-good-smooch-on-a-balcony Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com
- 53. Ask MDN Coming back this year Web development topics ASKMDN Hand-picked experts Great discussions @ASKMDN & #ASKMDN ON TWITTER And lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on at Mozilla. The concept is simple; every so often we gather a bunch of experts to answer your questions about a particular topic. We’ve had a whole bunch of sessions to date and it’s going down really well. If you follow @AskMDN on Twitter you’ll be sure not to miss the next one when it starts again this year. http://twitter.com/AskMDN
- 54. O U Y s? K tion N ues A yq TH An R b es wk es Ha wk ob ha ro @ Thank you. If you have any questions feel free to grab me on Twitter (@robhawkes) or email rob@rawkes.com.