Mobilde gelecek: Progressive Web Apps - PWA

[Celalettin Penbe]

Halihazırda haberi olan veya kullananların affına sığınarak yeni karşılaştığım bir çözümü haber vermek istedim.

Çok iddialı gibi gelebilir ama 2015 yılında çıkmasına rağmen özellikle Türkiye'de hâlâ tam anlamıyla kullanılmadığını gözlemlediğim ve uygulama mağazalarının da sonunu getirecek Google'dan çağ atlatacak bir çözüm: Progressive Web Apps - PWA

Ana hatlarıyla kısaca özetleyecek olursam:

Neden ihtiyaç duyuldu?

• Yapılan araştırmalardan çıkan sonuçlar:
  
• Mobil cihazlarda masaüstü cihazlara göre 2 kat daha fazla zaman geçiriliyor
• Mobil cihazlarda %80 uygulama, %20 mobil web kullanılıyor
• Kullanılan bu uygulamaların sayısı çok az (yani insanlar sadece birkaç sosyal ağ, müzik, oyun, eğlence uygulaması kullanılıyor)
• Mobil web tekil ziyaretçi sayısı uygulamalara göre 2,2 kat daha fazla (yani insanlar araştırma için uygulama yerine genelde mobil web'e bakıyor)
• Aynı firmanın web sayfasıyla mobil uygulaması arasındaki uyumsuzluk ve iki tarafta da geliştirme yapma ihtiyacı
• Kullanıcılar istediğini elde etmek için web ve uygulama arasında sıklıkla geçiş yapıyor  
  
• Uygulamaların avantajları:
• Kullanım ve tasarım açısından ise mobile özel tasarlandığı için insanlar uygulamaları daha kolay buluyor
• Mobil uygulamaların mobil cihazlarda bulunabirliği ve görünürlüğü web'e göre daha kolay
• Uygulamaların daha hızlı çalıştığı düşünülüyor
• Uygulamaların dezavantajları:
• Bazen cihazda çok fazla yer kaplıyor, o yüzden insanlar sadece gerekli uygulamaları yüklüyor, tek seferlik şeyleri daha çok web'den kullanıyor
• Reklamlar can sıkıcı olabiliyor
• Mobil uygulamaları bir mağaza (google play, apple store) üzerinden sunma zorunluluğu var
• Mağazalardan uygulama yayınlamada inceleme süresi, güncelleme, mağaza komisyonu ve farklı platformlar için ayrı ayrı uygulama yazma gibi sorunlar var
• Özellikle eski cihazlarda çalışamayabiliyor
• Bazılarını satın almak yani kredi kartı bilgileri gerekiyor
• Mobil web sayfalarının avantajları:
• Kullanıcılar uygulama indirmeden aradığını bulabiliyor
• Daha kapsamlı bilgi içerdiği kanaati var
• Mobil web sayfalarının dezavantajları:
  
• Sürekli yeniden yüklenmesi
• Reklamlar can sıkıcı olabiliyor
  
• Telefonun ana ekranında uygulama gibi görünmediği için görünürlüğü ve bulunurluğu daha az
• Tasarımları her zaman mobile uygun olmayabildiği için gezinmesi zor

Nedir?

• İkisi bir arada çözüm: web'in hızıyla uygulamaların kullanışlılığını birleştiren mobil web'de uygulama deneyimi
  
• Ana ekrana uygulama gibi simge konulabiliyor ve doğrudan çalıştırabiliyor
  
• Daha hızlı çalışıyor
  
• İndirmek gerekmiyor
• Bir appstore'da yayınlamak ve güncellemek gerekmiyor
• Tüm platformlarda (mobil, bilgisayar, android, ios) aynı şekilde çalışıyor
  
• İnternet olmadan da çalışabiliyor
  
• Mobil cihazlarda kullanma kolaylığı
  
• Kullanıcıların belli bir yazılım ya da donanıma sahip olmasını beklenmiyor, cihaza göre çalıştıracağı özellikleri belirliyor
  
• Yeni veri olduğunda bildirim gönderilebilir
  
• Bir ürün/hizmeti satın almadan önce deneme imkanı
  
• Bağımsız serviceworker'lar ile çalışıyor
  

Neden "progresif"?

Temel çözüm web sitesi olarak sunuluyor, ilerledikçe veya kullanılan cihaza göre başka özellikler eklenebiliyor ve her platformda çalışıyor.

Tanıtım videosu: https://www.youtube.com/watch?v=KRSTpo6gqqU

Ürün sayfası: https://developers.google.com/web/progressive-web-apps

Örnek siteler/çalışmalar:

bmw.com, forbes.com, trivago.com

https://developers.google.com/web/showcase/

https://www.pwastats.com/

https://pwa.rocks/

Geliştirmede kullanılabilecek araçlar:

Checklist için Lighthouse: https://developers.google.com/web/tools/lighthouse/

(Chrome eklentisi: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)

JS Vaatleri: https://developers.google.com/web/fundamentals/primers/promises

ServiceWorker Cookbook: https://serviceworke.rs/

Microsoft'un açık kaynak PWA ServiceWorker oluşturucusu: https://www.pwabuilder.com/

PWA için kullanılabilecek JS kitaplıkları: https://developers.google.com/web/tools/workbox/

Happy coding  ¯\_(ツ)_/¯

[Akif Eyler]

Teşekkürler Celalettin, "Tam aradığım bu!" dedim, ama ilk deneme taşa çarptı, başarısız oldu.

Ikinci denemede yarısını (manifest & icons) yapabildim, şimdi Android'de web sayfalarım "app gibi" çalışıyor:

https://maeyler.github.io/JS/

Off-line çalışması ve desktop'ta da "app gibi" görünmesi için Service Worker gerekiyor, henüz bunu aşamadım

Bu haliyle bile JS dersinde anlatmaya değer... Değerli yorumlarınızı beklerim.

Fikir yeni değil, 2004'de AJAX vardı, Gmail'in başarısı büyük ölçüde oradan geliyor -- Yeni olan, Chrome'un bu şartları sağlayan sayfalara özel bir App statüsü vermesi... Ekteki tablet ekranında hepsinin Chrome altında çalıştığını görebilirsiniz. 

Yine Celalettin'den gelen şu kitabı herkesin okuması lazım: hem içerik doyurucu, hem de güzel bir PWA örneği

https://resilientwebdesign.com/   (tasarımdan çok web'in tarihçesi)

On Oct 28, 2018 1:11 AM, "Celalettin Penbe" 

Halihazırda haberi olan veya kullananların affına sığınarak yeni karşılaştığım bir çözümü haber vermek istedim.

Çok iddialı gibi gelebilir ama 2015 yılında çıkmasına rağmen özellikle Türkiye'de hâlâ tam anlamıyla kullanılmadığını gözlemlediğim ve uygulama mağazalarının da sonunu getirecek Google'dan çağ atlatacak bir çözüm: Progressive Web Apps.

 

[Celalettin Penbe]

Teşekkürler Celalettin, "Tam aradığım bu!" dedim, ama ilk deneme taşa çarptı, başarısız oldu.

Ikinci denemede yarısını (manifest & icons) yapabildim, şimdi Android'de web sayfalarım "app gibi" çalışıyor:

https://maeyler.github.io/JS/

Off-line çalışması ve desktop'ta da "app gibi" görünmesi için Service Worker gerekiyor, henüz bunu aşamadım

Rica ederim, işe yaramasına sevindim. Sanırım artık sayfalarınız tam olarak çalışıyor, hemen cebime uygulama olarak ekledim :)

                     

