Adobe Deneyim Yöneticisi (AEM) web uygulamanıza modern bir Web deneyimi sunmak isteyen bir teknik şef veya dijital pazarlama analistiyseniz ve bunun için size sunulan seçenekleri arıyorsanız, doğru makaleye ulaştınız. Bu bölümde, Progresif Web Uygulamalarının (PWA) ne olduğu ve WorkBox kitaplığını kodlamaya gerek olmadan yapılandırma yoluyla kullanarak AEM'de PWA oluşturmak için nelere ihtiyaç duyulduğunu ele alacağız.
Neden PWA?
Progresif Web Uygulamaları, modern web'in olanaklarından yararlanır. Bunlar cihazınıza yüklenebilir, hızlı yüklenir ve sonraki ziyaretler anında yüklenir. Girişlere hızlıca yanıt verirler. Bu özellikler, güvenilir olmayan bir bağlantıda veya çevrimdışıyken iyi performans gösterir. PWA'lar modern API'leri kullanarak isteğe bağlı tam ekran kullanıcı arayüzü, arka planda güncelleme ve verilere çevrimdışı erişim gibi ilgi çekici bir uygulama deneyimi sunar.
Bir web uygulamasını Progresif Web Uygulaması'na dönüştürmek için iki yapı eklemeniz gerekir:
- Web uygulaması manifesti: Uygulamanın giriş noktası URL'sini, PWA'yı (PWA) temsil etmek için kullanılan simge ve uygulamanın nasıl göründüğünü ve davrandığını açıklayan diğer yapılandırmayı tanımlayan bir JSON yapılandırma dosyası.
- Service Worker: PWA'nızın kullandığı kaynakları ve bunlara erişme stratejilerini tanımlayarak PWA'nızı zenginleştiren arka plan hizmetleri sağlayan bir komut dosyası.
Service Worker nedir?
Service Worker özünde, siz web uygulamanızla etkileşim kurarken tarayıcınızın bağımsız olarak çalıştırdığı bir komut dosyasıdır. Etkin bir hizmet çalışanı, Cache API'yi kullanarak akıllı önbelleğe alma, background Sync API'yi kullanarak verileri güncel tutma ve push bildirimleriyle entegrasyon gibi hizmetler sunar. Doğru önbelleğe alma stratejisine sahip olan bir hizmet çalışanı, çeşitli senaryolar için istikrarlı ve güvenilir kullanıcı deneyimleri sağlar, önceden önbelleğe alınmış kaynakları anında döndürür, verileri önbellekte depolar ve web'e bağlandığında kaynakları günceller.
Service Worker'ları sıfırdan yazmak zor olabilir. Çalışma kutusu bunu kolaylaştırmak için oluşturuldu. Workbox, Cache Storage API ile hizmet çalışanlarını ve önbelleğe almayı yazıp yönetmenize yardımcı olacak bir kitaplık grubudur. Hizmet çalışanları ve Cache Storage API, birlikte kullanıldığında öğelerin (HTML, CSS, JS, görüntüler vb.) ağdan veya önbellekten nasıl istendiğini kontrol eder. Hatta çevrimdışıyken önbelleğe alınan içeriği geri döndürebilirsiniz. Workbox ile üretime hazır kodla her ikisini de ve daha fazlasını hızlıca kurup yönetebilirsiniz.
AEM sitesini PWA'ya yükseltme
Adobe Experience Manager (AEM); web sitesi, mobil uygulamalar, form ve dijital tabelalar oluşturmaya yönelik 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ı derlemek için zengin bir kitaplık sağlasa da, hizmet çalışanı ve manifest ekleyerek PWA oluşturmak şu ana kadar zordu.
Adobe Experience Manager Sites, Adobe Deneyim Yöneticisi'nin bir parçası olan kullanıcı arayüzü oluşturma aracıdır. Bulut hizmeti olarak Adobe Experience Manager ile birlikte kullanıldığında AEM Sites, mevcut herhangi bir AEM web sitesini veya tek sayfalık uygulamasını, yalnızca yapılandırmayla ve kodlama olmadan yüklenebilir, çevrimdışı özellikli bir Progresif Web Uygulamasına dönüştürmeyi kolaylaştırır. Workbox'ı progresif web uygulamalarına yönelik en iyi uygulamaları sunmak için kullanır ve ortak metin manifestlerini ve hizmet çalışanlarını yazmanın karmaşıklığını soyutlar.
AEM, içeriğin yerelleştirilmesini destekler. Bu sayede, farklı yerel ayarlar için farklı marka bilinci oluşturma ve hatta farklı çevrimdışı içeriklere sahip olabilirsiniz. Bunu yapmak üzere her dil uzmanı için farklı PWA yapılandırmaları oluşturun.
AEM'de PWA yapılandırmasını kullanmaya başlama
Bulut Hizmeti olarak Adobe Experience Manager'a giriş yapın ve herhangi bir Adobe Experience Manager Sites sayfasını veya dil ana ve tıklama özelliklerini seçin. Progresif Web Uygulaması adlı bir sekme görürsünüz. (Not: Bu sekmeyi görmüyorsanız, ö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 kurulumunu ve görünümünü ve tarzını yapılandırabilirsiniz.
AEM Sites eğiticilerini tamamladıysanız WKND sitesini daha önce görmüş olabilirsiniz. Bu makalede başlangıç noktası olarak WKND demosu kullanılmaktadır. İşiniz bittiğinde WorkBox kullanarak bir web uygulaması olan WKND'yi PWA'ya güncellemiş olacaksınız.
Manifest dosyasını yapılandırma
Web uygulaması manifesti, PWA'nın görünümünü ve davranışını açıklayan özellikleri içeren bir JSON dosyasıdır. Adobe Deneyim Yöneticisi Siteleri, özellikleri yapılandırmak için kullanıcı dostu bir 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şmiş olur. 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ının sunulacağı varsayılan sayfa yerine doğrudan uygulama deneyimine gönderebilirsiniz. Bu da PWA kullanıcılarına daha sorunsuz ve uygulamaya benzer bir deneyim sunar.
AEM, farklı yerel ayarların farklı bir görünüm ve izlenime 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ılı sayfalarla senkronize edebilirsiniz.
Tarayıcıda PWA'ya erişildikten sonra sağ tıklayıp inceleyerek Geliştirici Araçları'nı açabilir ve manifest'i Uygulamalar panelinde görüntüleyebilirsiniz.
Hizmet çalışanını yapılandırma
İçeriği önbelleğe alacak ve kullanılacak önbelleğe alma stratejisini yapılandırabilirsiniz.
Service Worker'ları kullanıyorsanız önbelleğe alma stratejilerine aşina 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 bir ağ yedeğiyle önbellekte mi aranacağını belirler. Ardından, hizmet çalışanı yüklendiğinde ön önbelleğe alınacak kaynakları seçebilirsiniz. AEM Uygulama hizmeti çalışanları, eksik veya bozuk bir yol belirtseniz bile kullanıcı deneyiminin bozulmeyeceği hazır önbellek stratejisi uygular.
AEM'de "clientlibs" terimi istemci tarafı Kitaplıkları ifade eder: projenize eklenmiş, istemci web tarayıcısına sunulan ve on tarafından kullanılan ilgili JavaScript, CSS ve statik kaynakların kombinasyonu. İstemci tarafı kitaplıklarınızı, çevrimdışı kullanılacak şekilde kullanıcı arayüzünde belirterek kolayca ayarlayabilirsiniz.
Yazı tipleri gibi üçüncü taraf kaynakları da ekleyebilirsiniz. Bu çevrimdışı önbellek yapılandırması, dahili olarak çalışma kutusunu kullanan ve 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 bu. Yüklendikten sonra uygulama simgesi, mobil cihazınızın ana ekranında bir platform uygulaması gibi görünür. Simgeyi tıkladığınızda ikinci 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 hizmet çalışanı, istemcide tarayıcı tarafından güncellenir ve kullanıcıya PWA'nın daha yeni bir sürümünün mevcut olduğunu belirten bir mesaj gösterilir. Kullanıcı, uygulamayı yeniden yükleyip en son güncellemeleri almak için mesajı tıklayabilir. Hizmet çalışanı 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
Emeklerinizin sonuçlarını görmenin zamanı geldi. Sadece yapılandırma ile ve kodlama olmadan AEM sitenizi bir Progresif Web Uygulaması olacak şekilde 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 etmenize olanak tanıyan bir deniz feneri denetimi sağlar.
Sonuç
Progresif Web Uygulamaları, web siteniz için uygulama benzeri bir deneyim sunar. Bu deneyim, dağıtım üzerinde kontrol sağlarken geliştirme ve bakım maliyetiyle web'in çapraz platformlarını ve açık yapısını kullanır. Bu, etkileşimi ve elde tutma oranını artırır ve en önemlisi daha yüksek dönüşüm oranları sağlar. AEM, Workbox ile birlikte yalnızca yapılandırmayla ve kodlamayla mevcut sitenizi PWA'ya (Progresif Web Uygulaması) dönüştürmenizi kolaylaştırır.
Referanslar
- WKND Eğiticisi
- Hizmet çalışanları
- Önbellek API'si
- Web uygulaması manifesti
- Maskelenebilir simgeler içeren PWA'larda uyarlanabilir simge desteği
- Adobe Deneyim Yöneticisi Siteleri hakkında daha fazla bilgi edinin
- Workbox hakkında daha fazla bilgi:
- Çalışma Kutusu Önbelleğe Alma stratejileri:
- Progresif Web Uygulamaları hakkında daha fazla bilgi edinin.