«
»

Add to Home Screen a Website on Mobile Step By Step

Here this blog all about how to add to home screen a icon of a website on your mobile. Now this kind of features are trending. user don’t want to search your favorite website in google  again and again. Many of the developers are  need this type of functionality. Here I will explain you very simple which you can do within 2 min of work. only 3 simple step you can implement this functionality in your website.



Step-1:

Index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<title>Free Online Test | Add to home screen on Mobile</title>
<link rel="icon" href="imgs/icon512.png" type="image/png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
<link rel="manifest" href="manifest.json">
<style type="text/css">
.add-to {
background-color: #E02D44;
width: 30%;
}
.add-to-btn {
background-color: #E02D44;
color: white;
border: none;
outline:none;
font-weight: bold;
width: 100%;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Add to home screen feature on Your Mobile</h1>
<hr>
<center>
<div class="add-to">
<button class="add-to-btn">Add to home screen</button>
</div>
 
</center>
</div>
<div style="position: fixed; bottom: 10px; right: 10px; color: green;">
<strong>
Free Online Test
</strong>
</div>
<script type="text/javascript">
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
 
let deferredPrompt;
var div = document.querySelector('.add-to');
var button = document.querySelector('.add-to-btn');
div.style.display = 'none';
 
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
div.style.display = 'block';
 
button.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
div.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
 
</script>
</body>
</html>

Step-2:

Add manifest.json files in your root folder of the project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"short_name": "Demo App",
"name": "Web Demo App",
"icons": [
{
"src": "imgs/icon192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "imgs/icon512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "http://localhost/Demo/",
"background_color": "#3367D6",
"display": "standalone",
"theme_color": "#3367D6"
}

Step-3:

Now final step you need to add sw.js in your root folder.

1
self.addEventListener('fetch', function(event) {});

create a sw.js file and place this single line of code.



Note: Image file and size must be same as manifest.json else it will show error.

You can download all zip file by   click here

If you have any doubt, please comment / contact us so that we can help you out.



 

Tags:
«
»