Progresif Web Uygulamaları ve Drupal 9'da Uygulama hakkında her şey

İnternet ilk olarak 1960'larda ordu ve bilim adamları için daha iyi iletişim amacıyla inşa edildi. Kısa süre sonra Web 1990'larda devrimci bir fenomene dönüştü ve o zamandan beri durdurulamaz oldu. Web'in amacı değişmeye devam etse de, sabit kalan bir amaç kolaylıktı.

Kolaylık ihtiyacı, internete erişmenin birçok yenilikçi yolunu beraberinde getirdi. Yerel mobil uygulamalar ve Web uygulamaları, internette gezinmeyi kolay ve kullanışlı hale getiren bu tür iki teknolojidir. Bu yazımızda Progressive Web Apps ve bunu Drupal Progressive Web App modülünü kullanarak Drupal ile nasıl uygulayabileceğinizden bahsedeceğiz. Ancak tüm bunlara dalmadan önce, yerel ve web uygulamalarının özelliklerine ve aşamalı web uygulamalarının boşlukları nasıl doldurduğuna bakalım.

Yerel Mobil Uygulamaların Özellikleri

• Platforma özel uygulamalardır. Bu aynı zamanda her yeni platform (iOS, Android) için yeniden oluşturulmaları gerektiği anlamına gelir.
• İndirilmesi gerekiyor.
• Genellikle süper hızlı.
• Özellikler ve işlevler açısından zengin.
• Herhangi bir cihaza sorunsuz bir şekilde karışabilir ve onun bir parçası gibi hissedebilir.
• Çevrimdışı çalışabilir.
• Cihaz verilerine, cihaz donanımına ve yerel dosya sistemine kolayca erişebilirler.
• Geliştirmek, sürdürmek ve yükseltmek için daha pahalı.
• Güvenlik için önceden onaylanmıştır ve Uygulama mağazalarından indirilebilir.
• Arama motorlarının taraması zor.

Web Uygulamalarının Özellikleri

• Platforma bağlı değildir. Tüm bunlara erişmek için bir tarayıcıya ihtiyacınız var. Çoğu modern tarayıcıyı destekler. İndirilmesi gerekmez.
• Bunları geliştirmek için özel bir SDK yok. Ön uç, arka uç için HTML, CSS, JavaScript ve bir LAMP veya bir MEAN yığını kullanılarak geliştirilmiştir.
• Yükseltmeye gerek yok. Daha az geliştirme ve bakım maliyetleri.
• Kimlik doğrulamaya ihtiyaç duysa da, yetkisiz erişime açık olabileceğinden güvenlik bir sorundur.
• Çevrimdışı çalışmazlar ve yerel mobil uygulamalardan daha yavaş olabilirler.
• Uygulama mağazalarında listelenmezler, bu nedenle onları keşfetmek daha zor olabilir.

Aşamalı Web Uygulamaları nedir ve boşluğu nasıl doldururlar?

Kısacası, yerel web uygulamaları oldukça yeteneklidir ancak erişim açısından yetersizdir. Oysa web uygulamaları daha geniş bir erişime sahiptir ancak yeteneklerden yoksundur. İşte tam da bu noktada Aşamalı Web Uygulamaları boşlukları kapatmak için devreye giriyor.

Aşamalı Web Uygulamaları, yerel uygulamaların ve web uygulamalarının avantajlarının ideal bir birleşimidir. Modern web özelliklerini kullanan Aşamalı web uygulamaları (PWA), kullanıcılara uygulama benzeri deneyimler sunabilir. Çoğu modern tarayıcının sunduğu özellikleri mobil deneyimlerin avantajlarıyla birleştirir. Yerel uygulama benzeri, son derece karmaşık ve yüklenebilir uygulamalar oluşturabilirsiniz. Web Assembly'nin artık çoğu tarayıcı tarafından desteklenmesiyle, PWA'lar geliştiricinin tercih ettiği dillerde oluşturulabilir, böylece sunabileceği işlevlerin kapsamını ve esnekliğini büyük ölçüde artırır.

Aşamalı Web Uygulamalarının Özellikleri

