1. mainfest.json 파일 만들기
{
"background_color": "purple",
"description": "Shows random fox pictures. Hey, at least it isn't cats.",
"display": "fullscreen",
"icons": [
{
"src": "/add/imgs/icon-196x196.png",
"sizes": "196x196",
"type": "image/png"
}
],
"name": "On-site Marketting",
"short_name": "ifdo",
"start_url": "/index.apz"
}
2. Link 추가
<link rel="manifest" href="/manifest.json">
3. sw.js 파일 추가
self.addEventListener('install', function(e) {
});
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
4. javascript 태깅
<button class="add-button">Add to home screen</button>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/js/sw.js')
.then(function() { console.log('Service Worker Registered'); });
}
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.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;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.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;
});
});
});
참고..
naverapp 에서 추가
<a href="naversearchapp://addshortcut?url=http%3A%2F%2Fm.nstore.naver.com&icon=http%3A%2F%2Fstatic.naver.net%2Fwww%2Fu%2F2012%2F0604%2Fnmms_153256734.png&title=N%EC%8A%A4%ED%86%A0%EC%96%B4&serviceCode=nstore&version=7">add home screen</a>
https://developers.naver.com/docs/utils/mobileapp/
댓글