Bir çok kişinin merak ettiği fakat yapamadığı şeyi anlatacağım. Google tarafından yayınlandı bilenleriniz vardır fakat bilmeyenlerin eminim çok işine yarayacak. Saçma sapan uygulamayı indir uyarılarından kurtulun!
Uygulamanız yok mu?
O zaman sitenizi ana ekrana eklettirin kendi web tabanlı uygulamanızı yapın!
Şimdi sırayla anlatacaklarımı uygulayarak sonucu bizimle paylaşabilirsiniz.
Öncelikle yapacağımız şey, Native Smart Banner App yani hali hazırla play store de yüklü olan uygulamanızı sitede tanıtmak ve indirilmesini sağlamak.
Örnek;
Aşağıda verdiğim kodu ilgili yerleri doldurup Manifest.json adında dosya oluşturun ve ilgili ana dizine atın. Uygulama ID yazmayı unutmayın.
{
"name": "Uygulama Adınız",
"description": "Uygulama Tanıtımı",
"short_name": "Uygulama Kısa İsmi",
"icons": [
{
"src:": "launcher-icon-3x.png",
"type:": "image/png",
"sizes:": "192x192"
}
],
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "com.uygulamaadiniz"
}
]
}
Daha sonra bu kodu kodundan önce ekleyiniz.
<script>
window.addEventListener('load', function() {
var outputElement = document.getElementById('output');
navigator.serviceWorker.register('sw.js', { scope: '/' })
.then(function(r) {
console.log('registered service worker');
})
.catch(function(whut) {
console.error('uh oh... ');
console.error(whut);
});
window.addEventListener('beforeinstallprompt', function(e) {
outputElement.textContent = 'beforeinstallprompt Event fired';
});
});
</script>
Şimdi bu dosyayı indirin ve içinde bulunan sw.js ve örnek iconları sunucunuza yükleyin
Dosya İndir
Hepsi bu kadar!
---------------------------------
Şimdi Web Home Screen'ı anlatacağım. Bu diğeriyle aynı sadece kod farklılığı var. Aynı şekilde indirdiğiniz dosyayı sunucunuza atın ve manifest.json dosyanızın içine aşağıda verdiğim kodu ekleyin.
Manifest.json
{
"short_name": "uygulama kısa adı",
"name": "uygulama adı",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "yönlendireceğiniz link veya site adı",
"display": "standalone",
"orientation": "portrait"
}
Sonuç:
Örnek:
