15. Reuse any existing web site/app or develop from scratch
with open web standards.
Utilize HTML5 features such as localStorage, oļ¬ine
manifest, IndexedDB and access Web APIs for more options.
Responsive web design for adapting to varying resolutions
and screen orientation.
21. Apache - in mime.types:
application/x-web-app-manifest+json webapp
Apache - in .htaccess:
AddType application/x-web-app-manifest+json webapp
NGinx - in mime.types:
types {
text/html html htm shtml;
text/css css;
text/xml xml;
application/x-web-app-manifest+json webapp;
}
22. IIS:
In IIS Manager, right-click the local
computer, and click Properties.
Click the MIME Types button.
Click New.
In the Extension box, type the ļ¬le name
extension.
In the MIME type box, type a description
that exactly matches the ļ¬le type deļ¬ned
on the computer.
Click OK.
35. Web Content
Regular web content
Installed Web App
A regular web app
Privileged Web App
More access, more responsibility
Certiļ¬ed Web App
Device-critical applications
39. Vibration API (W3C)
Screen Orientation
Geolocation API
Mouse Lock API (W3C)
Open WebApps
Network Information API (W3C)
Battery Status API (W3C)
Alarm API
Web Activities
Push Notiļ¬cations API
WebFM API
WebPayment
IndexedDB (W3C)
Ambient light sensor
Proximity sensor
Notiļ¬cation
REGULAR APIS
60. window.addEventListener("deviceproximity", function (event) {
// Current device proximity, in centimeters
console.log(event.value);
// The maximum sensing distance the sensor is
// able to report, in centimeters
console.log(event.max);
// The minimum sensing distance the sensor is
// able to report, in centimeters
console.log(event.min);
});
68. var storage = navigator.getDeviceStorage("videos"),
cursor = storage.enumerate();
cursor.onerror = function() {
console.error("Error in DeviceStorage.enumerate()", cursor.error.name);
};
cursor.onsuccess = function() {
if (!cursor.result)
return;
var file = cursor.result;
// If this isn't a video, skip it
if (file.type.substring(0, 6) !== "video/") {
cursor.continue();
return;
}
// If it isn't playable, skip it
var testplayer = document.createElement("video");
if (!testplayer.canPlayType(file.type)) {
cursor.continue();
return;
}
};
70. var contact = new mozContact();
contact.init({name: "Tom"});
var request = navigator.mozContacts.save(contact);
request.onsuccess = function() {
console.log("Success");
};
request.onerror = function() {
console.log("Error")
};
71. WebTelephony
WebSMS
Idle API
Settings API
Power Management API
Mobile Connection API
WiFi Information API
WebBluetooth
Permissions API
Network Stats API
Camera API
Time/Clock API
Attention screen
Voicemail
CERTIFIED APIS
73. // Telephony object
var tel = navigator.mozTelephony;
// Check if the phone is muted (read/write property)
console.log(tel.muted);
// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);
74. // Place a call
var cal = tel.dial(ā123456789ā);
75. // Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;
// Get the number of the incoming call
console.log(incomingCall.number);
// Answer the call
incomingCall.answer();
};
// Disconnect a call
call.hangUp();
// Iterating over calls, and taking action depending on their
changed status
tel.oncallschanged = function (event) {
tel.calls.forEach(function (call) {
// Log the state of each call
console.log(call.state);
});
};
89. Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API
97. // assume that toggleButton and flipBox are already
// defined as their respective DOM elements
toggleButton.addEventListener("click", function(){
flipBox.toggle();
});
