Progressive Web Uygulamaları veya Magento 2'deki PWA'lar nedir?

• Magento'nun Progressive Web Uygulaması platformu haline gelmesi ne anlama geliyor?
• Magento'da PWA'ların kod yapısı ne olacak?
• REST API'leri ve PWA'larla anlaşma nedir?

Progressive Web Uygulamaları Nedir?

• Mobil bir uygulama gibi görünür ve davranır.
• Al avantaj ait yerel mobil cihaz özelliklerine gerektirmeden , bir uygulama mağazasını ziyaret etmek son kullanıcının satın alma ve indirme bunu yerel olarak .

Neden PWA?

• Hızlı
• Güvenli (ikinci son cevap konusu)
• duyarlı
• Çapraz tarayıcı uyumlu
• Çevrimdışı Mod (Cevaptaki son konuyu kontrol et)
• Mobil “Yükle”
• Paylaşılabilir içerik

Bu cevap ayrıca şunları kapsar - PWA ile Magento 2.3'ün Kurulumu

Flipkart örneğini ele alalım

Hindistan'ın en büyük e-ticaret sitesi olan Flipkart , web varlıklarını ve yerel uygulamalarını , dönüşümlerde % 70'lik bir artışla sonuçlanan Progressive Web Uygulamasıyla birleştirmeye karar verdi.

Flipkart

Yaklaşmak, yanaşmak, yaklaşım

1. Progressive Web Uygulaması olan Flipkart Lite geliştirildi
2. Daha hızlı yükleme süreleri için servis çalışanları eklendi
3. Saniyede 60 kare hızında yumuşak gezinme ve kaydırma
4. Kullanıcıları mobil web sayfasını ana ekranlarına eklemelerini teşvik etmek için bir "Ana Ekrana Ekle" istemi oluşturuldu

   ---

Sonuçlar

Yeni Progressive Web App, Flipkart'ın dönüşümleri artırmasına yardımcı oluyor% 70

Flipkart ayrıca Çevrimdışı modda da çalışır

• Servis Çalışanları, her ağ isteğine müdahale etmek ve kullanıcı çevrimdışı olsa bile önbellekten yanıt vermek için komut dosyası yazabilir.
• Hizmet İşçileriNetworkFirst , CacheFirstveya gibi basit kalıpların kullanılmasını sağlayan kitaplık sarıcıNetworkOnly . Flipkart uygulamasında önceki arama sonuçlarını göz atma sayfasında ve son birkaç ziyaret edilen ürün sayfasında saklamak için kullanılan SW-Toolboxbir LRU önbellek sağlar .
• Araç kutusu ayrıca, güncel olmayan içerikleri temizlemek için kullandığımız TTL-based önbellek geçersiz kılma mekanizmasına da sahiptir . Servis Çalışanları bunu mümkün kılan düşük seviyeli komut dosyası ilkelleri sunar.

AMA AMA AMA...

Magento PWA Stüdyosu nedir?

• • Magento PWA Studio projesi, Magento 2'nin üstündeki bir PWA mağazasının geliştirilmesine, devreye alınmasına ve bakımına izin veren bir dizi geliştirici araçtır.

Magento PWA Studio projesi aşağıdaki araçları sunar:

---

PWA modülü

• Yardımcıları, sunucu tarafı işlevselliği gibi modülleri vardır ve Magento PWA Studio kullanılarak oluşturulan tüm temalar için temel oluşturur .

pwa-buildpack -

• Buildpack, WebpackMagento PWA temalarının geliştirilmesinde kullanılan bir dizi eklenti ve araçtır.

• Ayrıca Magento 2 platformu için yerel geliştirme ortamını kurmak ve yapılandırmak için kullanılır.

Aşağıdaki araçları içerir:

• PWADevServer
• Magento Çözücü
• Magento Kök Bileşenleri Eklentisi
• magento-düzen-yükleyici
• Servis Çalışanı Eklentisi

Peregrine - Peregrine bir diziReact componentsgibi Magento özgü işlevleri işlemek için oluşturulanrouting,root-componentsvb düzen işleyicisi, ürün listeleri, fiyat göstergesi,

Venia teması -venia-conceptMagento PWA stüdyosunu kullanarak Magento tarafından oluşturulan bir demo tema. Mevcut tüm işlevselliği, iş akışını ve sayfaları gösterir

PWA Studio DEĞİL

• Magento'nun Yeni Sürümü

