DEV Community

Uğurcan ÇETİN
Uğurcan ÇETİN

Posted on • Updated on

PWA Nedir? Nasıl Kurulur?

PWA
PWA Demo
İnternet sitemde, Aşağıda bahsettiğim PWA'dan Aynısı Mevcut;
PWA LightHouse
Ve sonuç :)


PWA Nedir?:
PWA yani Progressive Web Apps, güvenli bir ortamda web kullanıcılarının hem uygulama hem de web işlevlerini en iyi şekilde bir araya getirmelerine olanak tanıyan, yerel uygulama benzeri bir deneyim sunan ve gelişmiş teknolojileri barındıran bir web uygulamasıdır.

  • Uygulama gibidir çünkü; indirilebilir, uyarı ve bildirim gönderebilir ve internet bağlantısından bağımsız çalıştırılabilir.

  • Uygulama gibi değildir çünkü; responsive yapıda olup farklı cihazlarda çalışabilir, arama motorları tarafından içeriklerine ulaşılabilir ve arama sonuçlarında sunulabilir.

Neden PWA Teknolojisine İhtiyaç Duyuluyor?

  • Hızlı: PWA teknolojisi doğru uygulandığında hem ilk kullanıcı için hem de tekrar gelen kullanıcı için oldukça hızlı bir deneyim olanağı sunabiliyor.

  • Bağlantıdan Bağımsız: İnternetin az çektiği veya hiç olmadığı durumlarda dahi cache teknolojisi ile sitede gezinmeye ve kullanıcının site içerisinde içeriklere ulaşmasına olanak tanıyabiliyor.

  • Dönüşüm: Ana ekrana indirilebilmesi ve bildirim gönderebilmesi ile kullanıcı etkileşimini artırıp dönüşüm oranına olumlu etki edebiliyor.


    PWA Ne Sağlar? , PWA Nasıl Gözükür?


  • 1. İlk Olarak

    PWA Logoları ile başlayalım.
    Bana Tıkla Sonrasında Maskable Logomuzu Oluşturmak İçin Bir Siteye Yönlendirileceksin.
    O Kısımdan Resmini Yap. Sonra Export Butonuna bas ve sadece 192x192 Olarak resmini indir. Eğer 192x192 Seçilemiyorsa daha büyük bir görsel at ve tekrar exportla.
    ,
    Şimdi ise Asıl logoları yapalım.
    Bana tıkla Kırmızı bir renk ile * Yazılmış İşaretlenmiş kutucukları rastgele doldur ve 512x512 Boyutunda bir resim seç. Sonra Generate Manifest butonuna bas ve inen zip Dosyasını aç. İçerisindeki resimleri masaüstüne at. !*not: İnen zip dosyası içerisinde: icon-192x192.png icon-256x256.png icon-384x384.png icon-512x512.png dosyaları olmalıdır. Eğer yoksa SimiCart üzerindeki bir hatadan dolayı oluşturulamamıştır. Bu durumda Photoshop gibi yazılımlardan resminizin kalitesini bozmadan 300ppi 16bit srgb ayarları ile bu boyutlarda resimler oluşturmanız gerekmekte.

  • 2. Başlayalım

    manifest.webmanifest Dosyası oluştur ve içerisine,

