Öğeler ve veriler

Progresif Web Uygulaması bir web sitesidir; tüm öğeleri web'dekiyle aynıdır ancak bu öğelerin online olduğunda hızlı yüklenmesini ve çevrimdışıyken kullanılabilir olmasını sağlayan yeni araçlar içerir.

Uygulama bileşenleri

Uygulama geliştirmede genellikle mantık ve koddan (derlenmiş veya derlenmemiş) ekran tasarımları, resimler, logolar ve yazı tipleri gibi kullanıcı arayüzü öğelerine kadar birkaç öğe ve kaynak bulunur.

Progresif Web Uygulaması bir web sitesi olduğu için tüm öğeleri web'dekiyle aynıdır:

İçerik ve ilk sayfa oluşturma için HTML.
WebAssembly modüllerini (derlenmiş kod) çalıştırma ve donanım için optimize edilmiş 2D ve 3D grafikler oluşturma dahil, mantık için JavaScript.
Düzen, stil ve animasyonlar için CSS.
PNG, JPEG, WebP ve SVG gibi web biçimlerindeki resimler.
MPEG-4 ve WebM gibi web biçimlerindeki videolar.
Web yazı tipleri.
JSON veya diğer biçimlerdeki veriler.

Varsayılan olarak, web siteleri öğeleri HTML ile başlayarak ve diğer kaynaklara devam ederek ağ üzerinden indirir.

Bu kaynakları hızlı yüklenecek ve çevrimdışı kullanılabilir olacak şekilde yönetmek web açısından zorlu bir işti. Günümüzde PWA'lar, önceden yalnızca platforma özel uygulamalarla ilişkilendirilen özellikleri kullanıyor.

Platforma özgü uygulamalar ile PWA'nın karşılaştırması

Platforma özel bir uygulama yüklediğinizde genellikle uygulamanın tüm öğelerini (kod, resimler, yazı tipleri, videolar vb.) içeren bir paket indirirsiniz. Bu nedenle, uygulama çevrimdışı olsa bile cihazınızın depolama alanındaki tüm bu kaynakları kullanabilirsiniz.

Diğer yandan, klasik bir web sitesinde gerektiğinde öğeleri indirmek için ağ bağlantısı gerekir. İnternete bağlı değilseniz istemci tarafında öğe olmadığından tarayıcıda bir hata mesajı görürsünüz.

PWA yaklaşımı, öğelerin bazılarını veya tümünü platforma özel uygulamalarda olduğu gibi istemci tarafında kullanılabilir hale getirerek geleneksel web deneyimini geliştirir. Bu nedenle, öğeler ağa gitmeden kullanılabileceğinden, PWA'yı açtığınızda ilk oluşturma işlemi platform uygulaması kadar anlık olabilir.

Önbellekler ve depolama alanı

Web ortaya çıktığından beri, geliştiriciler bir kaynağın önbelleğe alınma biçimi üzerinde tam bir denetime sahip değillerdi. Tarayıcı, HTTP önbelleğinden sorumludur ve farklı politikalara dayalı olarak kaynakları önbelleğe alıp sunmayabilir. Web Storage ve IndexedDB gibi diğer depolama seçenekleri basit veri ve nesnelerden tasarruf etmeyi amaçlıyordu.

PWA'ların içerikleri için yalnızca bu politikalara güvenmeleri gerekmez. Onun yerine şu anda kaynakların ne zaman ve nasıl önbelleğe alınacağını ve bunların yerel olarak ne zaman ve nasıl dağıtılacağını daha iyi kontrol etmenizi sağlayacak çözümler sunuyoruz: Cache Storage API. Web'de, istemci taraflı depolama çözümlerinden birkaçı bulunmaktadır:

Web depolama alanı: localStorage ve sessionStorage'ı içerir. Bu API'ler basit anahtar/değer dizesi çiftlerini depolar. Web depolama alanı sınırlıdır ve eşzamanlı bir API'ye sahiptir. Bu nedenle mümkün olduğunca kaçınılmalıdır.
IndexedDB: Web performansı için iyi olan, eşzamansız bir API'ye sahip nesne tabanlı veritabanı (No-SQL). IndexedDB, yapılandırılmış ve ikili verileri istemci tarafında depolayabilir. Bu genellikle, API isteği olarak alacağınız veya göndereceğiniz veriler gibi verileri depolamak için kullanacağınız dosyadır. Verileri hemen yerel olarak kaydetmek ve daha sonra sunucuyla senkronize etmek de yararlıdır. IndexedDB API, veritabanı ile etkileşim kurmak için kullanılır.
Önbellek depolama: Kaynakları, HTTP başlıklarıyla tam olarak sunucudan yayınlandıkları şekilde depolamak ve almak için kullanabileceğiniz bir HTTP istek ve yanıt çifti koleksiyonu. Cache Storage API'si, çevrimdışıyken bile öğeleriniz için ağ isteklerini (örneğin, öğeleriniz) depolamanıza, almanıza, güncellemenize ve silmenize olanak tanır.

Service Worker ihtiyacı

PWA, öğelerini Cache Storage ve IndexedDB'de depolayabilir, ancak bu öğeleri kullanıcılarınıza hızlı ve çevrimdışı bir deneyim sunmak için nasıl kullanabiliriz. Cevap? Service Worker'lar.

Service Worker sayesinde ağa gitmeden öğeler sunabilir, kullanıcılara bildirim gönderebilir, PWA simgenize rozet ekleyebilir, içeriği arka planda güncelleyebilir, hatta tüm PWA'nızın çevrimdışı çalışmasını sağlayabilirsiniz. Service Worker'lar hakkında daha fazla bilgiyi sonraki bölümde bulabilirsiniz.

