2. Mobile vs Web
■ comScore verilerine göre, ABD’de kullanıcıların %65.5’i ayda bir tane
bile aplikasyon indirmiyor. Ayda bir aplikasyon indirenlerin sayısı
%8.4, iki aplikasyon indirenlerin sayısı %8.9, üç indirenlerin ise %6.2.
Mobil uygulamalar her ne kadar büyümeye devam etse de, büyüme
hızının yavaşladığı gözlemleniyor. 2015 yılında %58 büyüyen mobil
uygulama kullanımı 2016’da sadece %11 büyüdü.
■ Google verilerine göre Android işletim sistemine sahip kullanıcılar
sadece Chrome tarayıcısını kullanarak ayda 100’den fazla siteyi
ziyaret ediyor. Yine bu kullanıcılar ayda 27 uygulamayla etkileşime
geçiyor. Buna göre, Android kullanıcıları mobil webi %250 daha fazla
tercih ediyor.
3. PWApp Nedir?
■ Android telefonunuzdan Chrome’da Progressive Web Apps bir siteye
girdiğiniz an bu siteyi telefonunun home ekranına eklemek isteyip
istemediğinizi sorar.
■ Kabul ederseniz telefonunuza uygulamalardaki gibi bir ikon eklenir.
■ İkona bastığınızda browserdan çıkıp mobil uygulama gibi tam ekran
Progressive Web Apps deneyimini yaşarsınız.
4.
5. PWA’in Avantajları
■ Progressive: Tarayıcı seçimi gerektirmeksizin her kullanıcıya hitap
eder.
■ Responsive: Her cihaz için uyumludur. (Desktop, mobile, tablet vs.)
■ Connectivity independent: Service Worker’ın gelişimi ile offline
mode çalıştığı gibi low-quality network üzerinde de sorunsuz çalışır.
6. PWA’in Avantajları-II
■ Synchron: Proxy sayesinde uygulama çalışmadığı zamanlarda da
kendini yenilemeye devam eder. Örneğin bağlantı sorunundan dolayı
bir içeriğe ulaşamadınızda Service Workers bu işlemi arka planda
senkronize eder ve bağlantı sorununuz çözüldüğünde size bir bildirim
göndererek içeriğe artık ulaşabileceğinizi hatırlatır.
■ Offline Mode: Bu özellik ile internet olmasa bile sayfaya ilk
girildiğinde belirlenen sayfalar ve belirlenen içerikler cache’leniyor.
İnternet olmasa bile sayfalara arası gezinti buradan sağlanıyor.
■ Push Notification: Kullanıcıya anında bildirim gönderebilmeyi sağlar.
7. PWA’in Avantajları-III
■ Safe: HTTPS protokolünü kullanarak güvenlikten, bilginin
değiştirilmediğinden veya tahrif edilmediğinden emin olur.
■ Discoverable: W3C manifest temeli ve “Service Workers”
uygulamanın arama motorları tarafından indekslenmesini sağlar.
■ Installable: Google Store’a gerek kalmadan bir uygulama gibi
telefonun ana ekranına ikon koyabilmeyi sağlar.
8. Service Workers
■ Kullanıcı etkileşiminden ve web sayfasından bağımsız olarak
tarayıcının arka planında çalışan scriptlere denir.
■ Push notification ve background synchronization gibi özellikleri yerine
getirirler.
9. Application Shell
■ Application Shell minimal HTML, CSS and JavaScript ile arayüzün
güçlendirilmesi olarak tanımlanabilir. Bunun anlamı sayfa bir kere
yüklendiğinde artık o sayfa bir sonraki yüklemede kullanıcıya daha hızlı
bir şekilde tepki verecek ve cachelenecektir. Kısacası Application Shell
hızlı yüklenme ve cache edilebilmeyi sağlar.
■ “Cached" dosyaların ağ üzerinden bir kez yüklendiği ve daha sonra aygıta
kaydedildiği anlamına gelir. Kullanıcının uygulamayı açtığı her seferinde,
bu dosyalar cihazın önbelleğinden yüklenir ve uygulamayı hızlandırır.
■ Application Shell mimarisi, uygulama altyapısını ve kullanıcı arabirimi
verilerini ayırır. Kullanıcı arabirimi ve altyapının tümü Service Worker
kullanarak yerel olarak önbelleğe alınır, böylece sonraki yüklerde
Progressive Web App'ün yalnızca her şeyi yüklemek yerine verilerin
alınması yeterlidir.
12. Web Sitesinin PWA Olarak
Düzenlenmesi
■ Vanilla JS, React, Polymer ve Angular gibi frameworkler kullanmak
■ Web App Manifest dosyası eklemek
■ Javascript dosyası oluşturup, Service Worker eklemek
■ Push Notification için Key almak, Bildirimleri ayarlamak ve yönetmek
■ Service Worker’lar ile istenilen sayfaları önbelleğe almak
13. ■ Service Worker Açıklamaları:
https://developers.google.com/web/fundamentals/getting-
started/primers/service-workers
■ IOS için Service Worker Plugin:
https://www.npmjs.com/package/cordova-plugin-service-worker
■ Siteyi PWA haline getirme:
https://codelabs.developers.google.com/codelabs/migrate-to-
progressive-web-apps/index.html?index=..%2F..%2Findex#0
■ https://medium.com/@atamanonur/desktop-ve-mobil-web-in-
gelece%C4%9Fi-progressive-web-apps-379f3f4514a9