{
  "short_name": "u7.wSite",
  "name": "uurcan7 Website",
  "description": "Ben Uğurcan, 14 Yaşındaki bir html geliştiricisiyim. Anime izlemeyi ve Site düzenlemeyi seviyorum.",
  "icons": [
    {
      "src": "https://uurcan7.sirv.com/icon-256x256.png?format=png",
      "type": "image/png",
      "sizes": "256x256",
      "purpose": "any"
    },
    {
      "src": "https://uurcan7.sirv.com/icon-384x384.png?format=png",
      "type": "image/png",
      "sizes": "384x384",
      "purpose": "any"
    },
    {
      "src": "https://uurcan7.sirv.com/icon-512x512.png?format=png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any"
    },
    {
      "src": "https://uurcan7.sirv.com/icon-192x192.png?format=png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "https://uurcan7.sirv.com/maskable_icon_x192.png?format=png",
      "type": "image/png", "sizes": "192x192", "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "background_color": "#FF6699",
  "theme_color": "#FF6699",
  "display": "minimal-ui",
    "shortcuts": [
    {
      "name": "u7.hanime Instagram Page",
      "short_name": "u7.hanime Instagram",
      "description": "u7.hanime Instagram Sayfası.",
      "url": "/u7hip.html",
      "icons": [{ "src": "https://uurcan7.sirv.com/instagram.png?format=png", "sizes": "512x512" }]
    },
    {
      "name": "u7.hanime Discord Server",
      "short_name": "u7.hanime Discord",
      "description": "u7.hanime Discord Sunucusu.",
      "url": "/u7hdcs.html",
      "icons": [{ "src": "https://uurcan7.sirv.com/discord.png?format=png", "sizes": "256x256" }]
    }
  ],
      "serviceworker": {
        "src": "https://uurcan7.xyz/sw.js",
        "update_via_cache": "none"
 }
}
Enter fullscreen mode Exit fullscreen mode

Kodlarını ekle.


  • # 3. Sonrasında Ana html dosyanın içerisinde ki head kodunun içine,
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="twitter:creator" content="@uurcan70">
    <meta name="author" content="Uğurcan uurcan7 ÇETİN, info@uurcan7.xyz">
    <meta name="theme-color" content="#FF6699">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="msapplication-navbutton-color" content="#FF6699">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="msapplication-starturl" content="/">
    <link rel="icon" type="image/png" sizes="192x192" href="https://uurcan7.sirv.com/icon-192x192.png?format=png">
    <link rel="apple-touch-icon" type="image/png" sizes="192x192" href="https://uurcan7.sirv.com/icon-192x192.png?format=png">
    <link rel="icon" type="image/png" sizes="256x256" href="https://uurcan7.sirv.com/icon-256x256.png?format=png">
    <link rel="apple-touch-icon" type="image/png" sizes="256x256" href="https://uurcan7.sirv.com/icon-256x256.png?format=png">
    <link rel="icon" type="image/png" sizes="384x384" href="https://uurcan7.sirv.com/icon-384x384.png?format=png">
    <link rel="apple-touch-icon" type="image/png" sizes="384x384" href="https://uurcan7.sirv.com/icon-384x384.png?format=png">
    <link rel="icon" type="image/png" sizes="512x512" href="https://uurcan7.sirv.com/icon-512x512.png?format=png">
    <link rel="apple-touch-icon" type="image/png" sizes="512x512" href="https://uurcan7.sirv.com/icon-512x512.png?format=png">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="manifest" href="https://uurcan7.xyz/manifest.webmanifest">
    <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js');
});
}
    </script>
Enter fullscreen mode Exit fullscreen mode

Kodlarını ekle.


  • # 4. Kritik konu! sw.js Oluştur ve içerisine gir,
self.addEventListener('install', function(event) {
  // Perform install steps
});
var CACHE_NAME = 'uurcan7o';
var urlsToCache = [
  '/'
];
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('');
        return cache.addAll(urlsToCache);
      })
  );
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });
            return response;
          }
        );
      })
    );
});
self.addEventListener('activate', function(event) {
  var cacheAllowlist = ['uurcan7.xyz', 'uurcan7o'];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheAllowlist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});
Enter fullscreen mode Exit fullscreen mode

Kodlarını Ekle.


  • # 5. Sonra, Bunları Sitenin Kaynak Klasörüne At. Kendine göre özelleştirmeyi unutma! Buraya kadar okuduysan teşekkür ederim <3 İyi kullanımlar. *not: sw.js içerisinde ki muhtemelen gözünüzden kaçan uurcan7.xyz kısmını sitenizin adresi ile, uurcan7o kısmını rastgele bir şekilde değiştirin.

UYARI: PWA'm API İçermez!
Demek istediğim, API'ler sw.js İçerisine entegre edilir. JavaScript bilgim olmadığı için yapamadım ne yazık ki.

PWA GitHub Rehberi PWA DEV.to Rehberi PWA u7.Blogsite Rehberi

Discussion (1)

Collapse
uurcan7 profile image
Uğurcan ÇETİN Author

Not: Gözünden kaçanlar için, sw.js İçerisinde uurcan7.xyz ve uurcan7o Kısımlarını
Öncelikle uurcan7.xyz=Sitenizin url'si ve uurcan7o kafanıza göre düzenlenebilir bir şekilde değiştirilir.