• Bir Değiştirme tüm ön sonu

• Bir Masaüstü Uygulaması

PWA Stüdyolarında Kullanılan Araçlar ve Kütüphaneler

webpack

• Webpack'in birincil işlevi, projenizin modüllerinde bağımlılıklardan bir veya daha fazla paket oluşturmaktır.

Uygulama Kabuğu

• Toplam boyut daha küçük
• İlk yükleme üç dosya istekleri: login.html, shell-1234.js,3456.js
• İlk yükün yüklenmesi gerekiyor: Shell + Router + content
• Kabuk, Sayfa Kabuğu yaklaşımından daha erken görülebilir.

Sayfa Kabuğu

• Toplam boyut daha büyük (yani pano içeriği pano-1234.js ve 4567.js’dedir)

• App çevrimdışı hazır olması daha uzun sürer.

• İlk yükleme yalnızca iki dosya istekleri: login.html,login-2345.js

• İlk yükün yüklenmesi gerekiyor: Shell + content

• shell + contentUygulama Shell yaklaşımla daha görünür öncedir.

Kabuğun ve içeriğin iki istekte ayrıldığı bir melez yaklaşım kullanılabilir (örnek olarak yönetici sayfasına bakın). Bu, içeriğin kabuktan çok daha büyük olması ve kabuğun daha önce görünür olması gerektiğinin anlamlıdır.

ReactJs

• Kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesi.

Redux

• Bir web uygulamasında durumu yönetmek için kullanılan bir JavaScript kitaplığı.

GraphQL

• İstemci tarafında bir veri sorgusu dili ve sunucu tarafında bir hizmet katmanı.

Magento'da GraphQL

Kimlik Doğrulama ve Şema

Ön Uç Sorgularının Azaltılması

Faz Render

Masaüstü Tarayıcı uyumluluğu

• Desteklenmiyor : IE, Safari

Mobil Tarayıcı uyumluluğu

Desteklenmiyor : Android Webview, IE, Safari

PWA'lar Daha Güvenli

• Bir web geliştiricisi olarak, Google’ın web sitelerinin httpsyerine ne kadarını teşvik ettiğini biliyor olabilirsiniz HTTP. Siber tehditler , web ve uygulama geliştiricileri için her zaman listenin başında gelir.
• Geçmişte, HTTPkullanıcıların bilgilerini korumak için yeterince güvenli değildi.
• Web siteleri şimdi programlanmaktadır HTTPsve Progressive Web App'i güvenli bir ortamda başlatmak kolaydır.
• PWA'ya kredi kartı bilgileri veya iletişim bilgileri gibi kişisel bilgileri girerken , kendilerini güvende hissedebilir ve gönül rahatlığı yaşayabilir.

PWA - Çevrimdışı Mod

çevrimdışı Wikipedia uygulaması ,bir uygulama kabuğu modeli kullanan bir PWA'ya iyi bir örnektir.

• Tekrar ziyaretlerde anında yüklenir, ancak JS'yi kullanarak içeriği dinamik olarak alır.
• Bu içerik daha sonra gelecekteki ziyaretler için çevrimdışı olarak önbelleğe alınır.

Progressive Web App hiç şüphesiz web geliştirmenin geleceğidir. Gelecekte, e-ticaret siteleri, restoranlar ve medya kaynakları yerel uygulamadan Progressive Web App'e geçiş yapacak. Bununla birlikte, yine de ilk aşamada, geliştiricilerin çoğu aktif olarak PWA'ların sunduğu fırsatlardan en iyi şekilde yararlanmanın yollarını aramaya başlayacaktır.

Magento 2.3 kurulumuna PWA ile başlayalım

1. Aşağıdaki komutu DIR / var / www / html / içine girin (m203 benim Magento 2.3 dizimdir):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Magento'yu Komut Satırı ile yükleyin:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. PWA Venia teması için ana olacakları temel pwa teması oluşturun .

• Şimdilik temel pwa tema deposunu klonlayalım. https://github.com/magento-research/theme-frontend-pwa

4. Dizin oluşturun app/design/frontend/Magento/pwave temel temanın tüm dosyalarını ve dizinlerini buraya kopyalayın.

• Temel temanın kullanılabilir olup olmadığını kontrol etmenizi sağlar.

• Run: php bin/magento setup:upgrade

• Ve Magento Yöneticinize gidin-> İçerik-> Temalar

5. PWA stüdyo projesini indirin.

6. Magento kurulumunuzun kök dizinine gidin ve projenin modül dizinine (pwa-studio / Packages / pwa-module) bağlanan bir Pwa bağlantı klasörü oluşturun.

• bu dizinden komutumu koştum - / var / www / html / m230

• Bu, pwa indirilen kaynağımın / var / www / html / PWA / olduğu bir dizindir.

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Tema dizinini de bağlayın. Magento kurulumunuzun kök dizinine gidin ve projenin modül dizinine (pwa-studio / package / venia-concept) bağlanan bir Pwa sembolik bağlantı klasörü oluşturun.

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Şimdi pwa-studio projenizin venia-concept dizinine gidin, .env.distyeni bir .envdosyaya kopyalayın ve değişkenleri URL ile birlikte Magento geliştirme mağazanıza güncelleyin.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. venia temasını ve Pwa Modülünü yükleyin:

run: php bin/magento setup:upgrade

venia temasının başarıyla kurulduğunu görebiliriz.

10. venia temasını adresinden yapılandırın admin->Content->Configuration

11. path ( /var/www/html/PWA/pwa-studio-master) çalıştırmasına gidin :

npm install

veya

npm install webpack-dev-server -g

12. Ve Sonunda Git /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Tebrikler! Venia tema projesi için geliştirme ortamınızı kurdunuz.

PWA - Progressive Web Uygulaması, genellikle kullanıcının zengin web deneyimini yaşadığı web uygulamasıdır. yolunda:

• Güvenilir - anında yükleyin ve çevrimdışı modda da mevcuttur.
• Hızlı - Kullanıcının kendisiyle sorunsuz bir şekilde etkileşime girdiği ve ayrıca kaydırma veya animasyon önlükleri olmayan bir etkileşim biçiminde.
• İlgi çekici - eğer uygulama güvenilir ve hızlıysa her iki noktanın da üzerinde belirtildiği gibi, daha sonra açıkça daha fazla kullanıcı deneyimine sahip olur ve bunun doğal bir uygulama olduğunu hissedersiniz.

"Magento'nun Progressive Web Uygulaması platformu haline gelmesi ne anlama geliyor?"

Magento 2.3 sürüm sürümü için hazırlanırken, kullanıcı etkileşimi açısından ön yüzü daha verimli hale getirmek için bu "PWA" özelliğini de içermektedir.

REST API'leri ve PWA'larla anlaşma nedir?

Magento "PWA" kullandığından, "REST / SOAP" ın ön uç geliştirme tarafı api alternatifini "GraphQL" api olarak sunmak için "GraphQL API" de ekliyor.

"PWA" ve "magento2.3 open-trade" 'in yeni özelliği hakkında daha ayrıntılı bilgi için, bu magento’nun resmi sayfasını ziyaret edebilirsiniz .

Aşamalı , kullanıcı web sitenizde dolaşırken uygulamanın ilgili tüm verilerle ve varlıklarla birlikte yüklenmesi anlamına gelir. Bu, daha iyi hız, kullanılabilirlik, çevrimdışı kullanım ve cihaz entegrasyonu ile son kullanıcı deneyimi sağlar.

Web , web dilinde yazıldığı anlamına gelir (HTML, CSS, JavaScript). Bu, iOS veya Android gibi bir platformla sınırlı yerel bir uygulama oluşturmadan daha fazla uygulama benzeri işlevsellik sunan bir site oluşturmanıza olanak sağlar.

Uygulama , alışverişçinin cihazına veya bilgisayarına kod yükler ve çalıştırır demektir. Bunu yapmak, geçmişin tek sayfalık JavaScript uygulamalarından daha fazla hız ve yetenek sağlar.

PWA'lar web için mobil uygulama benzeri deneyimlere izin veren normal web sayfalarının ve mobil uygulamanın bir melezidir.

Magento Progressive Web Uygulaması platformu haline geliyor. Bir başka deyişle, Magento, Progressive Web Uygulamaları olarak çevrimiçi mağazalar oluşturmak için bir takım araçlar hazırlamaktadır. Bu araçlar, geliştiricilerin PWA tekniklerini öğrenmelerine, yıldırım hızına sahip PWA ön uçlarını oluşturmalarına ve Magento Marketi'nde yeniden kullanım veya satış için PWA bileşenleri ve uzantıları oluşturmalarına yardımcı olacaktır. Birlikte alındığında, Magento, Magento PWA Stüdyosu'ndaki bu araç takımını çağırıyor.

