Skip to content

Instantly share code, notes, and snippets.

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 -

A Pen by s.shivasurya on CodePen.


<div class="page-header">
<h1>HTML5 Javascript API <small> for enhanced Web App development - i-visionblog</small></h1>
<h4>Notification API - Notifies when new info arrives
<span class="label label-danger">Permission Required</span>
<span>Click the button and provide permission</span>
<br />
<button onclick="notify()" class="btn btn-sm btn-danger">Notify Me</button>
<h4>Location API - Gets Device Location INFO
<span class="label label-danger">Permission Required</span>
<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>
<h4>Offline access API - LocalStorage - JSON Strings</h4>
<span class="label label-success">No Permission Required</span>
<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>
<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>
Read the Github Gist - <a href="">link</a>
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>";
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 = "" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";
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() {
<script src="//"></script>
body {
margin: 40px;
background-color: #004040;
color: white;
<link href="//" 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.