Google Chrome'da 'Ana Ekrana Ekle' Popup Kodu

Android cihazda Chrome kullanarak ziyaret ettiğiniz web sitelerinde önünüze çıkan “Ana Ekrana Ekle” popup kodunu sizlerle paylaşıyorum. Bunun çalışması için sitenizin https olması gerekir.

UYARI BURADA YAPACAĞIN İŞLEMLER ÇALIŞMAYACAKTIR!
YENİ YAZIYA GÖZ ATMAK İÇİ TIKLAYIN.

Linke tıklayın ve sizin için hazırlamış olduğum dosyaları indirin.

1. Adım Logo Düzenleme

İndirmiş olduğunuz klasör içinde yer alan ve aşağıda listelemiş olduğum logoları kendi logonuzla değiştirin.

launcher-icon-0-75x.png
launcher-icon-1x.png
launcher-icon-1-5x.png
launcher-icon-2x.png
launcher-icon-3x.png
launcher-icon-4x.png

2. Adım manifest.json Dosyasını Düzenleme

name, short_name, start_url, theme_color ve background_color içeriklerini düzenleyin.

{
  "name": "Örnek Popup Uygulaması",
  "short_name": "Örnek Popup",
  "icons": [
    {
      "src": "launcher-icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "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": "https://ahmetcadirci.com/?utm_source=webapp",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait"
}

3. Adım manifest.json ve serviceWorker.js Dosyasını Çağırma

Web sayfanızda yer alan <head> etiketleri arasına aşağıdaki kodu yapıştırın.

<link rel="manifest" href="manifest.json">
<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>

Index dosyasının son hali bu şekilde olmalıdır.

4. Adım Test

Şu anda Chrome, yalnızca bir kullanıcı sitenizi en az iki kez ziyaret ederse ve en az 5 dakika ayrılmışsa, afişi otomatik olarak gösterecek şekilde ayarlanmıştır. Birisi, Popupu yok sayarsa, Chrome’daki tarama verilerini silmedikçe tekrar gösterilmez.

Web siteyi ziyaret ettiğinizde çıkan popup

Ana ekrana eklendikten sonra açılış ekranı

Popupu test etmek için kullanışlı araçlar:

Adım Android cihazından Google Chrome’mu açın ve web sitenizi ziyaret edin. Eğer yukarıdaki gibi ekran görüntüsü ile karşılaşıyorsanız doğru bir işlem gerçekleştirmişsinizdir.
Popup çalışmıyorsa URL’nizi manifest.json doğrulayıcıda test edin: https://manifesttester.com/
Popup çalışmıyorsa Chrome’daki kullanıcı Geliştirici araçlarını inceleyin ve Uygulamalar sekmesine bakın. Hizmetler ve Manifest’i kontrol edin, aşağıdaki gibi görünmelidir.

5. Dosyalar

Bibliyografya:

Increasing Engagement with Web App Install Banners. 06 ‎Mayıs ‎2017. https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
samples/service-worker.js at gh-pages · GoogleChrome/samples. 06 ‎Mayıs ‎2017. https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js
samples/index.html at gh-pages · GoogleChrome/samples. 06 Mayıs ‎2017. https://github.com/GoogleChrome/samples/blob/gh-pages/app-install-banner/basic-banner/index.html
Installable Web Apps with the Web App Manifest in Chrome for Android. 06 Mayıs ‎2017. https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android

Google Chrome’da ‘Ana Ekrana Ekle’ Popup Kodu