Sitenize PWA Desteği Ekleyin

Prototürk'de sol tarafta "Uygulamayı Yükle" diye bir buton olduğunu fark etmişsinizdir. Buna tıklayınca sağ üstte yükleme ile ilgili bir alan açılıyor ve isterseniz pwa uygulaması olarak masaüstü ya da mobilden yükleyebiliyorsunuz.

Elbette mobilde android cihazlarda sorunsız çalışıyor ancak ios'larda safariden "ana ekrana ekle" diyerek ekletebiliyorsunuz, şimdilik ona bir güncelleme gelmedi.

PWA uygulanabilmesi için SSL sertifikanız olması gerekiyor yani https olması gerek sitenizin. Yazılım dilinin vs. hiçbir önemi yok, aşağıdaki basit adımları takip ederek PWA desteği getirebilirsiniz.

Adım 1 - manifest.json

İlk olarak manifest.json adında bir dosya oluşturun ve içine şunları yazın.


{
  "name": "prototurk.com",
  "short_name": "prototurk",
  "icons": [
    {
      "src": "/pwa/img/36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#1f1f1f",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

Adım 2 - `<head>` Kodları

<head> içinde oluşturduğumuz manifest.json dosyasını çağıralım ve ipad, iphone desteği için birkaç etiket daha ekleyelim.

<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="prototurk.com">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="/pwa/img/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/pwa/img/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/pwa/img/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" sizes="128x128" href="/pwa/img/128x128.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="/pwa/img/128x128.png">
<link rel="icon" sizes="192x192" href="/pwa/img/192x192.png">
<link rel="icon" sizes="128x128" href="/pwa/img/128x128.png">

Editörde Görüntüle

Adım 3 - service-worker

Aslında yukarıdaki adımları yaptığınızda eğer mobilden "ana ekrana ekle" derseniz splash screen ve iconuyla birlikte uygulama gibi yüklediğini görebilirsiniz.

Ancak web tarafında sağ üstte yükleme kısmının çıkması için bir service worker tanımlamamız gerekiyor. sw.js adında bir dosya oluşturun ve içine şunları yazın;

self.addEventListener('install', e => console.log('pwa installed.'));
self.addEventListener('fetch', event => {}); // şimdilik bir şey yapmaya gerek yok

ve bu dosyayı <head> içinde çağırın

<head>
    ..
    <script>
        if ('serviceWorker' in navigator) {
        	window.addEventListener('load', function () {
        		navigator.serviceWorker.register('/sw.js?v=3');
        	});
        }
    </script>
    ..
</head>

Editörde Görüntüle

Evet artık sağ üstte yükleme kısmının geldiğini görebilirsiniz. Şimdide bir buton aracılığı ile bunu açtırmayı görelim.

Adım 4 - Uygulamayı Yükle butonu

window altında beforeinstallprompt event'ını dinleyerek bunu yapabiliriz. Örneğin bir buton koyalım ve bu event geldiğinde o butonu göstererek işlem yaptıralım.


<button id="install-app" style="display: none">Uygulamayı Yükle</button>
<script>
    const installButton = document.getElementById('install-app');
    let beforeInstallPromptEvent
    window.addEventListener("beforeinstallprompt", function(e) {
        e.preventDefault();
        beforeInstallPromptEvent = e
        installButton.style.display = 'block'
        installButton.addEventListener("click", function() {
            e.prompt();
        });
        installButton.hidden = false;
    });
    installButton.addEventListener("click", function() {
        beforeInstallPromptEvent.prompt();
    });
</script>

Editörde Görüntüle

PWA ile ilgili kaynaklar

https://web.dev/progressive-web-apps/
https://web.dev/app-like-pwas/
https://web.dev/add-manifest/
https://developer.mozilla.org/en-US/docs/Web/Manifest/orientation