Progressive Web App olarak adlandırılan PWA, web sitelerinin mobil veya masaüstü uygulaması gibi çalışmasını sağlamaktadır. Eğer web sitemizde PWA desteği varsa herhangi bir mobil uygulamaya ihtiyaç duymadan, mobil veya masaüstü uygulaması olarak kullanabiliriz.
- Mobil web sitesinin açılışından daha hızlı açılır.
- Uygulama güncellendiği anda mobil cihazlarda da senkronize şekilde güncellenir ve diğer uygulamalara göre daha kısa sürede yüklenir.
- Uygulama içeriğine göre çevrimdışı kullanım da mevcut.
- PWA oluşturmak için herhangi kütüphane veya framework kullanmamıza gerek yok. Ancak bu yazı içerisinde Vue ile PWA kurulumu yapıyor olacağız. Kurulumu Vite üzerinden yapacağımız için, React, Svelte vb. kullanmanız da mümkün.
Proje Kurulumu
npm init vite@latest
Vite ile projeyi kuruyoruz.
Proje kuruldu. Şimdi de mobil cihazlarda gözükecek olan ikon dosyalarını oluşturalım. Bunun için web sitemizin logosu gerekiyor, buradaki adresten logoyu yükleyip convert edelim. Sonrasında hazırlanan dosyayı indirip projemiz içerisindeki public klasörü içerisine aktarıyor olacağız.
site.webmanifest içerisinde ise uygulamamızın ayarları bulunuyor. Bu kısımda kendi manifest dosyamızı oluşturup düzenliyor olacağız.
Kullanımı
npm i vite-plugin-pwa -D
Proje içerisine pwa paketini yükledikten sonra vite.config.js içerisinde manifest dosyasını gönderiyor olacağız.
Manifest Dosyası
Web sitemizin diğer cihazlarda nasıl görüneceği ile ilgili bilgileri aşağıdaki dosyada gönderiyoruz.
Oluşturmuş olduğumuz manifest.json dosyasını şimdi vite.config.js içerisinde import edelim.
Son olarak index.html içerisinde manifest dosyasına karşılık gelecek isimlendirmeleri yapalım.
Bu ayarları da yaptıktan sonra PWA uygulamamız artık hazır. Şimdi kontrol edebiliriz.
Demo linkine pc üzerinden gidecek olursanız, url sağ tarafında yükleme için bir ikon göreceksiniz. Bu ikona tıklandığında, web sitesini bilgisayarınıza yükleyip bir uygulama gibi kullanabilirsiniz.
Mobil uygulamalarımızda da benzeri işlemi uygulayarak kurulum yapabiliriz. Örneğin iPhone cihazlar için Demo sitesine göz atalım. Aşağıdaki ok butonuna bastığımızda çıkan menüden, Ana Ekrana ekle diyerek uygulamamızı mobil uygulama şeklinde kullanabiliriz.
Projeye buradaki linkten ulaşabilirsiniz.