Çevrimdışı kullanım için hazır

Kullanıcılar, uygulamanızın hızlı ve her zaman hazır bir deneyim sunmasını bekler. Bu, uygulamanızın çevrimdışı çalışması gerektiği anlamına gelir.

Çevrimdışı içeriklerin hazır olması, tüm içeriklerinizin veya hizmetlerinizin bir ağ bağlantısı olmadan kullanılabileceği anlamına gelmez. Bununla birlikte, kullanıcı çevrimdışıyken en azından internete bağlanmanızı isteyen bir sayfa (ör. devam etmek için internete bağlanmanızı isteyen bir sayfa) yaşamak daha iyi bir kullanıcı deneyimi sağlar. Böylece genel bir tarayıcı hatası yerine kullanıcının uygulamanızla yaşadığı deneyimin içinde kalmasını sağlarsınız. Bazı tarayıcılarda bu, PWA yükleme ölçütlerini geçmek için olmazsa olmaz bir özelliktir. Önbelleğe alınmış içerikle birlikte PWA'nızın kullanıcı arayüzünü görüntülemek daha iyidir. Kullanıcıların PWA'nızın tamamını kullanmaya devam etmesini sağlamak ve tekrar çevrimiçi olduklarında sunucu değişikliklerini senkronize etmek, çevrimdışı çalışma için en önemli standarttır.

Uygulamanızı çevrimdışı kullanılabilir hale getirmek için çevrimdışı deneyiminiz için gerekli öğeleri önbelleğe almanız ve hizmet çalışanınızın bunları daha sonra sunmasını sağlamanız gerekir. İhtiyaç duymadan önce çevrimdışı öğeleri önbelleğinize eklediğinizden emin olun. Bu, istendiğinde bunları önbelleğe alamayacağınız bir durumdur.

Sık kullanılan önbellek yaklaşımları

PWA'nızda tüm kararlar sizin kontrolünüzdedir. Öğeleri ihtiyaçlarınıza göre önbelleğe almak veya yüklemek için en iyi yaklaşımı seçebilirsiniz. Verilebilecek bazı kararlar şunlardır:

Önbelleğe alma: İlk yüklemede yüklemek istediğiniz öğeleri seçin. Bu öğeler, HTML'yi ve uygulamayı oluşturmak için gereken minimum öğeleri içermelidir. Ön önbellek kullanırken cihazın alanını ve ağını kullandığınızı unutmayın. Öğeleri indirirken ve önbelleğe alırken bilinçli ve sorumlu bir şekilde hareket edin.
Gerektiğinde önbellek: İstendiğinde önbelleğe öğe eklemek için kullanılır. Bunlar genellikle uygulama sürümünüzden bağımsız olarak değişebilen resim veya içerik gibi öğelerdir. Gerektiğinde önbelleğe almayla ilgili farklı stratejiler için önbelleğe alma bölümüne bakın.
API'ler ve web hizmetleri: API çağrıları önbelleğe alınabilir. API yanıtlarını önbelleğe almak yerine, bu verileri IndexedDB'de depolayabilirsiniz.

Öğeleri güncelleme

Uygulama kataloğunda yüklü uygulamalara yönelik standart uygulama modelinde, geliştiriciler uygulamalarını güncellemeleri gerektiğinde yeni bir paket yayınlar. Öğelerin çoğu değişmemiş olsa bile kullanıcıların, paketin tamamını tekrar indirmesi gerekir. PWA'larda, yukarıdaki bölümde yer alan yaklaşımlardan yararlanarak öğelerin nasıl ve ne zaman güncelleneceğine siz karar verirsiniz. Öğelerin nasıl güncelleneceğiyle ilgili farklı seçenekler aşağıda verilmiştir:

Tam Güncelleme: Bu durumda, küçük değişiklikler de dahil olmak üzere uygulamada her değişiklik yaptığınızda kodunuz, tüm öğeleri önbellekten tekrar indirir.
Kısmi Güncelleme: Bu yaklaşımda, hangi öğelerin güncellendiğini tanımlamak için bir yöntem oluşturursunuz ve kullanıcının müdahalesi olsa da olmasa da yalnızca bunları güncellersiniz.
Sürekli Güncelleme: Bu teknik kullanılarak öğeleriniz her PWA kullanımında ayrı ayrı otomatik olarak kontrol edilir ve güncellenir.

Boyut ve Kullanım Ömrü

Platforma özgü uygulamalar için genellikle boyut sınırlamaları söz konusu değildir; yükleme sırasında uygulamaların boyutu gigabayt veya daha büyük olabilir. Cihaz yeterli kapasiteye sahip olduğu sürece kuruluma izin verilir. Ayrıca, uygulama yüklüyken kullanmasanız da kullanmasanız da bu toplam depolama alanını kullanır. Depolama, PWA'lar için farklı şekilde işlenir. Tarayıcı, öğelerinizi PWA'nızın mantığında tanımladığınız politikalara göre depolar.

Boyut sınırları tarayıcıya bağlıdır. Platforma özel uygulamalar kadar esnek olmasa da çoğu web uygulaması için yeterince iyidir. Tarayıcıya göre uygulanan belirli sınırlamaları bu makalede bulabilirsiniz.

Tarayıcılar, depolama baskısına bağlı olarak veya kullanıcı, tarayıcıda PWA'nızı kullanıyorsa birkaç hafta boyunca işlem yapılmadığında öğeleri çıkarabilir. Bazı platformlarda, kullanıcı PWA'nızı yüklerse bu kaldırma işlemi gerçekleşmez. Kod, mümkün olduğunda bu çıkarmayı önlemek için API aracılığıyla kalıcı depolama alanı isteyebilir.