Hatta Gmail'de linki tıklayınca normal bir uygulama gibi uygulamada açma seçeneği sunuyor:

İşinize yarayacak bazı PWA ipuçlarını da bu sayfada bulabilirsiniz.

Bu arada, aslında Steve Jobs ilk iPhone'u tanıtırken asıl planın web uygulamaları çalıştırmak olduğunu belirtmiş ve 3. taraf uygulama fikrine pek sıcak bakmamış. Sonradan tabi devasa bir sektöre dönüştü, şimdi de bırakmak istemediği için henüz Safari'de PWA'ya tam destek yok.

Dolayısıyla şu anda şöyle bir durum var: Herkes telefonu için bir araç/uygulama vs. arayacağı zaman App Store'da veya Play Store'da arıyor.

Bu da web'deki PWA uygulamamızın bulunurluğunu azaltıyor, mağazalarda da bir şekilde bulunmak gerekiyor.

Apple bu işe pek sıcak bakmıyor, Google bir şekilde API'lerle entegrasyon sağlıyor, MS ise kendi mağazası çok rağbet görmediği için bu işe en çok destek verenlerden. Bir geliştiricinin, oluşturduğu bir PWA'yı 3 mağazada da yayınlama serüvenini anlatan bir yazı.

Ayrıca, Google'ın bu konuda değişik bir yaklaşımı mevcut: Chrome engine'dan yararlanan ve PWA gibi çalışan ama aynı zamanda Play Store'a da yüklenebilen TWA (Trusted Web Activies).

