Adobe Experience Manager (AEM) web uygulamanıza modern bir web deneyimi sunmak isteyen ve bunu yaparken yararlanabileceğiniz seçenekleri arayan bir teknik yönetici veya dijital pazarlama analistiyseniz doğru makaleye geldiniz. Bu eğitimde, progresif web uygulamalarının (PWA) ne olduğu ve kodlama yapmadan, yapılandırma yoluyla WorkBox kitaplığından yararlanarak AEM'de PWA oluşturmak için nelerin gerekli olduğu ele alınmaktadır.
Neden PWA?
Progresif Web Uygulamaları, modern web'in yapabileceklerinden yararlanır. Bunlar cihazınıza yüklenebilir, hızlı bir şekilde yüklenir ve sonraki ziyaretler anında yüklenir. Girişlere hızlıca yanıt verirler. Bu uygulamalar, güvenilir olmayan bir bağlantıda veya internete bağlı değilken iyi çalışır. PWAs, isteğe bağlı tam ekran kullanıcı arayüzü, arka planda güncelleme ve verilere çevrimdışı erişim gibi özelliklerle uygulama benzeri ilgi çekici bir deneyim sunmak için modern API'leri kullanır.
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ı 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ırmaları tanımlayan bir JSON yapılandırma dosyasıdır.
- 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?
Hizmet çalışanları temelde, web uygulamanızla etkileşim kurarken tarayıcınızın bağımsız olarak çalıştıracağı 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 sağlar. Doğru önbelleğe alma stratejisine sahip bir hizmet çalışanı, önceden önbelleğe alınmış kaynakları anında döndürerek, verileri önbellekte saklayarak ve web'e bağlıyken kaynakları güncelleyerek çeşitli senaryolar için kararlı ve güvenilir kullanıcı deneyimleri sağlar.
Hizmet çalışanlarını sıfırdan yazmak zor olabilir. Workbox, bu süreci kolaylaştırmak için tasarlanmıştır. Workbox, hizmet çalışanları yazmanıza ve yönetmenize ve Cache Storage API ile önbelleğe almanıza yardımcı olan bir kitaplık paketidir. Birlikte kullanıldığında hizmet çalışanları ve Cache Storage API, öğelerin (HTML, CSS, JS, resimler vb.) ağdan veya önbellekten nasıl isteneceğini kontrol eder. Hatta çevrimdışıyken önbelleğe alınmış içeriği döndürmenize bile olanak tanır. Workbox ile üretime hazır kod kullanarak bu ikisini ve daha fazlasını hızlıca ayarlayabilir ve yönetebilirsiniz.
AEM sitesini PWA'ya yükseltme
Adobe Experience Manager (AEM), web siteleri, mobil uygulamalar, formlar ve dijital tabelalar oluşturmak için kapsamlı bir içerik yönetimi çözümüdür. Pazarlama içeriğinizi ve öğelerinizi yönetmenizi 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 Experience Manager'ın 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 AEM web sitelerini veya tek sayfalık uygulamaları kodlama gerektirmeden yalnızca yapılandırmayla çevrimdışı olarak kullanılabilen Progressive Web Uygulamalarına dönüştürmeyi kolaylaştırır. Progresif web uygulamaları için en iyi uygulamaları sunmak amacıyla Workbox'u kullanır ve şablon manifestler ile hizmet çalışanları yazmanın karmaşıklığını soyutlar.
AEM, içeriğin yerelleştirilmesini destekler. Bu sayede farklı yerel ayarlar için farklı markalaşma ve hatta farklı çevrimdışı içeriklere sahip olabilirsiniz. Bunu yapmak için her ana dil 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, herhangi bir Adobe Experience Manager Sites sayfasını veya dil ana sayfasını seçin ve mülkleri tıklayın. Progressive Web App (İlerlemeli Web Uygulaması) adlı bir sekme göreceksiniz. (Not: Bu sekmeyi görmüyorsanız lütfen bu özelliği etkinleştirmek için Adobe ile iletişime geçin.) Progresif web uygulamalarınızın yükleme işlemini ve görünümünü yalnızca birkaç tıklamayla 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 WorkBox kullanarak bir web uygulaması olan WKND'yi PWA'ya güncellemiş olacaksınız.
Manifest dosyasını yapılandırma
Web uygulaması manifesti, 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, mülkleri 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ıya gösterilen varsayılan sayfa yerine doğrudan uygulama deneyimine gönderebilirsiniz. Bu sayede PWA kullanıcıları daha akıcı ve uygulamaya benzer bir deneyim yaşar.
AEM, farklı yerel ayarların farklı bir görünüme ve tarza sahip olabileceğini bilir. Farklı yerel ayarlar veya diller için farklı özellikler, renkler ve simgeler yapılandırabilir, ardından yapılandırmayı bağ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 Uygulamalar panelinin altında manifest dosyasını 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.
Hizmet işçilerini 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 ağ yedeğiyle birlikte önbellekte mi aranacağını belirtir. Ardından, hizmet çalışanı yüklendiğinde ön önbelleğe alınacak kaynakları seçebilirsiniz. AEM uygulama hizmet işçileri, sıcak önbellek stratejisi uygular. Bu, eksik veya bozuk bir yol belirtseniz bile kullanıcı deneyiminin bozulmayacağı anlamına gelir.
AEM'de "clientlibs" terimi, istemci tarafı kitaplıkları ifade eder: Projenize eklenen ve istemci web tarayıcısı tarafından sunulan ve kullanılan ilgili JavaScript, CSS ve statik kaynakların birleşimidir. İstemci tarafı kitaplıklarınızı kullanıcı arayüzünde belirterek kolayca çevrimdışı olarak kullanılacak şekilde ayarlayabilirsiniz.
Yazı tipleri gibi üçüncü taraf kaynakları da ekleyebilirsiniz. Bu çevrimdışı önbellek yapılandırması, uygulamanız için oluşturulan ve dahili olarak workbox kullanan bir hizmet çalışanına yapılandırma bilgileri sağlar. Uygulamanızı yüklenebilir hale getirmek için yapmanız gerekenler bu kadardır. 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ı dilediğiniz zaman değiştirebileceğinizi hatırlatmak isteriz. 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üklemek ve en son güncellemeleri almak için mesajı tıklayabilir. Servis ç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ınmış içeriği görüntülemek için önbellek depolama alanını genişletebilirsiniz:
Sonuçlar
Yoğun çalışmanızın sonuçlarını inceleme zamanı geldi. Yalnızca yapılandırmayla ve kodlama yapmadan AEM sitenizi bir Progressive Web Uygulaması haline getirdiniz.
Chrome Geliştirici Araçları, web uygulamanızın ve yapılandırmanızın Progresif Web Uygulaması standartlarına ne kadar uygun olduğunu kontrol etmenizi sağlayan bir Lighthouse 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, mevcut sitenizi kodlama yapmadan yalnızca yapılandırmayla PWA'ya dönüştürmeyi kolaylaştırır.
Referanslar
- WKND Eğitimi
- 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.