Adobe Experience Manager (AEM) web uygulamanıza modern bir Web deneyimi sunmak isteyen bir teknik lider veya dijital pazarlama analistiyseniz ve bunu yaparken kullanabileceğiniz seçenekleri arıyorsanız doğru makaleye geldiniz. Bu bölümde Progresif Web Uygulamalarının (PWA) ne olduğu ve AEM'de, kodlamaya gerek olmadan WorkBox kitaplığından yararlanarak WorkBox kitaplığından yararlanan bir PWA oluşturmak için ne yapmanız gerektiği ele alınır.
Neden PWA?
Progresif Web Uygulamaları, modern web'in yapabildiklerini kullanır. Bu uygulamalar cihazınıza yüklenebilir, hızlı bir şekilde yüklenir ve sonraki ziyaretler anında yüklenir. Girişlere hızlı yanıt verirler. Bu cihazlar güvenilir olmayan bir bağlantıda veya çevrimdışıyken iyi çalışır. PWA'lar; isteğe bağlı tam ekran kullanıcı arayüzü, arka planda güncelleme ve verilere çevrimdışı erişim ile uygulama benzeri etkileşimli bir deneyim sunmak için modern API'leri kullanır.
Bir web uygulamasını Progresif Web Uygulaması (PWA) haline getirmek için iki yapı eklemeniz gerekir:
- Web uygulaması manifesti: Uygulamanın giriş noktası URL'sini tanımlayan bir JSON yapılandırma dosyasıdır. PWA'yı ve uygulamanın nasıl göründüğünü ve davrandığını açıklayan diğer yapılandırmayı temsil etmek için kullanılan simge.
- Service Worker: PWA'nızın kullandığı kaynakları ve bunlara erişim stratejilerini tanımlayarak PWA'nızı zenginleştiren arka plan hizmetleri sağlayan komut dosyası.
Service Worker nedir?
Service Worker özünde, siz web uygulamanızla etkileşimde bulunurken tarayıcınızın bağımsız olarak çalıştığı bir komut dosyasıdır. Etkin bir hizmet çalışanı, Önbellek API'sini kullanarak akıllı önbelleğe alma, Arka Plan Senkronizasyonu API'sini kullanarak verileri güncel tutma ve push bildirimleriyle entegrasyon gibi hizmetler sunar. Doğru önbelleğe alma stratejisine sahip bir hizmet çalışanı, çeşitli senaryolarda istikrarlı ve güvenilir kullanıcı deneyimleri sunarak önceden önbelleğe alınmış kaynakları anında döndürür, verileri önbellekte depolar ve web’e bağlıyken kaynakları günceller.
Service Worker'ların sıfırdan yazılması zor olabilir. Çalışma kutusu, işleri kolaylaştırmak için oluşturuldu. Workbox, Cache Storage API'yi kullanarak Service Worker ve önbelleğe alma işlemlerini yazıp yönetmenize yardımcı olan bir dizi kitaplıktır. Service Worker'lar ve Cache Storage API'si birlikte kullanıldığında öğelerin (HTML, CSS, JS, görseller vb.) ağdan veya önbellekten nasıl isteneceğini kontrol eder ve çevrimdışıyken önbelleğe alınmış içeriği döndürmenizi sağlar. Workbox sayesinde üretime hazır kod sayesinde her ikisini ve daha fazlasını hızla ayarlayıp yönetebilirsiniz.
AEM sitesini PWA'ya yükseltme
Adobe Experience Manager (AEM); web siteleri, mobil uygulamalar, formlar ve dijital tabelalar oluşturmak için kullanılan kapsamlı bir içerik yönetimi çözümüdür. Pazarlama içeriğinizi ve öğelerinizi yönetmeyi kolaylaştırır.
AEM, web uygulamaları oluşturmak için zengin bir kitaplık sunsa da bir hizmet çalışanı ve manifest ekleyerek PWA oluşturmak şimdiye kadar zordu.
Adobe Experience Manager Siteleri, Adobe Experience Manager'ın parçası olan kullanıcı arayüzü oluşturma aracıdır. AEM Sites, bulut hizmeti olarak Adobe Experience Manager ile birlikte kullanıldığında mevcut herhangi bir AEM web sitesini veya tek sayfalık uygulamayı, sadece yapılandırma ve kodlama olmadan yüklenebilir, çevrimdışı özellikli bir Progresif Web Uygulaması'na dönüştürmeyi kolaylaştırır. Progresif Web Uygulamaları (Progresif Web Uygulamaları) için en iyi uygulamaları sunmak amacıyla Workbox'ı kullanır. Ayrıca, ortak manifest dosyaları ve hizmet çalışanları yazmanın karmaşıklığını soyutlar.
AEM, içeriklerin yerelleştirilmesini destekler. Bu sayede, farklı yerel ayarlar için farklı marka değerlerine ve hatta farklı çevrimdışı içeriklere sahip olabilirsiniz. Bunun için her dil uzmanı için farklı PWA yapılandırmaları oluşturun.
AEM'de PWA yapılandırmasını kullanmaya başlama
Adobe Experience Manager'a Bulut Hizmeti olarak giriş yapın ve herhangi bir Adobe Experience Manager Sites sayfasını veya dil ana kopyasını seçip özelliklerini tıklayın. Progresif Web Uygulaması adlı bir sekme görmeniz gerekir. (Not: Bu sekmeyi görmüyorsanız, bu özelliği etkinleştirmek için lütfen Adobe ile iletişime geçin.) Yalnızca birkaç tıklamayla Progresif Web Uygulamalarınızın yüklemesini, görünümünü ve tarzını yapılandırabilirsiniz.
AEM Sites eğitimlerini tamamladıysanız WKND sitesini daha önce görmüş olabilirsiniz. Bu makalede başlangıç noktası olarak WKND demosu kullanılmaktadır. İşiniz bittiğinde WKND'yi web uygulamasından PWA'ya (WorkBox'ı kullanarak) güncellemiş olacaksınız.
Manifest'i yapılandırma
Web uygulaması manifest dosyası, PWA'nın görünümünü ve davranışını tanımlayan özellikler içeren bir JSON dosyasıdır. Adobe Deneyim Yönetici Siteleri, özelliklerin yapılandırılması için kullanıcı dostu bir kullanıcı arayüzü sağlar.
Başlangıç URL'si, PWA'nızın giriş noktasıdır. Kullanıcı, telefonunda PWA simgesine dokunduğunda başlangıç URL'sine erişecektir. Görüntü modu, uygulamanın pencereli mi yoksa tam ekran deneyimi mi olacağını yapılandırır. Uygulamanın ekran yönünü de belirtebilirsiniz. Tema rengi, pencerenin ve araç çubuğunun rengidir. Arka plan rengi ise uygulama başlatıldığında başlangıç ekranının rengidir. Simge, uygulama cihaza yüklendiğinde cihazın ana ekranında veya uygulama çekmecesinde gösterilen resimdir. Resimde gösterilen yapılandırma, aşağıda gösterilen manifest JSON dosyasını oluşturur.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
Başlangıç URL'si, alanınızın varsayılan açılış sayfasından farklı olabilir. start_url parametresini değiştirerek, kullanıcılarınızı kimliği doğrulanmamış veya yeni bir kullanıcıya gösterilecek varsayılan sayfa yerine doğrudan uygulama deneyimine gönderebilirsiniz. Bu sayede PWA kullanıcıları daha akıcı ve uygulama benzeri bir deneyim yaşar.
AEM, farklı yerel ayarların farklı bir görünüm ve tarza sahip olabileceğini bilir. Farklı yerel ayarlar veya diller için farklı özellikler, renkler ve simgeler yapılandırabilir ve ardından yapılandırmayı bağlantı verilen sayfalarla senkronize edebilirsiniz.
Tarayıcıda PWA'ya erişildikten sonra, sağ tıklayıp inceleyerek Geliştirici Araçları'nı açabilir ve manifesti Uygulamalar panelinde görüntüleyebilirsiniz.
Hizmet çalışanını yapılandırma
İçeriği önbelleğe alınacak ve kullanılacak önbelleğe alma stratejisini yapılandırabilirsiniz.
Service Worker'ları kullanıyorsanız önbelleğe alma stratejileri hakkında bilgi sahibi olabilirsiniz. Önbelleğe alma stratejileri, hangi kaynakların önbelleğe alınacağını ve bu kaynakların önce önbellekte mi, önce ağda mı yoksa yedek ağ yedeğiyle önbellekte mi aranacağını belirtir. Ardından, Service Worker yüklendiğinde önceden önbelleğe alınacak kaynakları seçebilirsiniz. AEM Application hizmet çalışanları, hazır önbellek stratejisi uygular. Böylece, eksik veya bozuk bir yol belirleseniz bile kullanıcı deneyimi kesintiye uğramaz.
AEM'de "clientlibs" terimi istemci taraflı kitaplıkları, yani projenize eklenen ve istemci web tarayıcısı tarafından sunulan ve kullanılan ilgili JavaScript kaynaklarının, CSS'nin ve statik kaynakların kombinasyonu anlamına gelir. İstemci taraflı kitaplıklarınızı, bu kitaplıkları kullanıcı arayüzünde belirterek kolayca çevrimdışı kullanım için ayarlayabilirsiniz.
Yazı tipleri gibi üçüncü taraf kaynaklarını da dahil edebilirsiniz. Bu çevrimdışı önbellek yapılandırması, çalışma kutusunu dahili olarak kullanan uygulamanız için oluşturulan bir hizmet çalışanına yapılandırma bilgileri sağlar. Uygulamanızı yüklenebilir hale getirmek için yapmanız gereken neredeyse hepsi bu. Yüklendiğinde uygulama simgesi, tıpkı bir platform uygulaması gibi mobil cihazınızın ana ekranında görünür. Simgeyi tıkladığınızda, haftalık siteye erişirsiniz.
İçeriğinizi veya bu ayarları istediğiniz zaman değiştirebileceğinizi lütfen unutmayın. Değişikliklerinizi yayınladığınızda, Service Worker istemcide tarayıcı tarafından güncellenir ve kullanıcıya PWA'nın daha yeni bir sürümünün olduğunu belirten bir mesaj gösterilir. Kullanıcı, uygulamayı yeniden yüklemek ve en son güncellemeleri almak için mesajı tıklayabilir. Service Worker ayrıntılarını görüntülemek için tarayıcı geliştirici araçları ve uygulamalar panelini açabilirsiniz.
Yerel olarak önbelleğe alınan içeriği görüntülemek için önbellek depolama alanını genişletebilirsiniz:
Sonuçlar
Sıkı çalışmanızın sonuçlarına bakmanın zamanı geldi. Sadece yapılandırma ile ve kodlama olmadan AEM sitenizi Progresif Web Uygulaması olmak üzere geliştirdiniz.
Chrome geliştirici araçları, web uygulamanızın ve yapılandırmanızın Progresif Web Uygulaması standartlarıyla ne kadar uyumlu olduğunu kontrol etmenizi sağlayan bir deniz feneri denetimi sağlar.
Sonuç
Progresif Web Uygulamaları, web siteniz için, dağıtım üzerinde denetim sağlarken geliştirme ve bakım maliyetlerini düşürerek web'in çapraz platformunu ve açık yapısını kullanan, uygulamaya benzer bir deneyim sunar. Bu, etkileşimi ve elde tutma oranını artırır ve en önemlisi, daha yüksek dönüşüm oranları sağlar. Workbox ile birlikte AEM, sadece yapılandırma ve kodlama olmadan mevcut sitenizi PWA'ya dönüştürmenizi kolaylaştırır.
Referanslar
- WKND Eğitimi
- Hizmet Çalışanları
- Önbellek API'sı
- Web uygulaması manifesti
- PWA'larda maskelenebilir simgelerle uyarlanabilir simge desteği
- Adobe Experience Manager siteleri hakkında daha fazla bilgi
- Workbox hakkında daha fazla bilgi edinin:
- Çalışma Kutusu Önbelleğe Alma stratejileri:
- Progresif Web Uygulamaları hakkında daha fazla bilgi edinin.