Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 API - i-visionblog

HTML5 API - i-visionblog

Learning to use Rich HTML5 Javascript API for enhancing web apps - i-visionblog.com

A Pen by s.shivasurya on CodePen.

License.

<body>
<div class="page-header">
<h1>HTML5 Javascript API <small> for enhanced Web App development - i-visionblog</small></h1>
</div>
<h4>Notification API - Notifies when new info arrives
</h4>
<span class="label label-danger">Permission Required</span>
<hr>
<span>Click the button and provide permission</span>
<br />
<button onclick="notify()" class="btn btn-sm btn-danger">Notify Me</button>
<hr>
<h4>Location API - Gets Device Location INFO
</h4>
<span class="label label-danger">Permission Required</span>
<hr>
<span>This API shares the location of the Device to the Site</span>
<br />
<button onclick="shareLocation()" class="btn btn-sm btn-warning">Share location info</button>
<div id="out"></div>
<hr>
<h4>Offline access API - LocalStorage - JSON Strings</h4>
<span class="label label-success">No Permission Required</span>
<hr>
<span>This allows you to store values as String and can be easily created and retrieved since it uses key,pair values to process.</span>
<br /> name : Shivasurya
<br /> company : i-visionblog
<br />
<button onclick="localstore()" class="btn btn-sm btn-success">Store the Values</button>
<button onclick="retrieveStore()" class="btn btn-sm btn-info">Retrieve the value</button>
<hr>
<h4>Offline access API - Indexed Database</h4>
<span class="label label-success">No Permission Required</span><span class="label label-danger">Check for compatability</span>
<hr>
Read the Github Gist - <a href="https://github.com/SuyashMShepHertz/indexedDB_sample/blob/master/index.html">link</a>
<hr>
</body>
</html>
function notify() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
var notification = new Notification("Hi there!");
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
var notification = new Notification("Shiva has Messaged You!");
}
});
}
}
function shareLocation() {
var output = document.getElementById("out");
if (!navigator.geolocation) {
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}
function localstore() {
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
localStorage.setItem("name", "Shivasurya");
localStorage.setItem("company", "i-visionblog");
alert("saved the values");
} else {
// Sorry! No Web Storage support..
alert("Your Browser Doesnt Support Storage Feature");
}
}
function retrieveStore() {
alert(localStorage.getItem("company"));
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
body {
margin: 40px;
background-color: #004040;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.