Adobe Experience Manager (AEM) web uygulamanıza modern bir Web deneyimi sağlamakla ilgilenen bir teknik lider veya dijital pazarlama analistiyseniz ve bunu yaparken seçeneklerinizi araştırıyorsanız doğru makaleye geldiniz. Bu, Progresif Web Uygulamalarının (PWA) ne olduğunu ve AEM’de kodlama olmadan yapılandırma yoluyla WorkBox kitaplığından yararlanan bir PWA oluşturmak için neye ihtiyacınız olduğunu kapsayacaktır.
Neden PWA? #
Aşamalı Web Uygulamaları, modern web’in yapabileceklerinden yararlanır. Cihazınıza yüklenebilirler, hızla yüklenirler ve sonraki ziyaretler anında yüklenir. Girişe hızlı bir şekilde yanıt verirler. Güvenilmez bir bağlantıda veya çevrimdışıyken iyi çalışırlar. PWA’lar, isteğe bağlı tam ekran kullanıcı arabirimi, arka planda güncelleme ve verilere çevrimdışı erişim ile ilgi çekici bir uygulama benzeri deneyim sağlamak için modern API’leri kullanır.
Bir web uygulamasını Progresif Web Uygulamasına dönüştürmek için iki yapının eklenmesi gerekir:
- Bir web uygulaması bildirimi: uygulamanın giriş noktası URL’sini, PWA’yı temsil etmek için kullanılan simgeyi 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ı.
- Hizmet çalışanı: PWA’nızın kullandığı kaynakları ve bunlara erişim stratejilerini tanımlayarak PWA’nızı zenginleştiren arka plan hizmetleri sağlayan bir komut dosyası.
hizmet görevlisi nedir? #
Özünde bir hizmet çalışanı, siz web uygulamanızla etkileşimde bulunurken tarayıcınızın bağımsız olarak çalıştırdığı bir betikten ibarettir. Etkin bir hizmet çalışanı, Önbellek API’sini kullanarak akıllı önbelleğe alma, Background Sync API’yi kullanarak verileri güncel tutma ve push bildirimleriyle entegrasyon gibi hizmetler sağlar. Doğru önbelleğe alma stratejisine sahip 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.
Hizmet çalışanlarının sıfırdan yazması zor olabilir. Workbox kolaylaştırmak için oluşturuldu. Workbox, yazmanıza ve yönetmenize yardımcı olacak bir dizi kitaplıktır. hizmet çalışanları ve Cache Storage API ile önbelleğe alma. Hizmet çalışanları ve Önbellek Depolama API’si birlikte kullanıldığında, varlıkların (HTML, CSS, JS, resimler vb.) ağdan veya önbellekten nasıl istendiğini kontrol eder, hatta çevrimdışıyken önbelleğe alınan içeriği döndürmenize olanak tanır. Workbox ile, üretime hazır kodla her ikisini ve daha fazlasını hızla kurabilir ve yönetebilirsiniz.
AEM sitesini PWA’ya yükseltme #
Adobe Deneyim Yöneticisi (AEM), web siteleri, mobil uygulamalar, formlar ve bilgi ekranı oluşturmaya yönelik kapsamlı bir içerik yönetimi çözümüdür. Pazarlama içeriğinizi ve varlıklarınızı yönetmeyi kolaylaştırır.
AEM, web uygulamaları oluşturmak için zengin bir kitaplık sağlarken, şimdiye kadar bir hizmet çalışanı ve bir bildirim ekleyerek bir PWA oluşturmak zordu.
Adobe Experience Manager Sites, Adobe Experience Manager’ın bir parçası olan kullanıcı arabirimi oluşturma aracıdır. Bir bulut hizmeti olarak Adobe Experience Manager ile birlikte kullanıldığında AEM Sites, herhangi bir mevcut AEM web sitesini veya tek sayfa uygulamasını, yalnızca yapılandırmayla ve kodlama gerektirmeden yüklenebilir, çevrimdışı özellikli Progressive Web App’e dönüştürmeyi kolaylaştırır. Progresif Web Uygulamaları için en iyi uygulamaları sunmak üzere Workbox’ı kullanır ve basmakalıp manifestolar ve hizmet çalışanları yazmanın karmaşıklığını özetler.
AEM, içeriğin yerelleştirilmesini destekler; bu, farklı yerel ayarlar için farklı markalara ve hatta farklı çevrimdışı içeriğe sahip olabileceğiniz anlamına gelir. Bunu yapmak için her ana dil için farklı PWA yapılandırmaları oluşturun.
AEM’de PWA yapılandırmasına başlarken #
Bir Bulut Hizmeti olarak Adobe Experience Manager’da oturum açın ve herhangi bir Adobe Experience Manager Sites sayfası veya ana dil ve tıklama özelliklerini seçin. Aşamalı Web Uygulaması adlı bir sekme görmelisiniz. (Not: Bu sekmeyi görmüyorsanız, bu özelliği etkinleştirmek için lütfen Adobe ile iletişime geçin.) Progresif Web Uygulamalarınızın kurulumunu ve görünümünü yalnızca birkaç tıklamayla yapılandırabilirsiniz.
AEM Sites eğitimlerini tamamladıysanız, muhtemelen WKND sitesini daha önce görmüşsünüzdür. Bu makale, WKND Başlangıç noktası olarak demo. İşiniz bittiğinde, WKND’yi bir web uygulamasından WorkBox kullanarak bir PWA’ya güncellemiş olacaksınız.
Bildirimi yapılandırın #
Web uygulaması bildirimi, bir PWA’nın görünümünü ve davranışını açıklayan özellikleri içeren bir JSON dosyasıdır. Adobe Experience Manager Sites, ö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. Bir kullanıcı telefonunda PWA simgesine dokunduğunda başlangıç URL’sine erişiyor olacaktır. Görüntüleme modu, uygulamanın pencereli mi yoksa tam ekranlı bir deneyim mi olacağını yapılandırır. Ayrıca uygulamanın ekran yönünü de belirleyebilirsiniz. Tema rengi, pencerenin ve araç çubuğunun rengidir, arka plan rengi ise uygulama başlatıldığında açılış ekranının rengidir. Simge, uygulama cihaza yüklendiğinde cihazın ana ekranında veya uygulama çekmecesinde gösterilen görüntüdür. Resimde gösterilen yapılandırma, aşağıda gösterilen manifest JSON’u 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 adınız için varsayılan açılış sayfasından farklı olabilir. değiştirerek start_url parametresi ile 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, PWA kullanıcılarına daha sorunsuz, daha uygulama benzeri bir deneyim sağlar.
AEM, farklı yerel ayarların farklı bir görünüme ve hisse sahip olabileceğinin farkındadır. 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, DevTools’u getirmek ve Uygulamalar panelinin altındaki bildirimi görüntülemek için sağ tıklayıp inceleyebilirsiniz.
Hizmet çalışanını yapılandırma #
Önbelleğe alınacak içeriği ve kullanılacak önbelleğe alma stratejisini yapılandırabilirsiniz.
Servis çalışanları kullanıyorsanız, aşina olabilirsiniz. önbelleğe alma stratejileri. Ö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ğ geri dönüşü ile önbellekte mi aranacağını belirtir. Ardından, hizmet çalışanı yüklendiğinde ön önbelleğe alınacak kaynakları seçebilirsiniz. AEM Uygulama hizmeti çalışanları bir sıcak önbellek stratejisi bu, eksik veya bozuk bir yol belirtseniz bile kullanıcının deneyiminin bozulmayacağı anlamına gelir.
AEM’de “clientlibs” terimi, istemci tarafı Kitaplıkları anlamına gelir: ilgili JavaScript, CSS ve projenize eklenmiş, istemci web tarayıcısı tarafından sunulan ve onun tarafından kullanılan statik kaynakların birleşimi. Kullanıcı arabiriminde bu kitaplıkları belirterek, istemci tarafı kitaplıklarınızı kolayca çevrimdışı kullanılacak şekilde ayarlayabilirsiniz.
Yazı tipleri gibi üçüncü taraf kaynakları 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 gerekenler bu kadar. Kurulduktan sonra, uygulama simgesi tıpkı bir platform uygulaması gibi mobil cihazınızın ana ekranında görünecektir. Simgeye tıklamak wknd sitesine erişecektir.
Lütfen içeriğinizi veya bu ayarları istediğiniz zaman değiştirebileceğinizi unutmayın. Değişikliklerinizi yayınladığınızda, servis çalışanı tarayıcı tarafından istemcide güncellenecek ve kullanıcıya PWA’nın daha yeni bir sürümünün mevcut olduğuna dair bir mesaj sunulacaktır. Kullanıcı, uygulamayı yeniden yüklemek ve 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 #
Sıkı çalışmanızın sonuçlarına bakma zamanı. Yalnızca yapılandırmayla ve kodlama olmadan, AEM sitenizi 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 etmenizi sağlayan bir deniz feneri denetimi sağlar.
Çözüm #
Aşamalı Web Uygulamaları, web siteniz için uygulama benzeri bir deneyim sağlar; web’in çapraz platformunu ve açık doğasını daha düşük bir geliştirme ve bakım maliyetiyle kullanırken dağıtım üzerinde kontrol sağlar. Bu, etkileşimi, elde tutmayı geliştirir ve en önemlisi, daha yüksek dönüşüm oranları sağlar. Workbox ile birlikte AEM, yalnızca yapılandırmayla ve kodlama gerektirmeden mevcut sitenizi bir PWA’ya dönüştürmeyi kolaylaştırır.