Nereden Başlayacağız?
Gerçek dünyada bir PWA geliştirmeniz gerektiğinde başlangıç noktanız, çok yüksek bir ihtimalle web tasarımı ve kodlaması olacaktır. Bu ders kapsamındaki odak noktamız PWA'lar olduğu için tasarım ve kodlama süreçlerini atlayacağız ve doğrudan yapılandırma aşamasına geçeceğiz.
Hava durumu uygulaması, sizin tarafınızdan çözülmeyi bekleyen bir dizi hata ve eksiklik barındırıyor. Her hafta bu hatalardan bir yada birkaç tanesini çözerek altı haftanın sonunda uçtan bir uca bir PWA nasıl yapılandırılır öğrenmiş olacaksınız.
Google Chrome ile Uygulama Denetimi
Hava durumu uygulamamızı denetlemek ve yaptığımız işlemleri doğrulamak için Google Chrome web tarayıcısıyla bütünleşik olarak çalışan Deniz Feneri (Lighthouse) aracını kullanacağız.
Deniz Feneri (Lighthouse), web uygulamalarının kalitesini artırmak için açık kaynak olarak geliştirilmiş bir otomasyon aracıdır. Geliştiricilere; performans, erişilebilirlik ve ilerici web uygulamaları için kullanabileceklerini pek çok denetim imkanı sunar.
Hadi, uygulamamızı denetleyelim! Bunun için lütfen şu işlem adımlarını takip edin:
-
Google Chrome web tarayıcısını kullanarak hava durumu uygulamasını açın. Eğer uygulamanın web adresini hatırlamıyorsanız;
- Glitch'e giriş yapın ve Your Project bölümünden hava durumu uygulamasını açın.
- Show düğmesine tıklayın ve açılan menüden In a New Window seçeneğini seçin.
-
Google Chrome geliştirici araçlarını açın. Bunun için aşağıdaki yöntemlerden birini kullanabilirsiniz:
- Sayfanın herhangi bir yerinde sağ tuşa tıklayın ve menüden İncele (Inspect) komutunu seçin.
- Ana menüden Diğer Araçlar > Geliştirici Araçları komutunu seçin.
- Cmd + Shift + J (Windows) veya Cmd + Option + J (Mac) klavye kısayolunu kullanın.
- Audits sekmesini açın ve Run Audits düğmesine tıklayın.
Lighthouse, uygulamayı denetleyerek detaylı bir rapor görüntüleyecektir.
Rapor sayfasında yer alan PWA sekmesine tıklayarak PWA ile ilgili rapor sonuçlarını görüntüleyebilirsiniz. Hemen fark edeceğiniz gibi raporda kırmızı renkle vurgulanmış pek çok hata bulunmaktadır. Dersimiz boyunca adım adım bu hataları ortadan kaldıracak mükemmel bir PWA inşa edeceğiz.