Progressive Web App Kullanımı

PWA (Progressive Web App) uygulaması ile ilgili son kullanıcılar için kısa bir bilgi paylaşmak isterim. Web sitesi yaparken masaüstü bilgisayar uyumu ile beraber sitenin tablet ve mobil cihazlar için uyumlu olma konusuna dikkat etmek gerekir. Bu konudaki örnek çalışmalarımızı “Tablet Görünümü” ve “Mobil Görünümü” örnek sayfalarından da detaylı inceleyebilirsiniz. Tasarım sırasında kullandığımız Section Seperator özelliği masaüstü bilgisayar ve notebooklarda güzel ve değişik bir görünüm verse de çoğu zaman mobil cihazlarda çok kötü bir görüntü oluşturuyor. Bu sebeple bu özelliği genelde 768px çözünürlük altında kapatmayı tercih ediyoruz. Bu mobil ve desktop arasındaki uyum sorunlarından sadece bir tanesi. İşte bu gibi sorunları ortadan kaldırmaya yardımcı olan ve mükemmel mobil uyumunu sağlayan PWA ile hem bilgisayarlarda hem de tablet ve cep telefonlarında sitenizi uygulama formatına dönüştürüyor. ve açıldığında internet tarayıcısında değil de bir uygulamada internet sitesini kullanmış oluyorsunuz. Teknik olarak bu özellik olan sitelerde nasıl çalıştığını kısaca göstereyim.

Önemli hatırlatma: Bu uygulama sadece Mobil cihazlar için Android işletim sisteminde ve Chrome internet tarayıcısını desteklemektedir. Windows ve MacOS işletim sistemlerinde sadece Chrome internet tarayıcısı olması yeterlidir. Diğer tarayıcılardan uygulamayı indiremezsiniz.

Mobil Platformlarda Site Uygulaması İndirme

Örnek olarak kendi web sitemizin adresinden konuyu anlatmaya çalışayım. telefonunuzdan ya da tabletinizden chrome internet tarayıcısını açın ve https://webstili.com adresine girin. açılan sayfada aşağıda resimde de görüldüğü gibi “WebStili uygulamasını Ana ekrana ekle” bilgi satırını göreceksiniz.

Yazıya tıkladığınız zaman bir pencere açılacak ve uygulamayı eklemeniz için tekrardan seçenek sunacak. “Ekle” yazısına tıkladığınızda uygulama yüklenmeye başlayacak. Bu işlem biraz uzun sürebiliyor. Bildirim ekranında yükleniyor yazsını görebilirsiniz.

Eğer adımları doğru yaptıysanız telefonunuzun ekranında sitenin logosunu ve adını uygulama ikonu olarak görebilirsiniz.

WebStili ikonuna tıkladığınızda web sitesinin sayfasını uygulama olarak göreceksiniz ve sayfa tam mobil uyumlu olarak çalışacaktır (… ki zaten sayfa mobil uyumlu 🙂 ) Sayfa açıldığında sayfanın altında ve üstünde herhangi bir telefon bildirimi veya home tuşu ikonları görünmemektedir.

Home tuşunu görmek isterseniz parmağınızı ekranın alt dışından içeri doğru sürüklemeniz yeterlidir. home tuşunu göreceksiniz.

Peki bu sistem son kullanıcının ne işine yarayacak? Sürekli ziyaret ettiği web sitesinin uygulamasını telefonuna kurduğunda tek hareketle o siteye erişmiş olacak. Mesela bir sigorta acentesinin sitesindeki hizmet çeşitliliğini ve sizin sigorta ihtiyacınızı göz önünde bulundurursak “hangi sitede görmüştüm” gibi soru cümlesi düşünmektense uygulamayı tıklayarak tek harekette erişim sağlamak mümkün. Masaüstü bilgisayarlar için olan uygulamayı daha sonra anlatacağım.