Date post: | 06-May-2015 |
Category: |
Technology |
Upload: | mate-nadasdi |
View: | 1,491 times |
Download: | 0 times |
Firefox OS@matenadasdi
Mate Nadasdi
Gaia - Gecko - GonkGaia: User interface application written in HTML on the top of the software stack. (mozChromeEvent and mozContentEvent)
Gecko: Application runtime. Networking stack, graphics stack, layout engine, a JS virtual machine, and porting layers, etc.
Gonk: A linux kernel, hardware abstraction layer, a porting target of Gecko.
Application Sandbox
Simple web apps on your Phone!
Write your web app as you did before
Packaged Apps
Hosted Apps
App manifest file
Packaged apps
a zip containing your whole application
have access to sensitive APIs on device
The store cryptographically signs the zip with its private key
Packaged apps - Types
• Privileged:o Approved by Firefox Marketplaceo App resources are signedo Allowed to use sensitive Web APIso Device permissions are explicit, user can change it in any time
• Certified:
o intended for critical system functiono Device permissions are implicit
• Plain:
o Marketplace signs it without any special authentication processo Cannot use sensitive Web APIs
Hosted apps
• Just like a regular website but application manifest
file is essential
• App manifest needs to be on the same origin
• Optional Appcache manifest
• Lower Web API permissions
• one-app-per-origin policy
App Manifest
• JSON
• application/x-web-app-manifest+json mime-type
• all paths must be absolute
• list all Web API permissions
• Specifies a set of Web Activities that the app
supports
Web API
• Simple Javascript APIs• Lot of mobile phone features implemented
• Simple feature detection is a good practice: if ('vibrate' in navigator)
WebRT APIs (Permissions-based APIs)
• Permissions needs to be listed in app manifest• There are only certified app APIs: WebSMS, WebTelephony,
Idle, etc.
Web API Security levels
• Granted by default
Safe web APIs that don't expose privacy sensitive data. WebGL, fullscreen, etc.
• Granted by user
location, camera, file system access
• Granted when installed
No quota for localStorage, IndexedDB, offline cache
• Granted by authorized store
Privacy and security sensitive APIs such as Contacts API
• Verified by signature
Highly privileged APIs such as radio access (dialer)
Web activities
Share, pick an image, etc.
Delegating a task to another app
Register in app manifest or dynamically
Web API examples
Lets rock with HTML5 & CSS3
+
Responsive design
• There are lot of screen resolutions out there, and there will be more!
• CSS3 media queries
• device-pixel-ratio
• Don't be shy to create a landscape layout with orientation media
queries
Single page application
• Based on JavaScript framework
• Navigation should be handled with History API
• Views will be rendered from JavaScript templates,
or AJAX request html responses
• Routing is handled on client side
Data handling on client side
• IndexedDB
o Asnyc, transactional, noSQL
o asks for permission over ~50MB
• Application cache: Cache / Network / fallback (~5 MB /
origin)
• LocalStorage - Permanent ( ~5 MB / Origin )
• SessionStorage - Session only ( System memory )
• Cookies - Not modifiable (~4KB / origin)
A quick and common example(Basic todo application)
Quick Layout / Flow example
Performance tips• Use HTML comments to keep DOM node values in the memory
• Use worker thread for background jobs
• Feel the GPU's power, use transforms & animations
• Use lazy load to speed up startups
• visibilitychange event is our friend
• The common one: Avoid unnecessary reflow / repaint
• Do not load every script at startup
• Every frontend performance tip could be listed here too
Debugging - Firefox Developer Tools
• Responsive design Mode
• Remote debugging
• Web inspector
Debugging - Firefox OS simulator
Share our applications with the world!
• For hosted applications just provide an url with a valid app
manifest
• Packaged applications should be uploaded to the marketplace
• To update your application just upload a new manifest, or upload
a new zip containing the new version
• Firefox OS phone polls for app changes once per a day
Thanks!Special thanks to David Walsh and Christian Heilmann for the review