PWA nedir? Vue ile PWA kurulumu

Vue JsYazılım

PWA nedir?

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.

PWA Özellikleri

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.

İkonlar

Public klasörü

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.

Manifest Dosyası

Oluşturmuş olduğumuz manifest.json dosyasını şimdi vite.config.js içerisinde import edelim.

Vite Config

Son olarak index.html içerisinde manifest dosyasına karşılık gelecek isimlendirmeleri yapalım.

index.html

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.

Masaüstü yükleyici

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.

IOS yükleyici

iPhone ekran görüntüsü

Projeye buradaki linkten ulaşabilirsiniz.

Daha fazla Vue Js

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi yazın.

Yeni
Sıcak Fırsatlar - İndirimli ve Kampanyalı Ürünler
Sosyal Medya
Instagram
YouTube
Instagram
YouTube
Bu yazıyı beğendin mi? Arkadaşlarınla paylaş!
Benzer İçerikler: