React Progressive Web Uygulaması Nasıl Oluşturulur?

Google ve Microsoft gibi teknoloji devleri, 4-5 yıldan beri ilerici web uygulamalarının (veya PWA'ların) yolunu açıyor. Artık PWA, büyük şirketler ve küçük girişimler için olmazsa olmaz bir teknoloji haline geldi. Twitter, Starbucks, Google ve AliExpress, çevrimiçi imajlarını geliştirmek için ilerici web uygulaması oluşturucularına tepki veriyor.

PWA, yerel ve web uygulamalarının avantajlarını yakalayan bir web uygulamasıdır. Donanım işlevleri sağlar ve platformlar arası uygulamaların ana gövdesinde bulunur. Yerel uygulamalarla karşılaştırıldığında, oluşturulması ve bakımı daha hızlı, daha basit ve daha ucuzdur.

PWA, normal siteler için erişilemeyen işlevleri destekler. Çevrimdışı çalışma, anında iletme bildirimleri, coğrafi konuma erişim, kamera, mikrofon vb. içerir. PWA, başlangıçta gönderilebilen yerel bir uygulama kabuğunu kullanarak tarayıcının dışında bile çalışabilir.

• Statista araştırmaları, dünya çapındaki işletmelerin ve bağımsız programcıların %40'ından fazlasının React ile çalışmayı tercih ettiğini ve onu 2021 yılında en popüler web çerçevesi haline getirdiğini söylüyor.
• React ayrıca GitHub'da yıldız teknolojisi olarak da anılır ve 85 toplu deposuyla onu en erişilebilir açık kaynak çerçevesi yapar.
• En iyi 30 PWA raporu tarafından yürütülen bazı raporlara ve araştırmaya göre, tepki veren aşamalı web uygulaması oluşturucuları için yerel mobil uygulamalara göre %36 daha yüksek ortalama dönüşüm oranı vardı.
• Smashing Ideas'a göre, PWA'lı şirketlerin müşteri katılımında %50 artış var .
• Aynı rapor, fikirleri parçalayarak geliştirme ve bakımda da %33'lük bir düşüş olduğunu belirtiyor . Rapor ayrıca, PWA'nın yeni veya mevcut uygulamalara olan ihtiyacı ortadan kaldırarak tüm mobil web ihtiyaçlarını karşılayabilmesi durumunda %33'ten fazla olabilecek geliştirme ve bakım tasarrufları hakkında bilgi sağlar.

PWA ve Tepki

PWA'nın önemini bildiğinizden beri. Bir tepki uygulaması PWA veya aşamalı web uygulamaları oluşturmanın birkaç yolu vardır. Vanilla JS, HTML, CSS'yi kolaylıkla kullanabilir ve çerçevenizi ve kitaplıklarınızı seçebilirsiniz. Bazı popüler seçenekler Ionic, Vue, Angular, Polymer ve tabii ki React'tir.

PWA'lar için web teknolojileri:

• Web bildirimleri
• Servis acenteleri
• Uygulama kabuğu
• HTTPS

React Uygulaması Nasıl Oluşturulur?

Bir web uygulamasının nasıl oluşturulacağıyla başlamak için öncelikle Node'un en son sürümünün ve tanıdık bir kod düzenleyicinin kurulu olduğundan emin olun. Çoğunlukla Visual Studio Code, birçok kişi tarafından popüler bir seçim olarak kullanılır.

Ancak, aşamalı özelliklerle bağlamanız gereken bir tepki web uygulamanız varsa, bu harika. Değilse , React yerel uygulama geliştirmesinden tam olarak yararlanmak için yüklediğinizden emin olun . Facebook'un CreateReactApp aracı bu konuda yardımcı olabilir. Hatta hazır yanıt uygulamalarını GitHub'dan içe aktarabilirsiniz.

Create-React-App ile PWA Oluşturma

Basit Bir React Uygulaması Kurun

İlk adım, PWA'yı oluşturmaktır. Bunun için yukarıdaki paragrafta tartışıldığı gibi create-react-app kullanmanız gerekir. Sisteminizde kurulu değilse, aşağıdaki kodu kullanarak bu komutu çalıştırabilirsiniz:

npm i create-tepki uygulaması -g

Create-react-app kullanarak bir TypeScript React uygulaması oluşturmak için aşağıda verilen npx komutunu girin:

npx create-tepki-uygulaması pwa-tepki-typescript –şablon daktilo yazısı

Bu adımlar, TypeScript ile sizin için oluşturulmuş ve aşağıdakilerle yerel olarak test edilebilen bir React web uygulaması oluşturacaktır:

cd pwa-tepki-typescript

iplik başlangıcı

Bir React uygulaması oluşturmanın başka bir yöntemi de şudur:

oluştur-tepki-uygulama tepki-pwa

Aşağıdaki resim, tepki-uygulama klasöründe oluşturulacak dosyaları gösterir.

Bir Servis Çalışanını Kaydedin

Create-react-app (CRA), işletmeniz için React ile bir PWA uygulaması nasıl oluşturulur sorusuna çözümler sağlamak için araçlar sunar.

Ancak, çevrimdışı modda çalıştırılabilen aşamalı bir web uygulamasının nasıl oluşturulacağını düşünüyorsanız? Ardından, otomatik olarak oluşturulan hizmet çalışanı dosyasını yapılandırmanız gerekir.

Yeni oluşturulan projenin dizini index.js dosyasını içerir. Açtığınızda, aşağıda verilen kodu bulacaksınız:

Dosyada kayıtlı olmayan Service Worker'ı görebilirsiniz. Bunu kaydetmek için, unregister() çağrısını register() çağrısını bir olarak değiştirmelisiniz.

Böylece, React kullanarak bir servis çalışanı ile bir tepki uygulaması veya bir PWA uygulaması nasıl oluşturulacağı sorusu çözüldü mü?

Web Uygulaması Bildirimini Yapılandır

Ortak klasördeki manifest.js'nin, uygulamanın kullanıcı için nasıl gerçekleştiğini kontrol eden ve başlatıldığında görünümünü açıklayan meta verileri yani bilgileri taşıdığını bilmelisiniz.

manifest.json, public/index.html dosyasında bağlantılıdır:

<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />

Not: Yukarıdaki etiketlerde %PUBLIC_URL% kullanımı. Geliştirme sırasında ortak klasörün URL'si ile değiş tokuş yapacaktır. Ayrıca, yalnızca ortak klasör içindeki dosyaların HTML'den alınabileceğini unutmayın.

Chrome, PWA'nızı Ana ekrana eklemek için bir manifest.json'a sahip olmanızı gerektirir.

serviceWorker.js, servis çalışanı dosyamızı kaydeder. Çalışan dosyasının nereye kaydedileceği sorunuzu yanıtlamak için? Dosya, uygulama oluşturulduğunda, yani üretim için oluşturulurken CRA ile oluşturulacaktır:

npm çalıştırma derlemesi

Dosyanın bileşenini açıklayarak, işte başlıyoruz:

• Komut, projeyi oluşturur ve derleme klasöründe depolar.
• Tüm js ve css dosyaları statik klasör tarafından tutulur.
• index.html, static/js klasöründe depolanan tüm React dosyalarını ve ayrıca static/css klasöründe depolanan CSS'yi yükleyen ana sayfadır.
• service-worker.js dosyasında tüm servis çalışanı kodu saklanır.
• Service Worker'ın bir dizide önbelleğe aldığı tüm dosyalar, precache-man aifest.*.js dosyası tarafından tutulur.
• Her şeyin planlandığı gibi gitmesi için tarayıcıya derleme klasörünü yüklemeniz gerekir, ancak önce bir tarayıcıya ihtiyacınız olacak. http sunucusunu kurun
• Sonraki adım, package.json'ın komut dosyaları bölümüne start eklemektir.

PWA'yı test etme

Bir React PWA yaptıktan sonra. Bir sonraki adım, uygulamayı test etmekle ilgilidir.

Uygulamayı üretim modunda çalıştırmak için aşağıdaki şekilde verilen komutları yazın:

Artık uygulamanızı oluşturdunuz ve şimdi test etme zamanı. Google, PWA'da bir kontrol listesi oluşturmuştur ve Lighthouse'u kullanarak web uygulamanızı değerlendirebilirsiniz. Chrome DevTools'un yani sekmesinde bulunan bir araçtır.

Aşamalı Web Uygulamaları Oluşturmak için Neden React'i Seçmelisiniz?

İlk olarak 2013 yılında Facebook'tan Jordan Walke tarafından yapılan JavaScript için açık kaynaklı bir kitaplık olan React, kullanıcı arayüzlerini hızlı, basit ve uyarlanabilir bir şekilde geliştirmek için inşa edildi. Facebook grubu kütüphaneyi takip ediyor ve şu anda Facebook ve Instagram gibi öğelerinde yürütülüyor.

React, her hafta 8+ milyon indirme yerine ulaşan JavaScript indirme miktarıyla popülerdir. İnsanların yerel uygulama geliştirmeye tepki vermesinin birçok nedeninden biri .

Bitiş Notu

Yeni başlayanlar için PWA React'i geliştirmek, aşina oldukları teknolojileri kullanan milyarlarca cihaz için PWA'ları tasarlama, geliştirme, iletme ve yayınlamaya olanak sağladığı için trend . Mevcut React uygulamaları da aynı şekilde bir PWA olarak değiştirilebilir.

PWA uygulama geliştirme şirketinin yardımıyla PWA'ların oluşturulması ve dağıtılması kolaydır ve yerel içgörü, örneğin ana ekrana ekleme, açılır mesajlar ve daha fazlası gibi bileşenler aracılığıyla daha iyi taahhüt vererek müşterilerin değerini artırır. etkileşim.

İşletmeniz için tepki veren aşamalı web uygulamaları oluşturma konusunda yardıma ihtiyacınız olursa, deneyimli aşamalı web uygulaması geliştirme şirketi ekibimiz, sorgunuzu anlamaya ve aşamalı web uygulamaları tepki geliştirme konusunda size danışmanlık yapmaya hazırdır. Aynı şekilde, bir numaralı PWA bağlamsal araştırmalarımızdan birini bulabilirsiniz.