Kod yapısını https://github.com/magento-research/pwa-studio adresinden kontrol edebilirsiniz.

Magento PWA, PWA için REST API'sine alternatif olarak GraphQL kullanıyor .

Magento PWA hakkında daha fazla bilgi için, aşağıdaki linkleri inceleyebilirsiniz:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Aşamalı Web Uygulamaları, yüklenebilir mobil uygulamalar ve web siteleri arasındaki orta yoldur. İnternette mobil cihazlardan masaüstlerinden daha fazla trafik görmeyi bekliyoruz, 2019 yılına kadar. PWA'lar dönüşümleri artırmak için web sitelerinin görünümünü ve izlenimini geliştiriyor.

PWA'lar Magento Tüccarları için Daha Fazla Trafik, Daha Yüksek Dönüşüm ve Daha Hızlı Sayfa Yükleme Süreleri Sağlayan Hızlı, Sürtünmesiz, “Uygulamaya Gibi” Deneyimler Sunuyor

Genel olarak, Magento dönüşümlerini arttırmak için görünüşünü ve hissini dönüştürüyor. Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz .

• PWA'lar genellikle, yerel uygulamalarla neredeyse aynı olan bir performans ve kullanılabilirlik seviyesine sahip olan JavaScript, CSS ve HTML ile oluşturulur. PWA'ların aşağıdakileri içeren özellikleri vardır:

  1. Progresif kod temeli (çoğu zaman React Js'deki gibi bileşen) çoğu tarayıcıda (cihazlarda değilse de) tarayıcılarla ve cihazlarla (mobil ve masaüstü) birlikte çalışırlar.
  2. Duyarlı bir tasarım kullanarak tüm ekranlara ve form faktörlerine uyun Çevrimdışı bağlantıyı etkinleştirmek için servis çalışanlarından yararlanın (HTTPS gerekir)
  3. Anında iletme bildirimleri gibi yeniden birleştirme araçlarından yararlanan uygulama benzeri bir deneyim sağlayın
  4. Kullanılan kaynakları tanımlamak için bir web uygulaması bildiriminden yararlanın

Buradan daha fazla okuyabilirsiniz.

• SOAP (Basit Nesne Erişim Protokolü) ve REST (Temsilsel Durum Aktarımı), en yaygın web hizmeti iletişim protokolleridir. REST, çoğunlukla SOAP'a tercih edilir ( burada açıklanmaktadır ). Bu nedenle REST API'lerinin PWA'lar gibi yeni bir teknolojiyle birlikte kullanıldığını görmek mantıklıdır.

Sorunuzun sadece bir kısmını cevaplamak için ama daha Magento 2'ye özgü.

PWA'nın gelecekteki Magento 2.3 sürümü ile yapımı daha kolay olacak.

https://www.degdigital.com/insights/magento-2-3/

Bu makaleden alıntı:

PWA

Progressive Web Uygulaması, bu özelliklerin bulunmadığı cihazlara “aşamalı olarak” geri dönen modern teknoloji özelliklerinden yararlanmak için oluşturulmuş bir uygulamadır. Ayrıca, verilerin önbelleğe alınmasına da izin verir, böylece internet hizmeti sivilceli olduğunda veya bulunmadığında web sitesi çevrimdışı modda (kısmen veya tamamen) kullanılabilir. Bu genellikle, web sitesinin ön ucunu, arka uç uygulamasından ayrı bir şekilde modern bir JavaScript çerçevesi / yığını ile yazarak gerçekleştirilir. Bu JavaScript uygulaması, yukarıda belirtilen görevi gerçekleştirmek için yeni (ish) tarayıcı özelliklerini kullanabilir.

Magento bunun yararlarını anlıyor ve 2017 yılının sonlarında PWA Stüdyosu adını verdiği şeyi oluşturma çabalarını açıkladı. PWA Studio, Magento'nun ön ucu için bir PWA geliştirmek ve dağıtmak için araçlar içerecektir. PWA Studio ile birlikte hafif (özellik dolu değil) bir demo site gelecek. En önemli avantajlar, ön uç performansında büyük bir artış ve yeni Magento ön uç geliştiricilerinin hizmete girme hızında 10 katına yakın bir artış olacaktır.

• İlgili İçerik: PWA'lar Burada ve Her Şeyi Değiştiriyorlar

GraphQL

GraphQL, API'leri kullanmak için bir sorgu dilidir. PWA'nın yükselişiyle birlikte, daha az miktarda veri almaya ve daha az API talebi yapmaya ihtiyaç vardır. GraphQL'in sorgu dili, istekte bulunanın bir varlık hakkında döndürülmek üzere sınırlı bir özellik alt kümesi isteme izni vererek (önemli ölçüde daha küçük yanıtlar) ve istekleri zincirlemenize (daha az sayıda istek) izin vererek bunu mümkün kılar.

Magento şu anda Servis Sözleşmelerini kullanan REST ve SOAP API taleplerini desteklemektedir. Bununla birlikte, GraphQL'i desteklemek için Magento, doğrudan Sorgu API'sine arabirim oluşturan tamamen yeni bir katman yazıyor. GraphQL uygulaması, bir PWA arayüzünün ihtiyaç duyduğu verileri nasıl alacağının temelini oluşturacak.

Progressive Web Uygulaması, web tarayıcı yeteneklerini kullanır ve kullanıcılara deneyim gibi bir mobil uygulama sağlar.

Bir tarayıcı sekmesinden gelişir ve düşük sürtünmeli bir kullanıcı deneyimi ile sayfaları daha sürükleyici kılar. Bir uygulama gibi davranan ve hisseden bir web sitesi yapma web teknolojisidir.

Bir kullanıcı, tarayıcı tercihi ne olursa olsun, yerel bir uygulama ile aynı olan Progressive Web Uygulamasını başlatabilir.

Demo testi için bu bağlantıyı ziyaret edebilirsiniz: Buraya Tıklayın

G / Ç 2017 G / Ç 2017 sırasında piyasaya sürülen bir google ürünü: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

HTML tabanlı bir web sitesidir.

Önbelleği bir cihazda depolar, böylece biri çevrimdışı olarak da kullanabilir.

Bununla birlikte, ilk ziyaret, ikinci ziyaret sırasında yükselecek olan yavaştır.

Cihaz internete girdiğinde güncelleniyor, bu yüzden APP'ler gibi yeni bir şeyi güncellemenize gerek yok.

Birisi çevrimdışı bir şey yayınlarsa, cihaz internete girdiğinde tüm e-postaları sunucuya tetikler.

Sonunda, iphone / android uygulaması inşa etmeye gerek yok.

Sınırlama Sadece HTML dosyasını destekler. Yani cihaz HTML'yi desteklemeli.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

PWA Kurulumu (Linux işletim sistemi)

Adım 1: Magento 2.3.1'i yükleyin

2. Adım: Düğüm yükleme / yükseltme

Düğümü yükseltmek için npm'den n modülü kullanın

sudo npm install n -g

En son sürüm için:

sudo n stable

En son sürüm için:

sudo n latest

Adım 3: İpliği takın / güncelleyin:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Adım 4: node-gyp - Node.js native addon build aracını kurun

sudo npm install -g node-gyp

Adım 5: PWA Studio deposunu klonlayın

Html köküne gidin ve çalıştırın:

git clone https://github.com/magento-research/pwa-studio.git

Bunu çalıştırdıktan sonra pwa-studio klasörünü alacaksınız.

Adım 6: PWA Studio bağımlılıklarını kurun

sudo yarn install

Adım 7: Magento arka uç sunucusunu belirtin

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Örnek komut:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

.env dosyasındaki değişiklik (bu, yönetici URL'sinin değil magento URL’niz olacak):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Adım 8: Şimdi bir yapı oluşturun

sudo yarn run build

Adım 9: Sunucuyu çalıştırın

sudo yarn run watch:venia

Yalnızca Venia mağazası geliştirme ortamını başlatır.

sudo yarn run watch:all

Venia hot-yeniden yükleme ve eşzamanlı Buildpack / Peregrine yeniden yapılandırmalarını içeren tam PWA Studio geliştirici deneyimini çalıştırır.

sudo yarn run build && yarn run stage:venia

Üretilen yapay eserler üretir ve daha fazla sıkıştırılmış varlık kullanan ve üretimi daha yakından yansıtan aşamalı ortamı yönetir.

Yukarıdaki komutlardan birini çalıştırdığınızda, PWA tarafından oluşturulan virtül URL'sini alırsınız.

NOT: rood kullanıcısıysanız sudo kullanın.

Magento 2 resmi dev dokümanlarını takip edin:

https://devdocs.magento.com/guides/v2.3/pwa/