PWA Geliştirme Süreci
Daha önce de belirttiğimiz gibi: Özünde PWA, tarayıcıda çalışan bir web uygulamasından başka bir şey değildir. Bu nedenle uyarlanabilir tasarıma (responsive design) sahip tüm web uygulamalarınızı çok hızlı bir şekilde PWA'ya dönüştürebilirsiniz.
Bu ders kapsamında sıfırdan bir web uygulaması geliştirmeyeceğiz. Varolan küçük bir hava durumu uygulamasını, sizinle birlikte adım adım PWA'ya dönüştüreceğiz. Uygulamayı test etmek için favori web tarayıcınızı kullanarak https://ikybs-ilk-pwam.glitch.me/ adresini ziyaret etmeniz yeterli olacaktır. İşletim sistemi (Android, iOS, Windows, MacOS ve Linux) ve cihaz (cep telefonu, tablet, masaüstü) bağımsız olarak PWA'lar; Chrome, Firefox, Edge ve Safari gibi tüm modern web tarayıcıları tarafından desteklenmektedir. En iyi sonucu almak için Chrome kullanmanızı öneririm.
Hava durumu uygulamasını kullanarak favori şehirlerinizin haftalık hava durumu tahminlerini görüntüleyebilirsiniz. Hava durumu verileri, Dark Sky API'dan canlı olarak alınmaktadır. Yeni şehir eklemek için sağ alt köşede yer alan + simgesine tıklayınız. Varolan bir şehri silmek için şehir kartının sağ üst köşesinde bulunan x simgesine tıklayınız.
Hava durumu uygulamasını cep telefonunuza kurmak için "Hava Durumu uygulamasını Ana ekrana ekle" düğmesine tıklayınız. İşlemi onayladıktan sonra hava durumu uygulamasına ana ekranınızdan erişebilirsiniz. Hava durumunu ana ekranınızdan açtığınızda uygulama otomatik olarak aynı yerel (native) bir mobil uygulama gibi tam ekran görünümüne geçecektir.
Bu ders kapsamında adım adım ele alacağımız PWA geliştirme sürecinde;
- Öncelikle, geliştirme ortamımızı kuracağız.
- Ardından, bir web manifest dosyası oluşturarak PWA'mızın genel yapısını nasıl tanımlayacağımızı öğreneceğiz.
- Sonraki aşamada, bir hizmet çalışanı (service worker) kodlayarak PWA'mıza çevrimdışı çalışma yeteneği kazandıracağız.
- En son aşamada ise, PWA'mızı mobil cihazlara kurabilmek için gerekli işlemleri yapılandıracağız.
Kahvenizi demleyin, ilk PWA'nızı geliştirmeye başlıyorsunuz!