際際滷

際際滷Share a Scribd company logo
1
Progressive
Web Applications
Uur Aydodu
GDG Sivas, Aral脹k 2016
2
Dijital Pazarlama
Sosyal Medya
E-Ticaret
Mobil Uygulamalar
Epigrada Neler Yap脹yoruz?
Tasar脹m Web Uygulamalar脹
3
2015 y脹l脹nda Google m端hendislerinden birisi olan Alex Russell taraf脹ndan
ortaya at脹lm脹t脹r. (Escaping Tabs Without Losing Our Soul)
Uygulama benzeri bir deneyimi, modern yetenekler ile ortaya koyan
uygulamalara progressive web uygulamas脹 denir.
-Google
Progressive Web Application Nedir?
4
Biz neler g旦rd端k?
Dial Up, Table, Div, CSS, Ajax, Responsive, Native, Hybrid .
5
Adobe AIR Applications
Windows Store Apps
Chrome Packaged Applications, Chromium Embedded Framework
Firefox OS Packaged Applications
Cordova/PhoneGap ve Crosswalk Uygulamala脹r
BlackBerry WebWorks Apps
W3C Widgets
WebOS Apps
Electron
Gelecei erken g旦renler
6
Progressive Web Application
Progressive - Devaml脹 olarak gelitirilerek t端m kullan脹c脹lara, platform
ba脹ms脹z hizmet edebilmek 端zere gelitirilir
Responsive - Masa端st端, mobil, tablet b端t端n ortamlarda 巽al脹脹r
Balant脹dan ba脹ms脹z - Service workers sayesinde offline veya balant脹n脹n
k旦t端 olduu durumlarda 巽al脹abilir.
Uygulama gibi - Etkileim ve navigasyonel balant脹lar arac脹l脹脹yla uygulama
hissiyat脹 verir.
G端ncel - Her zaman son s端r端md端r,ekstra g端ncellemeye gerek kalmaz.
7
Progressive Web Application
G端venli - Herhangi g端venlik problemine izin vermemek i巽in HTTPS to
端zerinden 巽al脹脹r.
Bulunabilir - Are identifiable as applications thanks to W3C
manifests[6] and service worker registration scope allowing search engines
to find them.
Re-engageable - Push notification gibi altyap脹lar sayesinde sadakat ve
etkileim yarat脹r.
Y端klenebilir - App Storeda beklemeye ihtiya巽 olmaks脹z脹n ana ekrana
k脹sayol olarak yerleebilir
Balant脹lanabilir - URL arac脹l脹脹yla kolayl脹kla payla脹labilir.
8
Ne Zaman PWA?
Yapmal脹 m脹y脹z? Yapmamal脹
m脹y脹z?
Acaba Hybrid mi yazsak?
Native yazmay脹nca da i巽ime
hi巽 sinmiyor da neyse
G端ncel Veri
Ger巽ek
Zamanl脹
Etkileimler
(Chat, Notification
vs)
Offline
聴htiya巽lar
Kullan脹c脹
Al脹kanl脹klar脹
Deneysellik
9
Arat脹rmalar neler diyor?
Ortalama olarak bir uygulama her ad脹mda
ona ulaan kullan脹c脹lar脹n
20%sini kaybediyor.
20%
10
Yani.. 1000 kii olduumuzu varsayarsak
Source: https://youtu.be/qmE_jpnYXFo?t=96
11
Amerikadaki ak脹ll脹 telefon kullan脹c脹lar脹n脹n 65.5%i bir ay
s端resince yeni bir uygulama indirmiyor.
App Storeda uygulaman脹z脹 ziyaret edenlerin yaln脹zca
26.4%端 uygulaman脹z脹 indiriyor.
En y端ksek ziyaret巽i alan 1000 mobil web sitesi, en iyi 1000
native uygulamaya g旦re 270% daha 巽ok ziyaret ediliyor.
Dahas脹
12
Native uygulamalar daha fazla etkileim al脹yor fakat
web siteleri hala daha fazla kiiye eriiyor.
13
Konvansiyonel web siteleri daha 巽ok insana erimenizi
salarken, uygulamalar kullan脹c脹lar ile daha fazla etkilesim
kurman脹z脹 sal脹yor.
O zaman neden hem 巽ok insana eriip hem de daha 巽ok
etkileim kurmayal脹m ki?
14
Gartnerin 2016 Hype Cycle for Web Computing
(http://www.gartner.com/document/3398518) endeksine g旦re,
PWAlar hen端z embriyo aamas脹nda ve %1 penetrasyon oran脹yla
b端y端yor.
Bu nedenle hen端z s脹k s脹k kar脹m脹za 巽脹kmasa da gelecek
vaadettiini s旦ylemek zor deil.
PWA Hen端z b端y端yen bir 巽ocuk
15
Progressive Web App Showcase  https://pwa.rocks
Google Progressive Web App 
https://developers.google.com/web/progressive-web-apps/
Pokedex  https://www.pokedex.org/
Flipkart  https://www.flipkart.com/
Air Berlin  https://flights.airberlin.com/en-DE/progressive-
web-app
Baz脹 PWA rnekleri
16
APP SHELL SERVICE WORKER
17聴stediiniz Javascript Framework端n端 Kullanabilirsiniz
18
19
Avantajlar
19
 Veri Tasarrufu : Baz脹 端lkelerdeki altyap脹 problemleri nedeniyle y端ksek bant
genilii gerektiren durumlarda ciddi eriim problemleri yaanabiliyor. Native
olarak 10 MB olan bir uygulama PWA olarak 500 KB boyutuna kadar inebiliyor.
 G端ncellemeye Gerek Olmamas脹: imdi veya sonras脹 i巽in g端ncellemeye gerek
olmad脹脹 gibi ciddi hatalarda app storeda onay beklemek durumunda
kalmay脹p anl脹k g端ncellemeler yap脹labiliyor.
 Kullanmak i巽in y端klemeye gerek yok, dorudan kullanmaya
balayabiliyorsunuz.
 Kolayl脹kla payla脹labiliyor
20
Dezavantajlar
20
 Pek 巽ok irket kendi uygulamas脹n脹n i巽erisinde taray脹c脹 ilevini koymaya balad脹脹 i巽in
yay脹lmas脹 zorla脹yor
 App Store Yok: Uygulama arayan insanlara dorudan eriim salamak i巽in arama
motorlar脹na bal脹y脹z.
 Sign in with Facebook, Google gibi buttonlar; iletim sistemi 端zerinde kurulu
uygulamalara eriemediinden; web 端zerinden giri yapmak zorunda kal脹yorsunuz
 Son teknoloji donan脹mlar hala kullan脹lam脹yor (parmakizi sens旦r端 vs)
 u an i巽in anahtar 巽ou 旦zellik yaln脹zca Android taraf脹ndan destekleniyor.
 Pinch zoom gibi baz脹 旦zelliklerin kapat脹lmas脹, ya da uygulaman脹n browser deil de
standalone veya fullscreen modunda olmas脹 alg脹y脹 y旦nlendirip sald脹r脹 olarak kullan脹labilir
mi? sorular脹 hala d端端nd端r端yor
21
 Cordova tabanl脹 hibrid uygulamalar
 React Native
 NativeScript
 Electron and NW.js
HTML uygulamalar脹 apk, exe veya dier formatlarda 巽al脹t脹ran ve/ya
native e d旦n端t端ren altyap脹lar PWA deildir.
PWAlar脹n y端klenmesi gerekmez, indirmek i巽in ise yaln脹zca siteyi
ziyaret ederek ana ekrana k脹sayol olarak eklemeniz yeterlidir. Bu
nedenle farkl脹 iOS ve Android uygulamalar脹 gelitirmesi zorunluluu
ortadan kalkar. (taray脹c脹 destei sorun oluturmad脹脹 s端rece)
Kar脹t脹r脹lmamas脹 Gerekenler
22
PWA vs Native
22
Doru kar脹lama asl脹nda
PWA vs. native deil belki de PWA vs. [web + native + native] .
Kimin hakl脹 olduunu yine ancak zaman g旦sterecek...
23
Teekk端rler
@uguraydogdu_
fb.com/iamjnbn
instagram.com/jnbn
24
www.epigra.com
25
Kaynak巽a
25
 https://developers.google.com/web/progressive-web-apps/?hl=en
 https://developers.google.com/web/updates/2015/12/getting-started-
pwa?hl=en#add_to_home_screen_banner
 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-
pwapp/?hl=en
 https://developers.google.com/web/updates/2015/11/app-shell?hl=en
 https://arc.applause.com/2015/11/30/application-shell-architecture/
 https://github.com/TalAter/awesome-progressive-web-apps
 https://www.sitepoint.com/progressive-web-apps-bridging-the-gap-between-web-and-
mobile/
 https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-
soul-3b93a8561955#.k44b6zwc9
 https://medium.com/@owencm/the-surprising-tradeoff-at-the-center-of-question-
whether-to-build-an-native-or-web-app-d2ad00c40fb2#.4em0oy14m
26
Kaynak巽a
26
 https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-
question-to-ask-fb8555addcbb#.bv9s7xcjd
 https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-
apps/
 https://www.smashingmagazine.com/2015/04/creating-web-app-in-foundation-for-apps/
 https://www.smashingmagazine.com/2016/02/building-first-class-app-leverages-website-
case-study/
 https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-
apps/

More Related Content

Viewers also liked (15)

Digital Zone-2016
Digital Zone-2016Digital Zone-2016
Digital Zone-2016
Okan Kortan
Web Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin EL
Web Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin ELWeb Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin EL
Web Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin EL
Siraceddin El
Eticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleri
Eticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleriEticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleri
Eticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleri
Burak TATLISERT
Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?
Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?
Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?
Burak TATLISERT
Digital Bosphorus - The State of Turkish eCommerce 2013 - Sina Afra
Digital Bosphorus - The State of Turkish eCommerce 2013 - Sina AfraDigital Bosphorus - The State of Turkish eCommerce 2013 - Sina Afra
Digital Bosphorus - The State of Turkish eCommerce 2013 - Sina Afra
Sina Afra
T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?
T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?
T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?
Webrazzi
deme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaret
deme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaretdeme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaret
deme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaret
Webrazzi
Ali Baba Group Marka Sunumu
Ali Baba Group Marka SunumuAli Baba Group Marka Sunumu
Ali Baba Group Marka Sunumu
ozgekurnaz
Dijital demelere Bak脹 - BKM Express
Dijital demelere Bak脹 - BKM ExpressDijital demelere Bak脹 - BKM Express
Dijital demelere Bak脹 - BKM Express
Webrazzi
PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...
PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...
PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...
Webrazzi
Turkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporu
Turkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporuTurkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporu
Turkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporu
Merve Kara
SEOsuzluk irket bat脹r脹r m脹?
SEOsuzluk irket bat脹r脹r m脹?SEOsuzluk irket bat脹r脹r m脹?
SEOsuzluk irket bat脹r脹r m脹?
Webrazzi
Eticaret sunumu, temmuz 2016
Eticaret sunumu, temmuz 2016Eticaret sunumu, temmuz 2016
Eticaret sunumu, temmuz 2016
mahirerkan
E ticaret Veri G端venlii - SSL - Muhammet AATAY
E ticaret Veri G端venlii - SSL - Muhammet AATAYE ticaret Veri G端venlii - SSL - Muhammet AATAY
E ticaret Veri G端venlii - SSL - Muhammet AATAY
Muhammet AATAY
E ticaret ve g端venlik
E ticaret ve g端venlikE ticaret ve g端venlik
E ticaret ve g端venlik
Z端hre Ayd脹n
Digital Zone-2016
Digital Zone-2016Digital Zone-2016
Digital Zone-2016
Okan Kortan
Web Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin EL
Web Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin ELWeb Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin EL
Web Sitesi Yap脹m Aamalar脹 // Sanalkurs 9. Biliim Seminerleri // Siraceddin EL
Siraceddin El
Eticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleri
Eticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleriEticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleri
Eticaret Sekt旦r端nde Personel 聴stihdam脹n脹n Ayak 聴zleri
Burak TATLISERT
Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?
Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?
Eticaret Yaz脹l脹m脹 / Platformu Nas脹l Se巽ilir?
Burak TATLISERT
Digital Bosphorus - The State of Turkish eCommerce 2013 - Sina Afra
Digital Bosphorus - The State of Turkish eCommerce 2013 - Sina AfraDigital Bosphorus - The State of Turkish eCommerce 2013 - Sina Afra
Digital Bosphorus - The State of Turkish eCommerce 2013 - Sina Afra
Sina Afra
T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?
T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?
T端rkiye E-ticaretinde 2015 Nas脹l Ge巽ti?
Webrazzi
deme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaret
deme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaretdeme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaret
deme Sistemleri a巽脹s脹ndan Uluslararas脹 E-ticaret
Webrazzi
Ali Baba Group Marka Sunumu
Ali Baba Group Marka SunumuAli Baba Group Marka Sunumu
Ali Baba Group Marka Sunumu
ozgekurnaz
Dijital demelere Bak脹 - BKM Express
Dijital demelere Bak脹 - BKM ExpressDijital demelere Bak脹 - BKM Express
Dijital demelere Bak脹 - BKM Express
Webrazzi
PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...
PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...
PayU Global & Turkey E-commerce Report - PayU K端resel ve T端rkiye E-ticaret Ra...
Webrazzi
Turkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporu
Turkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporuTurkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporu
Turkiye e ticaret ekosistemi 2016 ikinci c箕eyrek raporu
Merve Kara
SEOsuzluk irket bat脹r脹r m脹?
SEOsuzluk irket bat脹r脹r m脹?SEOsuzluk irket bat脹r脹r m脹?
SEOsuzluk irket bat脹r脹r m脹?
Webrazzi
Eticaret sunumu, temmuz 2016
Eticaret sunumu, temmuz 2016Eticaret sunumu, temmuz 2016
Eticaret sunumu, temmuz 2016
mahirerkan
E ticaret Veri G端venlii - SSL - Muhammet AATAY
E ticaret Veri G端venlii - SSL - Muhammet AATAYE ticaret Veri G端venlii - SSL - Muhammet AATAY
E ticaret Veri G端venlii - SSL - Muhammet AATAY
Muhammet AATAY
E ticaret ve g端venlik
E ticaret ve g端venlikE ticaret ve g端venlik
E ticaret ve g端venlik
Z端hre Ayd脹n

Similar to Progressive Web Applications (20)

PhoneGap/Cordova ile Mobil Uygulama Gelitirmeye Giri
PhoneGap/Cordova ile Mobil Uygulama Gelitirmeye GiriPhoneGap/Cordova ile Mobil Uygulama Gelitirmeye Giri
PhoneGap/Cordova ile Mobil Uygulama Gelitirmeye Giri
Egemen Mede
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?
mobilike
Companies
CompaniesCompanies
Companies
ecsrdl
Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1
Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1
Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1
sertacayd
Google Analytics - 12 Ad脹mda Dijital Check-up
Google Analytics - 12 Ad脹mda Dijital Check-upGoogle Analytics - 12 Ad脹mda Dijital Check-up
Google Analytics - 12 Ad脹mda Dijital Check-up
Deniz Utku
Mobile First Indexing
Mobile First Indexing Mobile First Indexing
Mobile First Indexing
ceydaaricioglu
2019 Mobil Pazarlama Trendleri
2019 Mobil Pazarlama Trendleri2019 Mobil Pazarlama Trendleri
2019 Mobil Pazarlama Trendleri
Serhat B脹巽ak巽脹
Burak Budak - r端n Y旦neticileri i巽in Mobil
Burak Budak - r端n Y旦neticileri i巽in MobilBurak Budak - r端n Y旦neticileri i巽in Mobil
Burak Budak - r端n Y旦neticileri i巽in Mobil
indir.com
Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹
Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹
Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹
Sinan Yesiltas
Mobil Uygulama Gelitiricileri 聴巽in Tavsiyeler
Mobil Uygulama Gelitiricileri 聴巽in TavsiyelerMobil Uygulama Gelitiricileri 聴巽in Tavsiyeler
Mobil Uygulama Gelitiricileri 聴巽in Tavsiyeler
Burak Budak
2016'da Dijital Pazarlama Beklentileri
2016'da Dijital Pazarlama Beklentileri2016'da Dijital Pazarlama Beklentileri
2016'da Dijital Pazarlama Beklentileri
BERKAY TUGAY
SAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yor
SAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yorSAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yor
SAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yor
Serkan zcan
Appy Go
Appy GoAppy Go
Appy Go
Tarik KUCUK
Ionic & Cross Platform Teknolojisi
Ionic & Cross Platform TeknolojisiIonic & Cross Platform Teknolojisi
Ionic & Cross Platform Teknolojisi
KORHAN ZBEK
Tablet
TabletTablet
Tablet
orkenn
Android Uygulama Gelitirme
Android Uygulama GelitirmeAndroid Uygulama Gelitirme
Android Uygulama Gelitirme
Ergin K端巽端kiravul
Avva Mobile Enterprise Solutions - Corporate Idendity
Avva Mobile Enterprise Solutions - Corporate IdendityAvva Mobile Enterprise Solutions - Corporate Idendity
Avva Mobile Enterprise Solutions - Corporate Idendity
Murat Y脹lmaz
madreport Q2 2014
madreport Q2 2014madreport Q2 2014
madreport Q2 2014
mobilike
Mobilike - Madreport 2014 2. ceyrek
Mobilike - Madreport 2014 2. ceyrekMobilike - Madreport 2014 2. ceyrek
Mobilike - Madreport 2014 2. ceyrek
Webrazzi
Mobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端n
Mobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端nMobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端n
Mobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端n
Erol KABADAYI
PhoneGap/Cordova ile Mobil Uygulama Gelitirmeye Giri
PhoneGap/Cordova ile Mobil Uygulama Gelitirmeye GiriPhoneGap/Cordova ile Mobil Uygulama Gelitirmeye Giri
PhoneGap/Cordova ile Mobil Uygulama Gelitirmeye Giri
Egemen Mede
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?
Uygulama diline karar vermek: HTML5 mi, Native mi yoksa Hibrit uygulama m脹?
mobilike
Companies
CompaniesCompanies
Companies
ecsrdl
Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1
Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1
Mobil Uygulama Eitimi Ortaokul Sunum Hafta 1
sertacayd
Google Analytics - 12 Ad脹mda Dijital Check-up
Google Analytics - 12 Ad脹mda Dijital Check-upGoogle Analytics - 12 Ad脹mda Dijital Check-up
Google Analytics - 12 Ad脹mda Dijital Check-up
Deniz Utku
Mobile First Indexing
Mobile First Indexing Mobile First Indexing
Mobile First Indexing
ceydaaricioglu
Burak Budak - r端n Y旦neticileri i巽in Mobil
Burak Budak - r端n Y旦neticileri i巽in MobilBurak Budak - r端n Y旦neticileri i巽in Mobil
Burak Budak - r端n Y旦neticileri i巽in Mobil
indir.com
Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹
Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹
Yeni Teknolojilerle Mobil ic箕in SEO ve PWA Uygulamalar脹
Sinan Yesiltas
Mobil Uygulama Gelitiricileri 聴巽in Tavsiyeler
Mobil Uygulama Gelitiricileri 聴巽in TavsiyelerMobil Uygulama Gelitiricileri 聴巽in Tavsiyeler
Mobil Uygulama Gelitiricileri 聴巽in Tavsiyeler
Burak Budak
2016'da Dijital Pazarlama Beklentileri
2016'da Dijital Pazarlama Beklentileri2016'da Dijital Pazarlama Beklentileri
2016'da Dijital Pazarlama Beklentileri
BERKAY TUGAY
SAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yor
SAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yorSAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yor
SAP INOVASYON FORUM 2014 - Mobilitede alternatifler 巽oal脹yor
Serkan zcan
Ionic & Cross Platform Teknolojisi
Ionic & Cross Platform TeknolojisiIonic & Cross Platform Teknolojisi
Ionic & Cross Platform Teknolojisi
KORHAN ZBEK
Tablet
TabletTablet
Tablet
orkenn
Avva Mobile Enterprise Solutions - Corporate Idendity
Avva Mobile Enterprise Solutions - Corporate IdendityAvva Mobile Enterprise Solutions - Corporate Idendity
Avva Mobile Enterprise Solutions - Corporate Idendity
Murat Y脹lmaz
madreport Q2 2014
madreport Q2 2014madreport Q2 2014
madreport Q2 2014
mobilike
Mobilike - Madreport 2014 2. ceyrek
Mobilike - Madreport 2014 2. ceyrekMobilike - Madreport 2014 2. ceyrek
Mobilike - Madreport 2014 2. ceyrek
Webrazzi
Mobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端n
Mobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端nMobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端n
Mobil Uygulamalar脹 Kullanarak 聴inizi B端y端t端n
Erol KABADAYI

Progressive Web Applications

  • 2. 2 Dijital Pazarlama Sosyal Medya E-Ticaret Mobil Uygulamalar Epigrada Neler Yap脹yoruz? Tasar脹m Web Uygulamalar脹
  • 3. 3 2015 y脹l脹nda Google m端hendislerinden birisi olan Alex Russell taraf脹ndan ortaya at脹lm脹t脹r. (Escaping Tabs Without Losing Our Soul) Uygulama benzeri bir deneyimi, modern yetenekler ile ortaya koyan uygulamalara progressive web uygulamas脹 denir. -Google Progressive Web Application Nedir?
  • 4. 4 Biz neler g旦rd端k? Dial Up, Table, Div, CSS, Ajax, Responsive, Native, Hybrid .
  • 5. 5 Adobe AIR Applications Windows Store Apps Chrome Packaged Applications, Chromium Embedded Framework Firefox OS Packaged Applications Cordova/PhoneGap ve Crosswalk Uygulamala脹r BlackBerry WebWorks Apps W3C Widgets WebOS Apps Electron Gelecei erken g旦renler
  • 6. 6 Progressive Web Application Progressive - Devaml脹 olarak gelitirilerek t端m kullan脹c脹lara, platform ba脹ms脹z hizmet edebilmek 端zere gelitirilir Responsive - Masa端st端, mobil, tablet b端t端n ortamlarda 巽al脹脹r Balant脹dan ba脹ms脹z - Service workers sayesinde offline veya balant脹n脹n k旦t端 olduu durumlarda 巽al脹abilir. Uygulama gibi - Etkileim ve navigasyonel balant脹lar arac脹l脹脹yla uygulama hissiyat脹 verir. G端ncel - Her zaman son s端r端md端r,ekstra g端ncellemeye gerek kalmaz.
  • 7. 7 Progressive Web Application G端venli - Herhangi g端venlik problemine izin vermemek i巽in HTTPS to 端zerinden 巽al脹脹r. Bulunabilir - Are identifiable as applications thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them. Re-engageable - Push notification gibi altyap脹lar sayesinde sadakat ve etkileim yarat脹r. Y端klenebilir - App Storeda beklemeye ihtiya巽 olmaks脹z脹n ana ekrana k脹sayol olarak yerleebilir Balant脹lanabilir - URL arac脹l脹脹yla kolayl脹kla payla脹labilir.
  • 8. 8 Ne Zaman PWA? Yapmal脹 m脹y脹z? Yapmamal脹 m脹y脹z? Acaba Hybrid mi yazsak? Native yazmay脹nca da i巽ime hi巽 sinmiyor da neyse G端ncel Veri Ger巽ek Zamanl脹 Etkileimler (Chat, Notification vs) Offline 聴htiya巽lar Kullan脹c脹 Al脹kanl脹klar脹 Deneysellik
  • 9. 9 Arat脹rmalar neler diyor? Ortalama olarak bir uygulama her ad脹mda ona ulaan kullan脹c脹lar脹n 20%sini kaybediyor. 20%
  • 10. 10 Yani.. 1000 kii olduumuzu varsayarsak Source: https://youtu.be/qmE_jpnYXFo?t=96
  • 11. 11 Amerikadaki ak脹ll脹 telefon kullan脹c脹lar脹n脹n 65.5%i bir ay s端resince yeni bir uygulama indirmiyor. App Storeda uygulaman脹z脹 ziyaret edenlerin yaln脹zca 26.4%端 uygulaman脹z脹 indiriyor. En y端ksek ziyaret巽i alan 1000 mobil web sitesi, en iyi 1000 native uygulamaya g旦re 270% daha 巽ok ziyaret ediliyor. Dahas脹
  • 12. 12 Native uygulamalar daha fazla etkileim al脹yor fakat web siteleri hala daha fazla kiiye eriiyor.
  • 13. 13 Konvansiyonel web siteleri daha 巽ok insana erimenizi salarken, uygulamalar kullan脹c脹lar ile daha fazla etkilesim kurman脹z脹 sal脹yor. O zaman neden hem 巽ok insana eriip hem de daha 巽ok etkileim kurmayal脹m ki?
  • 14. 14 Gartnerin 2016 Hype Cycle for Web Computing (http://www.gartner.com/document/3398518) endeksine g旦re, PWAlar hen端z embriyo aamas脹nda ve %1 penetrasyon oran脹yla b端y端yor. Bu nedenle hen端z s脹k s脹k kar脹m脹za 巽脹kmasa da gelecek vaadettiini s旦ylemek zor deil. PWA Hen端z b端y端yen bir 巽ocuk
  • 15. 15 Progressive Web App Showcase https://pwa.rocks Google Progressive Web App https://developers.google.com/web/progressive-web-apps/ Pokedex https://www.pokedex.org/ Flipkart https://www.flipkart.com/ Air Berlin https://flights.airberlin.com/en-DE/progressive- web-app Baz脹 PWA rnekleri
  • 18. 18
  • 19. 19 Avantajlar 19 Veri Tasarrufu : Baz脹 端lkelerdeki altyap脹 problemleri nedeniyle y端ksek bant genilii gerektiren durumlarda ciddi eriim problemleri yaanabiliyor. Native olarak 10 MB olan bir uygulama PWA olarak 500 KB boyutuna kadar inebiliyor. G端ncellemeye Gerek Olmamas脹: imdi veya sonras脹 i巽in g端ncellemeye gerek olmad脹脹 gibi ciddi hatalarda app storeda onay beklemek durumunda kalmay脹p anl脹k g端ncellemeler yap脹labiliyor. Kullanmak i巽in y端klemeye gerek yok, dorudan kullanmaya balayabiliyorsunuz. Kolayl脹kla payla脹labiliyor
  • 20. 20 Dezavantajlar 20 Pek 巽ok irket kendi uygulamas脹n脹n i巽erisinde taray脹c脹 ilevini koymaya balad脹脹 i巽in yay脹lmas脹 zorla脹yor App Store Yok: Uygulama arayan insanlara dorudan eriim salamak i巽in arama motorlar脹na bal脹y脹z. Sign in with Facebook, Google gibi buttonlar; iletim sistemi 端zerinde kurulu uygulamalara eriemediinden; web 端zerinden giri yapmak zorunda kal脹yorsunuz Son teknoloji donan脹mlar hala kullan脹lam脹yor (parmakizi sens旦r端 vs) u an i巽in anahtar 巽ou 旦zellik yaln脹zca Android taraf脹ndan destekleniyor. Pinch zoom gibi baz脹 旦zelliklerin kapat脹lmas脹, ya da uygulaman脹n browser deil de standalone veya fullscreen modunda olmas脹 alg脹y脹 y旦nlendirip sald脹r脹 olarak kullan脹labilir mi? sorular脹 hala d端端nd端r端yor
  • 21. 21 Cordova tabanl脹 hibrid uygulamalar React Native NativeScript Electron and NW.js HTML uygulamalar脹 apk, exe veya dier formatlarda 巽al脹t脹ran ve/ya native e d旦n端t端ren altyap脹lar PWA deildir. PWAlar脹n y端klenmesi gerekmez, indirmek i巽in ise yaln脹zca siteyi ziyaret ederek ana ekrana k脹sayol olarak eklemeniz yeterlidir. Bu nedenle farkl脹 iOS ve Android uygulamalar脹 gelitirmesi zorunluluu ortadan kalkar. (taray脹c脹 destei sorun oluturmad脹脹 s端rece) Kar脹t脹r脹lmamas脹 Gerekenler
  • 22. 22 PWA vs Native 22 Doru kar脹lama asl脹nda PWA vs. native deil belki de PWA vs. [web + native + native] . Kimin hakl脹 olduunu yine ancak zaman g旦sterecek...
  • 25. 25 Kaynak巽a 25 https://developers.google.com/web/progressive-web-apps/?hl=en https://developers.google.com/web/updates/2015/12/getting-started- pwa?hl=en#add_to_home_screen_banner https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first- pwapp/?hl=en https://developers.google.com/web/updates/2015/11/app-shell?hl=en https://arc.applause.com/2015/11/30/application-shell-architecture/ https://github.com/TalAter/awesome-progressive-web-apps https://www.sitepoint.com/progressive-web-apps-bridging-the-gap-between-web-and- mobile/ https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our- soul-3b93a8561955#.k44b6zwc9 https://medium.com/@owencm/the-surprising-tradeoff-at-the-center-of-question- whether-to-build-an-native-or-web-app-d2ad00c40fb2#.4em0oy14m
  • 26. 26 Kaynak巽a 26 https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong- question-to-ask-fb8555addcbb#.bv9s7xcjd https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web- apps/ https://www.smashingmagazine.com/2015/04/creating-web-app-in-foundation-for-apps/ https://www.smashingmagazine.com/2016/02/building-first-class-app-leverages-website- case-study/ https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web- apps/