Introduction to webshare API (navigator.share)

-

navigator.share is a JavaScript API providing a sharing interface similar to native apps

webshare API is supported on most updated mobile browsers Including Google chrome for Android

Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function.

For a webshare request to succeed you must supply at lest one of the parameters

navigator.share returns a Promise upon being called "upon

navigator.share({
    "url": document.location,
    "text": "I'm an example",
    "title": document.title
})
.then(resp => console.info("Successfully shared"))
.catch(errors => console.error(errors))

Comments

Post a Comment

Popular posts from this blog

Ways of iterating Object properties in JavaScript

-
For Objects the ways of iterating their properties are not that plentiful as with Arrays. take for instance we have an object of dogs and cat characteristics const pets = { {name: " Jenny ", eyes: "brown"}, {name: "max", eyes: "blue"} } To iterate through the characteristics using for loop for (pet in pets) {     console.log(`${pets[pet].name} has eye color ${pets[pet].eyes}`} } Alternatively you can use objects.keys and object. entries for (element in Object.entries(elements)) }
Read more

JavaScript intro to classes

-
Classes are objects 'functions which introduce inheritance parent child relationship in JavaScript it promotes code reusability which reduces the amount of code in a JavaScript application. JavaScript class decelerations start with keyword class proceeded by class name with a class body having a constructor along with methods for instance class human {     constructor(name) {          this.name = name;          this.gender = null;     }     great() {         return "Greetings " +         (this.gender == "male") ? "mr " : "mrs " + this.name     } } Child classes are created by adding the keyword extends followed by the parent class name and parent class methods can be called using the syntax super.+"method name"(parameters) class man extends human {   ...
Read more

How to make a html5 breakout game in JavaScript

-
In this tutorial i will walk through the  process of developing a simple breakout game in JavaScript using html5 canvas I'll be using craters.js a compact html5 game engine. in every step i will first explain the procedure in a less technical method later I'll include the snippets of the actual game , a link to the github repository and a live working demo. Game world is 2d space with zero friction and zero gravity in order to avoid applying acceleration to the entities periodically maybe this will be changed later. First entity is a ball an entity with zero friction that upon colliding with an obstacle such as a block, paddle or the the screen boundaries bounces back in the opposite direction the bouncing from left to the right side of the screen is implemented by if(position.x  + radius < 0) // bounce if(velocity > 0) return; // moving velocity *= -1; // change direction direction is only changed if the ball tries to move  beyond the zero position. i have t...
Read more

How to resume a suspended web audio api context

-
A quick JavaScript function to maneuver around Google chrome, Firefox and safari web audio context suspension state Starting from chrome v{xx} Google chrome, Mozilla Firefox and Apple safari web browsers automatically suspend html5 web audio contexts if they start without any user gesture they can only be resumed by a user gesture it's a measure implemented to improve overall user experience. context.state property stores the state of the audio context when it's suspended it's value changes to "suspended". in order to implant a maneuver first check the state of the context should it be suspended literate an array of events for each add an event listener on the document body and remove the event if one of the events has been triggered by the user let unlockAudio = function(context) {     if (context.state === 'suspended') {         let events = ['touchstart', 'touchend', 'mousedown', 'keydown']         let unlock = function(...
Read more

Animated daylight on HTML5 Canvas

-
Image
It's Fourth day and i made improvements by adding new background Obstacle for daylight notice the wind turbines replacing trees, the sun replacing the moon and the disappearance of stars from the Sky. However it's more like day three extended++ (plus plus) trust me i've added nothing new i spent most of the time sketching introduction screens and gameover screens Here's progress so far.
Read more