• Platformdan ve cihazdan bağımsızdırlar. Herhangi bir tarayıcıda güzel çalışır.
• Hızlı yüklenirler ve son derece güvenilirdirler (düşük internet hızında bile). Kaydırma çok düzgün ve akıcı.
• Çevrimdışı da çalışabilir.
• Yerel uygulama benzeri anında iletme bildirimleri etkinleştirilebilir.
• Cihaz donanımına ve yerel uygulamalar gibi verilere erişebilir.
• Kullanıcının ana ekranına kısayollar eklenebilir (indirmek yerine)
• Karmaşık kurulumlara gerek yok. URL'leri kolayca paylaşabilir.
• Tüm cihazlarda duyarlı.
• Geliştirmeleri daha kolay ve hızlıdır. Bakımı da kolaydır.

Drupal'daki PWA modülünden bahsetmeden önce, bir PWA oluşturmak için minimum gereksinimlere bakalım -

• HTTPS üzerinden çalıştırılmalıdır.
• Service Worker içermelidir – Service Worker, tarayıcıda https üzerinden çalışan ve tarayıcı erişimi sağlayan bir komut dosyasıdır (javascript). Çevrimdışı içerik teslimi, anında iletme bildirimleri vb. gibi yerel uygulama benzeri özellikler sağlar.
• Web uygulaması hakkında ad, açıklama, yazar ve daha fazlası gibi bilgileri içeren meta verileri içeren bir JSON dosyası olan bir Web Uygulaması Bildirimi olmalıdır. Bu aynı zamanda arama motoru optimizasyonu için de yararlıdır.

PWA Drupal Modülü – Drupal 9 (ve 8) ile Aşamalı Web Uygulamaları Nasıl Yapılır

Drupal PWA modülünün kurulumu kolaydır, Service Worker (önbelleğe alma ve diğer çevrimdışı uygulama benzeri yetenekler için) ve yapılandırabileceğiniz Manifest.js ile birlikte gelir. Ancak PWA yükleme işlemine başlamadan önce SSL'nin kurulu olduğundan emin olmanız gerekir. Gereksiniminiz tonlarca özelleştirmeyle son derece spesifikse, Angular veya React gibi ön uç çerçeveleri kullanarak PWA'yı geliştirebilir ve kendi Servis çalışanınızı özelleştirebilirsiniz.

PWA Drupal 9 Modülünü Kurma

Drupal 7 ile Progressive Web App Drupal modülünü kurmak, modülü indirip etkinleştirmek kadar kolaydı. Manifest.js dosyasını bir yapılandırma formu aracılığıyla oluşturabilir ve doğrulayabilirsiniz. Ancak Drupal 9'da bu işlevi yalnızca PWA modülünü etkinleştirerek doğrudan entegre edemeyiz. Bunun nedeni size manfest.js dosyasını yapılandırma seçeneği sunmuyor.

1. PWA Drupal modülünü indirip etkinleştirerek modülü kurun.

2. Drupal 9 için bu yamayı uygulayın

3. İşiniz bittiğinde, konfigürasyon -> PROGRESİF WEB UYGULAMASI -> PWA ayarlarına gidin ve gerekli bilgileri ekleyin.

Servis Çalışanı

Önbelleğe alınacak URL'ler - Burası, çevrimdışıyken bile kullanılabilir hale getirilmesi gereken sayfaları belirtebileceğiniz yerdir. Burada bahsedilen URL'ler önbelleğe alınacaktır - burada herhangi bir güncelleme yaptığınızda önbelleği temizlediğinizden emin olun.
Hariç tutulacak URL'ler – Kesinlikle yalnızca internet ile çalışması gereken sayfalarınız varsa, bunları burada belirtin.
Çevrimdışı sayfa – Kullanıcılarınız çevrimdışı olduklarında ve sayfa önbelleğe alınmadığında onlara kişiselleştirilmiş bir sayfa görüntüleyin.

Manifest.json

Drupal manifest.json dosyası, kullanıcıların PWA'yı ana ekranlarına eklemesine olanak tanır. Ad, görünen ad, arka plan rengi, yön ve daha fazlası gibi PWA'nızın nasıl davranacağını değiştirmek için değiştirebileceğiniz yapılandırmaları içerir.

Dosya, dizin sayfanızın head etiketine eklenecektir.
<link rel="manifest" href = "/manifest.json">

Aşağıdaki resim “Ana ekrana ekle” seçeneğini göstermektedir. Bu seçeneği seçtiğinizde, ana ekranda bir simge oluşturulacaktır.