Microsoft ise, PWA geliştiricilere tam olarak "birinci sınıf vatandaş" muamelesi yapıyor :) Windows 10 için Microsoft Store'da PWA'lar yayınlanmış durumda.

Bu işi iyice yaymak için PWA Builder diye bir açık kaynak sitesi bile oluşturmuşlar, sitenizi doğrudan buradan PWA haline getirebiliyor ve MS Store'a doğrudan yükleyebiliyorsunuz. Bunun yanı sıra Google ve Apple Store için gereken dosyaları da edinebiliyorsunuz. Yani hibrid bir uygulama oluşturabiliyorsunuz.

Microsoft is publishing new web-apps to its Store under its name. This is the first wave of PWAs for Windows 10.

[Akif Eyler]

Teşekkürler Celalettin, PWA yapmayı öğrendim, öğrenciler için Türkçe bir giriş sayfası hazırladım:  PWA Nasıl Yapılır 

Sanırım artık sayfalarınız tam olarak çalışıyor, hemen cebime uygulama olarak ekledim :)

https://maeyler.github.io/BLM305/ Dersin ana sayfası şimdilik birkaç linkten ibaret... Daha sonra burada dönem ödevleri olacak ve her öğrencinin kendi forkunda bütün sınıfın projeleri görünecek.

 

Apple bu işe pek sıcak bakmıyor, Google bir şekilde API'lerle entegrasyon sağlıyor, MS ise kendi mağazası çok rağbet görmediği için bu işe en çok destek verenlerden. Bir geliştiricinin, oluşturduğu bir PWA'yı 3 mağazada da yayınlama serüvenini anlatan bir yazı.

Benim mağazalarla işim yok ama ilginç bir yazı -- üç devden ikisi anlaşınca üçüncü onları takip etmek zorunda kalacak... Böylece Jobs'ın 2007 vizyonu hakikat olacak ve Android'e özel uygulama yazmaktan kurtulacağız. :)

[Akif Eyler]

Web app ne ifade ediyor, çok açık... ya başındaki P nedir? Progressive... peki ilerleyen şey ne?

Bugün anladım: Hem Chrome ilerliyor, hem de kendi sayfam

Chrome az önce kendini yeniledi, baktım benim pencere renklenmiş ve yeni kontroller kazanmış

Ben hiçbir şey indirmeden yeni sürüm devreye girdi

Öte yandan, bu bir ders sayfası, her hafta yeni malzeme ekleniyor (yani ben ekliyorum)

Öğrenciler aynı ikonu açarak daha ilerlemiş bir sayfaya erişiyorlar -- hem daha ilerlemiş bir tarayıcıdan...

__Akif Eyler__

On Sun, Nov 25, 2018