Modern progresif web uygulaması geliştirmeyi her açıdan ayrıntılı bir şekilde gösteren bir kurs.
Bu kursta Progresif Web Uygulaması geliştirmenin temelleri kolay anlaşılır parçalar halinde anlatılmaktadır. Sonraki modüllerde Progresif Web Uygulamasının ne olduğunu, İleri Web Uygulamasının nasıl oluşturulacağını, mevcut web içeriğinizi nasıl yükselteceğinizi ve çevrimdışı, yüklenebilir bir uygulama için tüm parçaları nasıl ekleyeceğinizi öğreneceksiniz. Modüllerde gezinmek için menü bölmesini kullanın. (Menü, masaüstünde sol tarafta veya mobil cihazda hamburger menüsünün arkasındadır.)
Web Uygulama Manifesti, Service Worker'lar, bir uygulamayı göz önünde bulundurarak tasarım yapma, PWA'nızı test etmek ve hata ayıklamak için diğer araçları kullanma gibi PWA ile ilgili temel bilgileri öğreneceksiniz. Bu temel bilgilerden sonra platform ve işletim sistemiyle entegrasyon, PWA'nızın yükleme ve kullanım deneyimini iyileştirme ve çevrimdışı deneyim sunma hakkında bilgi edineceksiniz.
Her modülde, bilginizi sınamanız için etkileşimli demolar ve kişisel değerlendirmeler bulunmaktadır. Progresif Web Uygulamasının temellerini anlamak için kodlarla oynarken demoları cep telefonunuzda, tabletinizde veya dizüstü bilgisayarınızda test edip deneyebileceksiniz.
Bu kurs, hem yeni başlayan hem de ileri düzey web geliştiricileri için hazırlanmıştır. Baştan sona PWA'ya dair genel bir fikir edinmek için serinin üzerinden geçebilir veya PWA'yı belirli konular için referans olarak kullanabilirsiniz. Web geliştirmede yeni olanlar için HTML, CSS ve JavaScript temel çizgisini bilmeleri gerekir. Learn CSS ve MDN ile ilgili HTML ile JavaScript kurslarına göz atın.
Öğrenecekleriniz:
Başlangıç
Progresif Web Uygulaması geliştirmek istiyorsanız nereden başlayacağınızı, bir web sitesini en baştan başlamadan PWA'ya yükseltmenin mümkün olup olmadığını veya platforma özgü bir uygulamadan PWA'ya nasıl geçebileceğinizi merak ediyor olabilirsiniz. Bu makale, bu soruları yanıtlamanıza yardımcı olacaktır.
Temeller
İleri Web Uygulamalarının tamamı, özünde modern web siteleridir. Bu nedenle, web sitenizin duyarlı tasarım, mobil ve en önemlisi, doğal tasarım ve web performansı konularında sağlam bir temeli olması önemlidir.
Uygulama tasarımı
Progresif Web Uygulamaları ile klasik web siteleri ve web uygulamaları arasındaki temel farklardan biri yüklenebilirliktir. Böylece, platforma ve işletim sistemine daha entegre edilmiş bağımsız bir deneyim ortaya çıkar. Yükleme işlemi, içeriğimizde tarayıcı kullanıcı arayüzü olmayacağından, yeni esneklik ve yeni sorumluluk doğuruyor.
Öğeler ve veriler
Progresif Web Uygulaması (pwa) bir web sitesidir; tüm öğeleri web'dekiyle aynıdır ancak bu öğelerin çevrimiçi olduğunda hızlı yüklenmesini ve çevrimdışıyken kullanılabilir olmasını sağlayan yeni araçlar içerir.
Hizmet çalışanları
Service Worker'lar, PWA'nın temel bir parçasıdır. Hızlı yükleme (ağdan bağımsız olarak), çevrimdışı erişim, push bildirimleri ve diğer özellikleri etkinleştirir.
Önbelleğe alma
Cihazdaki öğeleri indirmek, depolamak, silmek veya güncellemek için Cache Storage API'sini kullanabilirsiniz. Daha sonra bu öğeler, ağ isteği gerekmeksizin cihazda yayınlanabilir.
Yayınlanıyor
Service Worker'ın getirme etkinliğini kullanarak ağ isteklerine müdahale edebilir ve farklı teknikler kullanarak yanıt sunabilirsiniz.
Çalışma kutusu
Workbox, yönlendirme ve önbelleğe alma gibi yaygın hizmet çalışanı etkileşimlerini basitleştiren bir dizi modüldür. Her modülde, Service Worker geliştirmenin belirli bir yönü ele alınır. Workbox, Service Worker'ların kullanımını mümkün olduğunca kolaylaştırmayı amaçlar. Aynı zamanda, gerektiğinde karmaşık uygulama gereksinimlerini karşılama esnekliğine de olanak tanır.
Çevrimdışı veriler
Güçlü bir çevrimdışı deneyim oluşturmak için depolama alanı yönetimini uygulamanız gerekir. IndexedDB, Cache, Storage Manager, Persistent Storage ve İçerik Dizine Ekleme gibi araçlar yardımcı olabilir.
Yükleme
Yüklü uygulamalara kolayca erişilebilir ve işletim sistemiyle daha ayrıntılı entegrasyonlardan yararlanabilirsiniz. PWA'nızı yüklenebilir hale getirmeyi ve bu avantajları elde etmeyi öğrenin.
Web uygulaması manifest dosyası
Web uygulaması manifest dosyası, PWA'nın yüklü bir uygulama olarak nasıl değerlendirilmesi gerektiğini (ör. görünüm, tarz ve işletim sistemindeki temel davranış) tanımlayan bir JSON dosyasıdır.
Yükleme istemi
PWA yükleme kriterlerini karşılayan sitelerde tarayıcı, kullanıcıdan yüklemeyi isteyen bir etkinliği tetikler. Bununla birlikte, bu etkinliği kullanarak isteminizi özelleştirebilir ve kullanıcıları uygulamanızı yüklemeye davet edebilirsiniz.
Güncelle
Muhtemelen PWA'nızın güncellenmesi gerekiyordur. Bu bölümde, öğelerden meta verilere kadar PWA'nızın farklı bölümlerini güncellemek için kullanabileceğiniz araçlar yer almaktadır.
Geliştirmeler
Kullanıcı iyi bir deneyim bekler. Bu bölümde PWA'nızı başlangıç ekranları, uygulama kısayolları ve oturumların işleyiş şekliyle nasıl geliştireceğinizi öğreneceksiniz.
Algılama
Kullanıcılarınızın uygulamanızla nasıl etkileşimde bulunduğunu tanımlamak, kullanıcı deneyimini özelleştirmek ve iyileştirmek için yararlıdır. Örneğin, uygulamanızın kullanıcının cihazında yüklü olup olmadığını kontrol edebilir ve tarayıcıdan bağımsız uygulamaya navigasyonu aktarma gibi özellikleri uygulayabilirsiniz.
İşletim Sistemi Entegrasyonu
PWA'nız artık tarayıcının dışında çalışıyor. Bu bölümde, kullanıcılar uygulamanızı yükledikten sonra işletim sistemiyle nasıl daha fazla entegrasyon yapılacağı ele alınmaktadır.
Pencere yönetimi
Tarayıcı dışındaki bir PWA kendi penceresini yönetir. Bu bölümde API'ları ve işletim sistemi içindeki pencere yönetimi özelliklerini öğreneceksiniz.
Deneysel özellikler
Henüz yapım aşamasında olan PWA özellikleri vardır ve bunların geliştirilmesinde siz de yer alabilirsiniz. Bu bölümde Fugu projesi, kaynak denemesine kaydolma ve deneysel API'ların kullanımı hakkında bilgi edineceksiniz.
Araçlar ve hata ayıklama
Progresif Web Uygulamaları geliştirmek, hatalarını ayıklamak ve test etmek için kullanabileceğiniz araçları keşfedeceğiz.
Mimari
PWA geliştirirken, tek sayfalı bir uygulama mı yoksa çok sayfalı bir uygulama mı oluşturacağınız ve onu alan adınızın kökünde mi yoksa bir klasör içinde mi barındıracağınız gibi bazı kararlar verirsiniz.
Karmaşıklık yönetimi
Bir web uygulamasını basit tutmak şaşırtıcı derecede karmaşık olabilir. Bu modülde web API'lerinin ileti dizisiyle nasıl çalıştığını ve bunu durum yönetimi gibi yaygın PWA kalıpları için nasıl kullanabileceğinizi öğreneceksiniz.
Özellikler
PWA'lar yalnızca ekrana bağlı değildir. Bu bölüm, PWA'nın bugün sahip olduğu donanım, sensör ve platform kullanımı açısından sahip olduğu özellikler hakkındadır.
Sonuç
Sonraki adımlar ve kaynaklar.
Peki PWA'yı öğrenmeye hazır mısınız?