v2.5.1
Giri┼č yap

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">

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>

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>
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

tayfunerbilen
130 g├╝n ├Ânce yazd─▒ - 1898 kez g├Âr├╝nt├╝lendi.
├ľnceki Anlamsal Versiyonlama Sonraki CSS / Tailwind'e Giri┼č