Thursday, 23 April 2020

API TRAINING

ch-1 api development configure jwt
1.<?php
echo "success";
?>
=>index.php
$(document).ready(function(){
$.ajax({
type:"POST",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});


2.<?php

header("Access-Control-Allow-Origin:*");

echo "success";

?>

=>index.php
$(document).ready(function(){
$.ajax({
type:"POST",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});

3.<?php
header("Access-Control-Allow-Origin:*");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
echo "success";
}
else{
echo "Access denied";
}
?>
=>index.php
$(document).ready(function(){
$.ajax({
type:"POST",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});
=>index.php
$(document).ready(function(){
 $.ajax({
 type:"GET",
 url:"http://adsewap.com/api/index.php", 
success:function(response) 
{ 
console.log(response);
}
});
});

4.<?php
header("Access-Control-Allow-Origin:*");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
echo "success";
}
else{
http_response_code(401);
echo "Access denied";
}
?>
=>index.php
$(document).ready(function(){
$.ajax({
type:"POST",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});

5.<?php
header("Access-Control-Allow-Origin:*");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
echo "success";
}
else{
http_response_code(401);
echo "Access denied";
}
?>
=>index.php
$(document).ready(function(){
$.ajax({
type:"GET",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});

6.<?php
header("Access-Control-Allow-Origin:*");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
http_response_code(200);
echo "success";
}
else{
http_response_code(401);
echo "Access denied";
}
?>
=>index.php
<script>
$(document).ready(function(){
$.ajax({
type:"GET",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});

7.<?php
header("Access-Control-Allow-Origin:*");
require_once("jwt.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
http_response_code(200)
$data= "success";
$final=JWT::encode($data,"12345");
echo json_encode(array("response"=>$final));
}
else{
http_response_code(401);
echo "Access denied";
}
?>
=>index.php
$(document).ready(function(){
$.ajax({
type:"POST",
url:"http://adsewap.com/api/index.php",
success:function(response)
{
console.log(response);
}
});
});

8.C:\Users\toufi>composer

9.C:\Users\toufi>cd.. C:\Users>cd.. C:\>cd wamp C:\wamp>cd www C:\wamp\www>cd api_project C:\wamp\www\api_project>composer require firebase/php-jwt


ch-3 api development ajax response
1.<?php
header('Content-Type:application/json');
echo "success";
?>

2.<?php
header('Content-Type:application/json');
echo json_encode(array("data"=>"saurav"));
?>

3.<?php
echo json_encode(array("data"=>"saurav"));
?>

4.<?php
echo json_encode(array("data"=>"saurav"));
echo "saurav";
?>

5.<?php
header('Allow-Control-Allow-Origin:*');
class main{
private $x="saurav";
function demo(){
echo $this->x;
}
}
$d=new main();
$d->demo();
?>

6.<?php
header('Allow-Control-Allow-Origin:*');
class main{
private static $x="saurav";
static function demo(){
echo self::$x;
}
}
$d=new main();
$d->demo();
?>

CH-1 GOOGLE API CLIENT AUTHENTICATION
1.C:\Users\toufi>cd..

C:\Users>cd..

C:\>cd wamp/www/google_api/login_with_google

C:\wamp\www\google_api\login_with_google>composer require google/apiclient:^2.0

2.
=>setup.php
<?php
require_once('vendor/autoload.php');

$google=new Google_Client();

$google->setClientId('98158025683-ehi3hn4kk4e5gf3pmdnajo1i3ctqdlll.apps.googleusercontent.com');

$google->setClientSecret('1VXF7XbOKpmMAV94nXMlNbou');

$google->setRedirectUri('http://localhost/google_api/login_with_google/profile.php');

$google->addScope('email');

$google->addScope('profile');

session_start();

?>

=>index.php
<?php
require_once('setup.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body class="py-5">
<center>
<div class="btn-group border shadow-sm">
<button class="btn bg-white">
<img src="google.png" width="40">
</button> 
<button class="btn btn-light">
<a href="<?php echo $google->createAuthUrl();?>">SIGN IN WITH GOOGLE</a>
</button>
</div>
</center>
</body>

=>profile.php
<?php
error_reporting(0);

require_once('setup.php');

if(isset($_GET['code']))
{

$token=$google->fetchAccessTokenWithAuthCode($_GET['code']);

$_SESSION['token']=$token;

if(!isset($token['error']))
{
$google->setAccessToken($token['access_token']);

$service=new Google_Service_Oauth2($google);

$data=$service->userinfo->get();

$_SESSION['name']=$data['name'];
$_SESSION['src']=$data['picture'];
$_SESSION['email']=$data['email'];
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>picdrive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="container">
<div class="card" style="width:400px;margin:80px auto">
<img src="<?php echo $_SESSION['src'];?>" class="card-img-top" style="width:100%">
<div class="card-body">
<h4 class="card-title"><?php echo $_SESSION['name'];?></h4>
<span><?php echo $_SESSION['email'];?></span>
<br>
<a href="logout.php" class="btn btn-primary">Logout</a>
</div>
</div>
</div>
</body>

=>logout.php
<?php
require_once("setup.php");

$google->revokeToken($_SESSION['token']);

session_destroy();

header('Location:index.php');
?>

ch-2 google api business chart
1.
=>index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>picdrive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="area_chart.js"></script>
  <script src="category_chart.js"></script>
  <script src="column_chart.js"></script>
  <script src="geo_chart.js"></script>
</head>
<body>
<div class="container-fluid p-5">
<h4 class="mb-5">Google Charts For Business</h4>
<div class="row">
<div class="col-md-6">
<div class="jumbotron rounded-0 shadow-sm border bg-white w-100" style="height:500px" id="chart_div">
</div>
<button class="btn btn-light border shadow-sm p-3 font-weight export-btn">EXPORT TO PNG</button>
</div>
<div class="col-md-6">
<div class="jumbotron rounded-0 shadow-sm border bg-white" id="cat_name">
</div>
</div>

<div class="col-md-6">
<div class="jumbotron rounded-0 shadow-sm border bg-white" id="column_name">
</div>
</div>

<div class="col-md-6">
<div class="jumbotron rounded-0 shadow-sm border bg-white" id="geo_name">
</div>
</div>
</body>

=>area_chart.js
$(document).ready(function(){
 $.ajax({
 type:"POST",
 url:"data.php",
 success:function(response)
 {
var all_data=JSON.parse(response);
result(all_data);
 }  
 }); 
});


function result(all_data)
{
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var d=new google.visualization.DataTable();
d.addColumn('string','year');
d.addColumn('number','sales');
d.addColumn('number','profit');
d.addColumn('number','expenses');

for(i=0;i<all_data.length;i++)
{
 var year=all_data[i].year;
 var sales=Number(all_data[i].sales);
 var profit=Number(all_data[i].profit);
 var expenses=Number(all_data[i].expenses);
d.addRows([

[year,sales,profit,expenses]

]);

}


var options = {
title: 'Business report',
titleTextStyle:{color:'red',fontSize:40},
hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0,title:'Testing'},
pointSize:30,
pointShape:'star',
lineWidth:5,
legend:'none',
orientation:'vertical',
series:{
0:{color:'red'},
1:{color:'green'},
2:{color:'blue'}  
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart,'ready',function(){
$(".export-btn").click(function(){
 var a=document.createElement("a");
 a.href=chart.getImageURI();
 a.download='export.png'; 
 a.click();
});  
});
chart.draw(d, options);
}
}

=>data.php
<?php

$all_data=[];

$db=new mysqli("localhost","root","","api");

$q="SELECT * FROM business";

$response=$db->query($q);

while($data=$response->fetch_assoc())
{
array_push($all_data, $data);
}

echo json_encode($all_data);
?>

CH-3 GOOGLE API CATEGORY AND COLUMN CHART

1.
=>category_chart.js
$(document).ready(function(){
$.ajax({
 type:'POST',
 url:'cat.php',
 success:function(response)
 {
 var all_data=JSON.parse(response);
 data(all_data); 
 } 
});  
});

function data(all_data){
 var i; 
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();

data.addColumn('string','access_name');
data.addColumn('string','text');

for(i=0;i<all_data.length;i++)
{
if(all_data[i].cat_name != 'null') 
{ 
data.addRows([
[{v:all_data[i].v,f:all_data[i].f+"<div style='color:red'>Testing</div>"},all_data[i].cat_name]

]);
}

else{
data.addRows([
[{v:all_data[i].v,f:all_data[i].f},null]

]);
}  
}

// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('cat_name'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
google.visualization.events.addListener(chart,'select',function(){
window.location="https://wapinstitute.com";
});
chart.draw(data, {'allowHtml':true,'color':'red','allowCollapse':true,'selectionColor':'yellow'});
}

}

/*
data.addRows([
[{v:'mobile_category',f:'Mobile'},null],
[{v:'computer_category',f:'Computer'},null],
[{v:'nokia',f:'Nokia'},'mobile_category'],
[{v:'samsung',f:'Samsung'},'mobile_category'],
[{v:'nokia-1',f:'Nokia 1'},'nokia'],
[{v:'nokia-2',f:'Nokia 2'},'nokia'],
[{v:'nokia-3',f:'Nokia 3'},'nokia'],
[{v:'samsung-1',f:'Samsung 1'},'samsung'],
[{v:'samsung-2',f:'Samsung 2'},'samsung'],
[{v:'samsung-3',f:'Samsung 3'},'samsung'],

]);
*/

=>column_chart.js
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data=new google.visualization.DataTable();
data.addColumn('string','year');
data.addColumn('number','profit');

data.addRows([
  ['2016',20000],
  ['2017',40000],
  ['2018',60000]
  ]);

var options = {
chart: {
title: 'Business profit',
subtitle: 'profit from 2016 to 2017',
}
};
var chart = new google.charts.Bar(document.getElementById('column_name'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}

CH-4 GOOGLE API MAPS
1.
=>geo_chart.js
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBmSDq7ATBSCeQfvllK-7tBR0OVyaKcWY4'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data =new google.visualization.DataTable();

data.addColumn('string','states');
data.addColumn('number','Branches');

data.addRows([
['Bihar',20000],
['Uttar Pradesh',50000]
  ]); 


var options = {
region:'IN',
resolution:'provinces',
colors:['red','yellow'],
datalessRegionColor:'black',
tooltip:{textStyle:{color:'red',bold:true,italic:true,fontName:'calibri'}},
legend:{textStyle:{fontSize:20,bold:true}},

};
var chart = new google.visualization.GeoChart(document.getElementById('geo_name'));

google.visualization.events.addListener(chart,'select',function(){
var index= chart.getSelection(); 
alert(index[0].row);
});

chart.draw(data, options);
}

=>index.php
<body>
<div id="result" style="width:100%;height:600px">
</div>
<script>
function demo()
{
navigator.geolocation.getCurrentPosition(function(data){
var lat=data.coords.latitude;
var lng=data.coords.longitude;
var result=document.querySelector("#result");
var map=new google.maps.Map(result,{
center:{lat:lat,lng:lng},
zoom:10
});
});
}
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmSDq7ATBSCeQfvllK-7tBR0OVyaKcWY4&callback=demo">
</script>
</body>

CH-5 GOOGLE API DYNAMIC MAPS
1.
=>data.php
<?php

$all_data=[];

$db=new mysqli("localhost","root","","api");

$q="SELECT * FROM map";

$response=$db->query($q);

while($data=$response->fetch_assoc())
{
array_push($all_data, $data);
}

echo json_encode($all_data);
?>

=>index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<meta charset="UTF-8">
<title>map</title>
</head>
<body>
<div id="result" style="width:100%;height:600px">
</div>

<script>
function demo()
{
var result=document.querySelector("#result");
var json_data={
center:{lat:26.151582,lng:85.353609},
zoom:8,
//mapTypeId:'satellite'
mapTypeId:'hybrid'
}
var map=new google.maps.Map(result,json_data);
//map.setMapTypeId('hybrid');

$.ajax({
type:"POST",
url:"data.php",
success:function(response)
{
var all_data=JSON.parse(response);
var i;
for(i=0;i<all_data.length;i++)
{
var lat=Number(all_data[i].lat);
var lng=Number(all_data[i].lng);
var icon={url:all_data[i].icon,scaledSize:new google.maps.Size(50,50)};
var tooltip=all_data[i].tooltip;
multi(lat,lng,icon,tooltip);
}
}
});

function multi(lat,lng,icon,tooltip)
{
var marker=new google.maps.Marker({
position:{lat:lat,lng:lng},
map:map,
//icon:'marker.webp'
icon:icon,
draggable:true,
animation:google.maps.Animation.DROP

});

/*icon:{
url:'marker.webp',scaledSize:new google.maps.Size(150,150)
}*/

/*new google.maps.Marker({
position:{lat:40,lng:50},
map:map,
icon:'marker.webp'
});*/

var tooltip=new google.maps.InfoWindow({
/*content:"<img src='map.png' width='80'><br><h4>Wap Institute</h4>"*/
content:tooltip
});

marker.addListener('click',function(){
//window.location="https://www.google.co.in/"
//tooltip.open(map,marker);
if(marker.getAnimation() == null)
{
marker.setAnimation(google.maps.Animation.BOUNCE);
tooltip.open(map,marker);
}

else{
marker.setAnimation(null);
tooltip.open(null);
}
});

}
}
</script>

<button onclick="dynamic()">show map</button>
<script>
function dynamic(){
var script=document.createElement("SCRIPT");
script.src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmSDq7ATBSCeQfvllK-7tBR0OVyaKcWY4&callback=demo";
script.async=true;
script.defer=true;
document.body.append(script);
}
</script>
</body>

CH-6 GOOGLE API PLACES AND CHARTS

1.C:\Users\toufi>npm install electron -g

2.C:\Users\toufi>cd desktop/memory

C:\Users\toufi\Desktop\memory>npm init

3.C:\Users\toufi\Desktop\memory>electron .

4.<body>
<script>
var os=require('os');
console.log(os.totalmem()/1024/1024/1024);
</script>
</body>
</html>

5.C:\Users\toufi\Desktop\memory>npm install -D electron

6.C:\Users\toufi\Desktop\memory>npm install -D electron-builder

7.C:\Users\toufi\Desktop\memory>npm run dist

8.search_places.php
<body class="py-5">
<div class="container">
<h4>Google Map</h4>
<input type="search" name="search" placeholder="Enter places" class="form-control mb-4" id="search">
<div class="row">
<div class="col-md-12" id="result" style="height:500px">
</div>
</div>
</div>

<script>
function show_map()
{
var search=document.querySelector("#search");
var result=document.querySelector("#result");

var auto_search=new google.maps.places.Autocomplete(search,{
types:['geocode']
});

google.maps.event.addListener(auto_search,'place_changed',function(){
var place=auto_search.getPlace();
var lat=place.geometry.location.lat();
var lng=place.geometry.location.lng();
var map=new google.maps.Map(result,{
center:{lat:lat,lng:lng},
zoom:15
});
});
}
</script>
</body>

9.index.html
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var os=require('os');
var free_memory=os.freemem();
var total_momory=os.totalmem();
var used=total_momory-free_memory;
var m=(used*100)/total_momory;
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Used Memory', m],
]);
var options = {
width: 500, height: 500,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
setInterval(function(){drawChart()},5000);
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>

=>package.json
{
"name": "memory",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder  --ia32 --x64 -w"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^8.2.5",
"electron-builder": "^22.6.0"
},
"build": {
"appId": "com.wapinstitute.memory",
"productName": "Memory status",
"target": "NSIS",
"publish": null
}
}

10.index.html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
    var data=new google.visualization.DataTable();

    data.addColumn("string","name");
    data.addColumn("number","project");

    data.addRows([
      ["Ravi",40],
      ["Rahul",70],
      ["Chandan",90]


      ]);

    var options = {
    title: 'My Daily Activities'
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

CH-9 GOOGLE API DRIVE UI PART 1,2
1.<head>
<script src="index.js"></script>
</head>
<body>
<button id="btn">check ui</button>
<script src="https://www.google.com/jsapi"></script>
<script src="https://apis.google.com/js/client.js?onload=setup" async defer></script>
</body>

=>index.js
function setup(){
var ui=new FilePicker({
api_key:"AIzaSyBIt7Fu_EQoVe8xM22mz8R1OQbMMKkBBZs",
client_id:"26790787030-v503dn25ot7s389e2lv8ve8ra3nmf2h1.apps.googleusercontent.com",
button:document.querySelector("#btn"),
onClick:function(file){
ui_popup("https://drive.google.com/file/d/"+file.id+"/view","",1000,500);
}
});
}
function ui_popup(url,title,width,height)
{
}
window.onload=function(){
var left=(screen.width/2)-(1000/2);
var top=(screen.height/2)-(500/2);
window.open("https://wapinstitute.com","","width=1000,height=500,top="+top+",left="+left);
}

2.<head>
<script src="index.js"></script>
</head>
<body>
<button id="btn">check ui</button>
<button onclick="logout()">logout</button>
<script src="https://www.google.com/jsapi"></script>

<script src="https://apis.google.com/js/client.js?onload=setup" async defer></script>
</body>

=>index.js
function setup(){
var ui=new FilePicker({
api_key:"AIzaSyBIt7Fu_EQoVe8xM22mz8R1OQbMMKkBBZs",
client_id:"26790787030-v503dn25ot7s389e2lv8ve8ra3nmf2h1.apps.googleusercontent.com",
button:document.querySelector("#btn"),
onClick:function(file){
ui_popup("https://drive.google.com/file/d/"+file.id+"/view","",1000,500);
}
});
}

function ui_popup(url,title,width,height)
{
var left=(screen.width/2)-(width/2);
var top=(screen.height/2)-(height/2);
window.open(url,title,"width="+width+",height="+height+",top="+top+",left="+left);
}

function FilePicker(data)
{
this.api_key=data.api_key;
this.client_id=data.client_id;
this.button=data.button;
this.onClick=data.onClick;

//group properties
this.button.addEventListener('click',this.open.bind(this));

//this.button.disabled=true;

gapi.client.setApiKey(this.api_key);

gapi.client.load('drive','v2',this.DriveApiLoaded.bind(this));

gapi.load('picker','1',{callback:this.PickerApiLoaded.bind(this)});
}

FilePicker.prototype={
open:function(){
var token=gapi.auth.getToken();
if(token)
{
this.ShowPicker();
}

else{
this.DoAuth(false,function(){
this.ShowPicker();
    }.bind(this));
}

},

ShowPicker:function(){
var access_token=gapi.auth.getToken().access_token;

var doc_view=new google.picker.DocsView();

doc_view=doc_view.setIncludeFolders(true);

var upload_view=new google.picker.DocsUploadView();

upload_view=upload_view.setIncludeFolders(true);

this.picker=new google.picker.PickerBuilder();

this.picker=this.picker.addView(doc_view);

this.picker=this.picker.enableFeature(google.picker.Feature.MULTISELECT_ENABLE);

this.picker=this.picker.setAppId(this.client_id);

this.picker=this.picker.addView(upload_view);

this.picker=this.picker.setOAuthToken(access_token);

this.picker=this.picker.setCallback(this.PickerResponse.bind(this));

this.picker=this.picker.setTitle("Wap Institute").build();

this.picker.setVisible(true);
},

PickerResponse:function(data){
if(data[google.picker.Response.ACTION] == google.picker.Action.PICKED)
{
var file=data[google.picker.Response.DOCUMENTS][0];
var id=file[google.picker.Document.ID];
var request=gapi.client.drive.files.get({fileId :id});
this.ShowPicker();
request.execute(this.GetFileDetails.bind(this));
}
},

GetFileDetails:function(file){
if(this.onClick)
{
this.onClick(file);
}
},

PickerApiLoaded:function(){
this.button.disabled=false;
},

DriveApiLoaded:function(){
this.DoAuth(true);
},

DoAuth:function(quick,callback){
gapi.auth.authorize({
client_id:this.client_id,
scope:'https://www.googleapis.com/auth/drive',
immediate:quick,
},callback);
}
}

//logout

function logout(){
window.location="https://www.google.com/accounts/Logout";
}

ch-15 google api service worker

1.<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "82d77603-5de0-47b8-ab23-bbb547237e90",
});
});
</script>
</head>
<body>
<h1>welcome to website</h1>
</body>
</html>

2.<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/test.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="main.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron header">
<h1>ADSE WAP</h1>
<img src="images/b.jpg">
<br><br>
<button><a href="contact.html">Contact</a></button>
</div>
</div>
</body>
</html>

=>main.js
window.onload=function(){
var secured=new Worker("special.js");
secured.onmessage=function(event)
{
alert(event.data);
}
if(navigator.serviceWorker)
{
navigator.serviceWorker.register("service.js");
}

else{
document.write("please update your storage"); }
}

=>service.js
var key="data";
var store=[
'index.html',
'contact.html',
'js/test.js',
'images/b.jpg',
'css/style.css',
'main.js'
];

self.addEventListener('install',function(event){
event.waitUntil(
caches
.open(key)
.then(function(access_key){
access_key.addAll(store);
})
.then(function(){
self.skipWaiting()
})
);
});

self.addEventListener('fetch',function(event){
event.respondWith(fetch(event.request).catch(function(){
caches.match(event.request)
}));
})

=>special.js
var x=10;
var y=20;
var z=x+y;
postMessage(z);




                                           









at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)