Baidu Web ön uç geliştirme gerçek durum analizi
Web'in doğuşundan bugüne, Web ön uç teknolojisi yavaş yavaş zengin ve dinamik bir teknolojik dünyaya dönüştü. İnternet endüstrisinin gelişim modelinin sık sık değişmesi ve ürün stratejilerinin sürekli ayarlanmasıyla, farklı aşamalardaki işletmeler teknoloji seçimi, ön uç performans optimizasyonu ve kullanıcı etkileşimi deneyimi açısından yeni gereksinimler oluşturmaya devam ediyor ve Web ön uç teknolojisi için sürekli olarak yeni gereksinimler ortaya koyuyor.
27 Ekim'de, 82. Baidu Teknoloji Salonu, Baidu Ön Uç Teknoloji Departmanından birkaç üst düzey Web ön uç Ar-Ge mühendisini davet etti. Web ön uç teknolojisinden başlayarak, şimdiki zamana dayalı ve geleceğe dönük beş temayla Baidunun arama bileşenlerini içeriden paylaşacağız Teknoloji çökeltme ve keşif birikimi, arama deneyimi geliştirme, açık Web hızı optimizasyonu ve açık Web gelecek geliştirme.
Arama Bileşenleştirmesinin Keşfi ve Uygulaması
İlk paylaşan, Baidu'nun ön uç teknoloji departmanının kıdemli Ar-Ge mühendisi Chen Xiao tarafından getirilen "Arama Bileşenleştirmesinin Keşfi ve Uygulaması".
Arama neden bileşenleştirilmeli?
Chen Xiao'ya göre, Baidu'nun arama mobil terminalinin ilk ön uç mimarisi PC çağından taşındı ve sunucu tarafı, şablonu oluşturmak için Smarty'yi kullanarak ön ve arka uçların ayrılmasını gerçekleştirdi. Ön uç, etkileşim mantığını tamamlamak için Zepto'yu kullanır, ancak ölçeklenebilirliği nispeten sınırlıdır ve HTML ve CSS kodunun bileşenli yönetimini gerçekleştirmek zordur.Mobil terminalin etkileşimli formu gittikçe daha karmaşık hale geldikçe, orijinal çözümün de sınırları vardır.
Sonuç olarak, bileşenleştirme ortaya çıktı. Bileşenleştirme, tüm arama sonucu sayfası stilinin kontrolünü elde etmek, geliştirme verimliliğini ve yatay ekibin genel yükseltmesinin verimliliğini artırmak için çeşitli bileşenlerin yönetimi yoluyla bazı yeniden kullanılabilir birimleri çıkarmaktır.
Şu anda Baidu, Lavas ve Reac t dahil olmak üzere birçok bileşenli çözüme sahip. Bileşen sözdizimi, temel çerçeve ve izomorfik bloklara özel olabilir.
Aşağıdaki şekilde gösterildiği gibi, bileşen sözdizimi dört bölümden oluşur:
- Şablon: bileşen proxy yapısı
- Tarayıcı tarafı: bileşen ön uç mantığı
- Stil: Ön uç stili
- Yapılandırma: İzomorfik mantık
İlk üç bölüm temelde bileşenlerin ortak sözdizimini kapsayabilir ve izomorfizm sunucu tarafında ve tarayıcı tarafında, esas olarak props, veri, bileşenler, hesaplanan vb. Dahil olmak üzere yürütülebilir.
Peki bu bileşen kodu çevrimiçi olarak nasıl çalışıyor?
İlk olarak, çevrimdışı bir derleyici aracılığıyla iki orijinal PHP ve JavaScript kodu halinde derlenecektir. PHP derleme ürünü, arka uçta bir Sunucu Çalışma Zamanı oluşturabilen PHP sözdizimini tamamen kullanır.Bu süreçte, PHP derleme ürünü ayrıca bir dizeye dönüştürülebilir ve ağ üzerinden tarayıcı tarafına iletilebilir. Tarayıcı tarafında çalışırken, olayları ve etkileşimleri de dahil olmak üzere çalıştırılabilir bir HTML proxy yapısına dönüştürmek için kodlanmış Javascript bileşenlerini kullanabilirsiniz.
Zorluk, bir bileşen kodunun PHP ve JS'de çalıştırılabilen bileşen koduna nasıl derleneceğidir. Baidu, şablonlar ve bazı ifade tasarımlarıyla ilgilenecektir. Örneğin, şablon kodunun bir metin düğümü ve özel bir bileşeni vardır Derleme işlemi sırasında, bir ağaç yapısı oluşturmak için onu soyut bir sözdizimi ağacına dönüştürmek için bir derleyici kullanılır.Her düğümün bazı öznitelikleri ve bilgileri vardır. Ağacın yapısı ve öznitelik bilgileri, kod oluşturucu aracılığıyla sırasıyla PHP ve JS kodları oluşturmak için kullanılabilir.
Burada başka bir soru daha var, neden homojen bir bloğa ihtiyacımız var? Bunun nedeni, izomorfik blokların sunucu tarafında yürütülebilen kodu iyi kontrol edebilmesi ve sözdizimi analizini kolaylaştırabilmesidir. Buna ek olarak, Baidu, sunucu tarafı kararlılığını sağlamak ve istenen PHP kodunu ayrıştırmayı kolaylaştırmak için izomorfik kod bloklarına dilbilgisi kısıtlamaları getirir.
Dönüşüm sayesinde, bileşenlere ayrılmış işleme çerçevesi yalnızca verimliliği artırmak ve deneyim tutarlılığını sağlamakla kalmaz, aynı zamanda maliyetleri düşürmek için yatay yükseltmeler de gerçekleştirebilir.
Verim iyileştirmesi
Sunucu tarafı işleme performansı için Baidu, çok detaylı optimizasyonlar yaptı:
- Çerçeve katmanında, oluşturma işlemi basitleştirilir ve önbellek eklenir;
- Temel bileşen düzeyinde, kontrolün basit bileşenlerini derleyin ve optimize edin;
- İş katmanında, önceki araçları, erişim düzenlemelerini, çevrimiçi izleme ve alarmları sağlayın ve acil talimatlar sağlayın.
Peki, bileşen sunucu tarafında istenen HTML dizesini nasıl oluşturuyor?
Aşağıdaki şekilde gösterildiği gibi, aşağıdaki adımlardan geçecektir: İlk olarak, bileşenin konfigürasyonunu yükleyin ve bileşenin bir örneğini oluşturun. Örnek oluşturma sürecinde, bazı özellikler ve hesaplanan öznitelikler dahil olmak üzere bu bileşenin tüm verileri başlatılır. Başlatma durumu elde edildikten sonra, sanal DOM ağacı oluşturulur ve tüm bileşen düğüm numarası, sanal DOM kullanılarak bir örnek formuna dönüştürülür. Ağaç, bir HTML dizesi olarak oluşturulur.
Aynı zamanda Baidu Search, tüm oluşturma sürecini basitleştirdi. Çerçeve katmanında, sanal bir DOM oluşturarak, bir özyineleme azaltılır ve çevrimiçi çalışma zamanının mantığı da azaltılır. Baidu, temel bileşen düzeyinde, yatay ekibin tamamen kontrol edebileceği bazı basit bileşenleri optimize etti. Bir sözdizimi ağacında derlemek için HTML derleyicisini kullanın ve sözdizimi ağacı AST düğümlerinin her birini optimize eder.Etiketi doğrudan sıradan bir DOM düğümü olarak tanımlayarak, istenen son işlev kodu oluşturulur.
mevcut ilerleme
Baidu şu anda bileşenli arama araçları sağlamaktadır. Örneğin, arama Web erişilebilirlik planlaması, arama performansı erişim özellikleri, arama tasarım özellikleri; hizmetler performans izleme, ön uç ve arka uç anormal izleme vb. İçerir; operasyon, geliştiricilerin bazı sesli etkileşim mantığı geliştirmelerine yardımcı olmak için VSL sesli etkileşim çerçevesi sağlar; mühendislik, arama çevikliği sağlar Platform, geliştiricilerin ortak hata ayıklama, test ve çevrimiçi olarak doğrudan tamamlamalarına yardımcı olur; uygulamalar açısından kartlar, görsel arama, danışma araması, mobil ana sayfa ve Baidu Sports ve Baidu Recruitment dahil olmak üzere bazı bağımsız istasyonlar vardır.
Mobil deneyim standardizasyon yapısı
İkinci oturum, Baidu'nun ön uç teknoloji departmanının kıdemli ön uç mühendisi Liu Langyu tarafından getirilen "Mobil Deneyim Standardizasyon Yapısı" dır.
Nihai kullanıcı deneyimi, Web ürünlerinin peşinde olduğu şeydir, öyleyse iyi bir kullanıcı deneyimi nedir ve iyi bir deneyim elde etmek için kullanıcı deneyimi nasıl ölçülür? İlk olarak, net bir dizi deneyim kılavuzu olmalı ve ardından yere inilmelidir.
Mobil deneyim kılavuzu
Mobil deneyim kılavuzu, mobil Web ekolojisine dayanır ve bir dizi genel deneyim kılavuzu spesifikasyonu önerir. Amaç, kullanıcılara ve ürün sistemlerine daha iyi hizmet vermek ve kullanıcılara yüksek kaliteli bir deneyim sağlamaktır. Baidu, kullanıcı deneyimi seviyesi, etkileşim ve mobil Web'in mevcut durumuna göre altı enlemi özetliyor:
İlk olarak, hızlı bilgi sunumu. Hız, kullanıcının siteye ilişkin deneyim puanını doğrudan etkiler, bu nedenle yüksek kaliteli bir deneyim için ana içeriğin kullanıcıya hızlı bir şekilde sunulması gerekir.
İkinci olarak, tasarım etkileşim seviyesi tutarlılığı vurgular. Tutarlı tasarım etkileşimi, kullanıcının öğrenme deneyiminden faydalanabilir ve öğrenme ve kullanım maliyetini azaltabilir.
Üçüncüsü, iyi bir ürünün, kullanıcıların tüm etkileşimli işlemleri düşük maliyetle ve verimli bir şekilde tamamlamasına izin vermesi gerekir ve kullanıcılara en sorunsuz deneyimi sağlamak için genel işlem net ve engelsiz olmalıdır.
Dördüncüsü, içerik kaliteli okuma algısını vurgulamaktadır. Site içeriğinin okunabilirliği ve içeriğin kendisinin kalitesinin elde edilip edilemeyeceği, kaliteli bir deneyim için gereklidir.
Beşincisi, duygusal düzeyde iki nokta vardır: Birincisi hoş duygusal biliş, ikincisi kullanıcıların siteye güvenmesini sağlamak, sayfanın güvenli olup olmadığı, trafik bilgisinin zamanında bildirilip bildirilmeyeceği vb.
Altıncısı, sağlam sahne adaptasyonu ile ilgili olarak, mükemmel siteler farklı insan grupları ve ev sahibi ortamlar için uygun olmalıdır.
Mobil deneyim algılama platformu
Deneyim kılavuzu ile sitenin hangi sorunları olduğunu hızlı bir şekilde nasıl anlarsınız? Bu, deneyim tespit platformu Radar'ı gerektirir.
Radar'ın alt katmanı Headless Chrome'dur ve Baidu bu tarayıcıyı protokol arayüzü üzerinden çok hızlı bir şekilde çalıştırabilir. Ortadaki işlem, Google kaynaklı açık bir web aracı olan Lighthouse'a dayanıyor. İki ana içeriği vardır: Birincisi web veri toplama, Veri analizi ile veri elde edilir.Kuralların gereklerine göre veriler analiz edilir ve istenen sonuçlar çıkarılır. İkincisi, Radar'ın özü, temelde iki kategoriye ayrılmış, biri sıradan ve diğeri etkileşimli olan birçok kuraldır.
Liu Langyu, bir kuralın nasıl uygulandığını detaylandırmak için etkileşimli kuralları örnek aldı. Aşağıdaki şekilde gösterildiği gibi, etkileşim kuralları esas olarak iki bölüme ayrılmıştır, birincisi sahne tanıma ve ikincisi etkileşim analizidir. Daha basit bir örnek vermek gerekirse, kullanıcı sayfada bir giriş kutusu gördüğünde, doğrudan giriş yapmak için tıklamanın iyi bir deneyim olduğunu hissediyor. Peki bu kural nasıl ölçülür? Birincisi, bu sayfada yorum giriş kutuları gibi görünen öğeleri bulmak için sahne tanımadır. Ardından bazı özellikler bulun, büyük verilerden bazı ortak özellikleri etiketleyip çıkarın ve ardından bu sahne için bir özellik kitaplığı oluşturun. Daha sonra sahnenin gerektirdiği özelliklere göre web sayfasının yapılandırılmış verileri çıkarılır.
Daha sonra, bu sahne öğelerinin etkileşimli olarak analiz edilmesi, önce derinlemesine tarama yapılması ve ardından etkileşimli işlemler gerçekleştirilmesi gerekir. Örnek olarak simüle edilmiş ekrana bir tıklama alın. Tıklamadan önce, kullanıcı, DOM değişiklikleri ve atlama değişiklikleri gibi sayfa değişikliklerini izleyecek ve ardından beklentileri karşılayıp karşılamadığını görmek için değişiklikleri analiz edecektir.
Özel öğelerin standart bileşenleştirmesine dayalı web uygulamaları oluşturun
Üçüncü konuşmacı, Baidu'nun ön uç teknoloji departmanında kıdemli bir ön uç mühendisi olan Zou Miaojiang, iyi deneyimli bir Web uygulamasının nasıl verimli ve hızlı bir şekilde oluşturulacağını, Özel Öğeler standardına dayalı bileşenli tasarımı ve kullanıcı deneyimi ile geliştirme verimliliğinin nasıl iyileştirileceğini paylaştı.
İlk önce özel etiketlere bakın. Özel etiketler, işlev ve mantık açısından JavaBeans'e benzer. Java kodunu kapsarlar, yeniden kullanılabilir bileşen kodlarıdır ve geliştiricilerin karmaşık işlemler için mantıksal adlar sağlamasına olanak tanır. Buna ek olarak, özel etiketler engelleri destekleme, geliştirme verimliliğini artırma, performansı değerlendirme ve SEO için iyi olma özelliklerine sahiptir.
Bunların arasında, performans değerlendirmesi için özel etiketler nasıl kullanılır? Baidu, arama motorları için bir dizi doğrulama aracı sağlar. Örneğin, belirli bir kurala uyan Özel Öğelere, yüksek performans etiketine uymaları için bir yükseklik puanı verilir. Ancak DIV yöntemini kullanırsanız, arama motoru mizanpajın yüksek performanslı olup olmadığını bilemez veya karşılık gelen JS'nin nasıl uygulandığını bilemez. Özel Öğeler standardına sahipseniz, sayfanın ne yapmak istediğini açıkça anlayabilirsiniz.
Buna dayanarak şunu hayal edebiliriz: Bu Özel Öğeler semantik etiketlerini kullanarak bir Web sitesi oluşturmak mümkün müdür?
Bu, bileşen tasarımının kullanılmasını gerektirir. Aslında, mevcut bileşenli tasarımların hepsi aynıdır.Bir sayfanın işlevsel modülleri, bir bileşen ağacı şeklinde serbestçe birleştirilir ve işlevsel bir sayfa veya modül halinde istiflenir Bu, bileşenin yapısıdır. Belirli gereksinimler:
- Her Özel Öğe bir bileşendir
- Bileşen içindeki ilgili etkileşimi, işlevi ve veri işleme mantığını gerçekleştirin
- Bileşenler arasındaki mantık ve stil bağımsız olarak izole edilmiştir
- Bileşenler iletişim kurabilir
- Bileşenler yeniden kullanılabilir
Web Bileşenleri Standardı
Web Bileşenleri, standartlaştırılmış, müdahaleci olmayan bir şekilde paketlenmiş bir bileşeni ifade eder. Ana standartlar, Özel Öğeler, Gölge DOM, HTML Şablonları ve HTML İçe Aktarmaları gibi birden çok boyutun spesifikasyonunu ve uygulamasını içerir.
- Özel Öğeler, geliştiricilere özel kompozisyon, stiller ve davranışlar dahil olmak üzere HTML öğelerini özelleştirmek için bir yol sağlar. Web Bileşenleri standardını destekleyen tarayıcılar, geliştiricilere özel öğeler oluşturmaları veya mevcut öğeleri genişletmeleri için bir dizi API sağlayacaktır.
- Shadow DOM, sayfa öğelerini düzenlemenin daha iyi bir yolunu sağlamayı, giderek karmaşıklaşan sayfa uygulamaları için güçlü destek sağlamayı ve kod etkileşiminden kaçınmayı amaçlamaktadır. Geliştiriciler kendi HTML etiketlerini, CSS stillerini ve JavaScript kodunu kapsüllemek için Shadow DOM'u kullanabilir.
- HTML İçe Aktarma, diğer HTML belgelerini HTML'de alıntılamanın ve yeniden kullanmanın bir yoludur ve genel şablonlara dahil etme gibi işlevler olarak basitçe anlaşılabilir. Özel Öğelerin etiketlerini HTML İçe Aktarma biçiminde oluşturmak için doğrudan HTML'ye yerleştirebiliriz.
Arama açılış sayfası deneyimi teknolojisi ve uygulaması
Dördüncü konu, Baidu'nun ön uç teknoloji departmanının ön uç mühendisi Li Zhaoming tarafından anlatıldı. Her tür arama sonucu sayfasının kullanıcıya nasıl daha hızlı ve daha iyi sunulacağı, Baidu arama ön ucunun her zaman temel endişesi olmuştur. Buna dayanarak Li Zhaoming, Baidu'nun arama açılış sayfası deneyimi teknolojisinin keşfini, açılış sayfasının nasıl daha hızlı yükleneceği, arama sonucu sayfası ile açılış sayfası arasındaki geçişin nasıl daha sorunsuz hale getirileceği ve gelecekte yeni standartlar gibi konuları tanıttı.
Açılış sayfalarının daha hızlı yüklenmesi nasıl sağlanır?
Fikir 1: Önceden yükleyin. Tarayıcıdan alan adını önceden çözümlemesini, bir ön bağlantı kurmasını ve hatta önceden oluşturmasını istemek için Kaynak İpucunu kullanın. Desteklenmeyen bir tarayıcıysa, JavaScript aracılığıyla bir kısmını simüle edebilirsiniz.
Fikir 2: Verileri alın. Verileri açık bir platform üzerinden gönderin ve Baidu tarafından işleyin.
Fikir 3: MIP / AMP. MIP, MIP teknolojisini kullanarak sayfaların yükleme hızını artırmak için birden fazla önlem sağlar. Örneğin CDN hızlandırma hizmeti; MIP ile tasarlanmış bir web sitesinde renderlemeyi engelleyebilecek herhangi bir komut dosyası bulunmamakta ve tüm scriptler sayfanın ana gövdesi yüklendikten sonra çalıştırılmaktadır. Ayrıca MIP, tüm sayfaların statik olmasını gerektirir.Gerçek zamanlı güncellenmesi gereken veriler varsa, eşzamansız olarak elde edilmesi gerekir.Bu tasarım, arka uç oluşturma süresinden tasarruf sağlar.
İki sayfa nasıl birleştirilir?
Aslında, yükleme hızını optimize etmek için ne kadar yol olursa olsun, son analizde sayfa atlamaları birbirinden ayrılamaz. Ancak, tarayıcı atlaması görece yeterince pürüzsüz değil ve kullanıcı deneyimi yeterince iyi değil.İki sayfa birleştirilebilir mi?
Cevap elbette evet. Li Zhaoming, Baidu'nun deneyim sağlama, güvenlik sağlama ve açık tutma temelinde ön uç arama çözümlerini açıkladı:
- Garantili deneyim: Sayfayı Iframe üzerinden yükleyin; PostMessage gibi yöntemlerle etkileşimli dinamik efektler gerçekleştirin.
- Güvenliği sağlayın: harici komut dosyalarına izin verilmez ve paket bileşeni denetimleri gereklidir; HTML'nin spesifikasyonlarla uyumluluğunu doğrulayın.
- Açık tutun: GitHub aracılığıyla geliştirmeyi izleyin.
Yeni teknolojilere ileriye bakmak
Gelecekte Baidu Search, geliştiricilere, alan adı ve Iframe oluşturma sorunlarına dayalı Gezinme Geçişi, Yükseltilebilir Iframe, Portallar ve Web Paketleme için yeni standartlar getirecek ve en sorunsuz deneyimi sunacak.
Gezinme Geçişi: Sayfa değiştirmenin etkileşimli yolu. Iframe oluşturmanın tarihsel yükü olmadan alanlar arası sorunu çözün. Ancak, önceki sayfa sonraki sayfanın yüklenmesini ve oluşturulmasını yine de kontrol edemez. İframe önceden yüklenebilir, ancak kullanıcı geçiş yaptığında Gezinme Geçişlerinin yüklenmesi gerekir.
Promotable Iframe: Iframe ile ilgili olarak temel kod Promotable API'dir. Promotable çağrıldığı sürece sayfanın küçük bir kısmı mobilize edilecek ve ardından tüm sayfa ve içerik mobilize edilecektir. Bununla birlikte, bu yöntem, başarmak için yeterince güvenli olmayan bazı yaşam döngüsü yönetimi ve JS geri dönüştürme sorunlarını içerir ve CDN sorununu çözmez ve alan adının yine de değiştirilmesi gerekir.
Portallar: Portallar, bir sayfayı başka bir sayfaya aktarın. Bu standart, bir web sayfasını görüntülemek için Iframe'in yerine kullanılan yeni bir HTML etiketi portalını tanıtan Promotable Iframe'in bir geliştirmesidir ve yazı Iframe'e benzer. Ancak Iframe'den bir işlevi daha vardır, yani "aktif" yöntemle etkinleştirilebilir. Aynı zamanda, portalın alt belgesi bir portal zactive olayını alır ve üst öğesi olayda elde edilebilir, böylece üst öğe bir portal olarak kendi belge akışına geri eklenerek sayfayı geri değiştirmeyi mümkün kılar.
Web Paketleme: CDN yayılma sorununu çözdü. Bu standart üç yönü içerir: imzalama, paketleme ve yükleme. Aşağıdaki şekilde gösterildiği gibi, soldaki içerik sağlayıcı web yöneticisidir, önbelleğin CDN'si MIP'nin CDN'sine benzer ve sağdaki kullanıcı ziyaret eden kullanıcıdır. Kullanıcı Baidu arama sonuçları sayfamıza göz attığında, veriler önceden MIP'nin Önbellek CDN'si aracılığıyla alınır. , Sadece alınan sayfadan doğrudan yükleyin. İçeriğin kendisi içerik sağlayıcı tarafından sağlandığından, URL'sini imzalayabilir. Bu imza ve imza geçerli olduğunda, tarayıcı orijinal URL'yi kendi başına görüntüleyebilir ve orijinal URL, CDN çapraz etki alanı sorununu çözen orijinal URL aracılığıyla açılması gibi orijinal sunucuyla etkileşime girebilir.
Lavas aracılığıyla hızlı bir şekilde PWA sitesi nasıl oluşturulur?
Son konunun konuşmacısı, Baidu'nun ön uç teknoloji departmanında kıdemli bir Ar-Ge mühendisi olan Wang Yisheng, Lavas aracılığıyla bir PWA sitesinin nasıl hızlı bir şekilde oluşturulacağını anlatıyor.
PWA
PWA (Progress Web Uygulaması), WEB'in gelecekteki geliştirme yönüdür. Deneyim açısından, PWA yerel uygulamaya yakındır. Manifest teknolojisi, kullanıcıların siteyi hızlı bir şekilde açmasına ve kapsamlı bir deneyim elde etmesine olanak tanır. Service Worker aracılığıyla, performansı ve kullanılabilirliği iyileştirmek için kaynak önyükleme ve çevrimdışı kullanılabilirlik sağlayabilir; aynı zamanda PWA'nın da bir Web sitesi vardır. Ortak avantaj: ücretsiz kurulum ve otomatik güncelleme.
Ancak Web sitesinden farklı olarak PWA, güvenilirlik, hız ve yapışkanlık özelliklerine sahiptir:
Birincisi güvenilirliktir. Ağ bağlantısının kesilmesi durumunda, PWA kolay bir çevrimdışı bilgi istemi sağlayabilir Bu, mevcut bağlantı kesme adı verilen en yüksek PWA bağlantı kesme düzeyidir.
İkincisi hızlı. Kullanıcıların% 53'ü, yüklenmesi 3 saniyeden uzun süren bir web sitesini terk edecek. Yükleme hızı ne kadar yüksek olursa, kullanıcı o kadar az kaybedecektir. PWA, hangi önbelleğe, hangilerinin web sayfalarına erişeceğini belirlemesi ve yükleme süresini kısaltması için Hizmet Çalışanı sağlar.
Üçüncüsü yapışkanlıktır. Yapışkanlık, bir sonraki ziyaretin zahmetli olup olmadığını, kullanıcının bir kez ziyaret edip etmediğini ifade eder. PWA, tarayıcı ana sayfasının sorunsuz bir şekilde başlatılmasını sağlamak için yarım saniyelik bir başlangıç animasyonu kullanacaktır. Ek olarak, başlangıçtan sonra kullanılamayan adres çubuğu ve menü çubuğu, kullanıcının sürükleyici deneyimini sağlar.
Teknik açıdan PWA dört bölüme ayrılmıştır:
Birincisi Servis İşçisi. Önbelleğe alma, ağ müdahalesi ve önbelleğe alma stratejilerini tanımlayın. Kendisi bir Çalışandır, özel bir sözdizimi vardır, CACHES API gerektirir ve kaydedilmesi ve güncellenmesi gerekir.
İkincisi Manifest. Bu, hızlı girişi tanımlayan ve animasyonu başlatan bir Json dosyasıdır.
Üçüncüsü Web Push ve Bildirimdir. Sunucunun istemciye gönderdiği aktif bir bildirimdir.
Dördüncüsü, APP Kabuğu. Bu yeni bir teknoloji değil, ancak yaygın olarak kullanılan bir PWA mimarisidir. Basitçe ifade etmek gerekirse, bir APP kabuk ve içeriğe bölünür, kabuk Service Worker ile önbelleğe alınır ve içindeki sayfalar yeniden yönlendirilir.
Lavas aracılığıyla bir PWA sitesi oluşturun
Lavas, araçları, belgeleri ve ilgili çözümleri ve web sitesi şablonlarını içerir ve açık kaynaklı bir çözümdür. Lavas'ın kendisi Lavas cli ve Lavas çekirdeği olmak üzere iki parçaya sahiptir.Siteyi dahili olarak oluşturmak için Vue + Vue Router + Vuex'i kullanır.İki yerleşik şablonu (temel ve uygulama kabuğu) vardır, geleneksel SPA ve SSR modunda hızlı oluşturmayı destekler ve hızlı bir şekilde PWA özelliklerine sahip olabilir. Esnek, yapılandırması basittir ve belgeler zamanında güncellenir ve içerik tamamlanır. Lavas aracılığıyla bir PWA sitesi oluşturmanın sekiz ana adımı vardır:
- Ortamı hazırlayın ve projeyi başlatın. Lavas cli'yi kurun, projeyi başlatın, bir şablon seçin ve bağımlılıkları kurun.
- Yeni bir sayfa oluşturun.
- Bir bağlantı ekleyin. Kullanım < yönlendirici bağlantısı > , Vue ile tutarlı olduğuna dikkat edin. To özniteliği hedef sayfayı belirtir, adresi dize biçiminde destekler ve nesneyi destekler. Ardından hata ayıklama sunucusunu başlatın.
- Sunucu ile iletişim kurun. Aksiyoları kurun, aksiyoları tanıtın ve arka uca istek gönderin.
- Verileri yönetmek için Vues kullanın.
- MAĞAZA oluşturmak için bazı içeriklerin tanımlanması gerekir. İstek verilerini eyleme taşıyın ve edinme başarılı olduktan sonra, durumu değiştirmek için mutasyonu tetiklemek için commit'i çağırın.
- Bileşende, veri elde etmek için eylem store.dispatch tarafından tetiklenir ve ardından durum, mapState aracılığıyla hesaplanan öznitelikle ilişkilendirilir ve son olarak hesaplanan öznitelik aracılığıyla sayfada kullanılır.
- Manifest'i yapılandırın. Manifestt.json, başlangıç URL'sini tanımlar, çeşitli boyutlarda simgeleri tanımlar ve animasyon rengini ve başlangıç modunu tanımlar.
- Servis çalışanını yapılandırın. Yapılandırma, şablon konumunu belirtin, derleme konumu
- Oluşturun ve canlı yayınlayın. Derleme komutunu çalıştır > lavlar inşa etmek; üretim ortamını başlatmak > cd dist, > lavalar başlar.
Lavas teknolojisi prensibi
Lavas'ın teknik ilkeleri esas olarak otomatik yönlendirme kuralları oluşturma, Skeleton ve App Shell içerir.
Her şeyi yapmak için Vue Router'ın dört adıma ihtiyacı var: ilk adım bileşeni tanımlamak ve referans almak, ikinci adım bileşeni ve rotayı bağlamak, üçüncü adım bir örnek oluşturmak için Router işlevine yeni bağlanan verileri koymak ve dördüncüsü koymak. Bir örnek oluşturmak için Yönlendiriciyi VUE'ye yerleştirin ve Vue örneğini bağlamayı tamamlayın.
İyileştirmeden sonra, Yönlendiricinin kendi başına sayfa seviyesi bileşenleri tanımlamasına gerek kalmaz Bileşenler Sayfalar dizininde olduğu sürece bileşenlerin sayfa seviyesinde olduğu belirlenebilir, böylece otomatik İçe Aktarma her seferinde çok fazla kod yazmadan gerçekleştirilebilir. Ek olarak, çoğu durumda yönlendirme kuralları ve bileşen adları arasında bir ilişki vardır. Yönlendirme kuralı eşlemesi, eşleme ilişkisini listeleme zahmetini ortadan kaldırarak ve ayrıca sonraki bileşenin yeniden adlandırılmasının neden olduğu bakım maliyetinden kaçınarak otomatik olarak oluşturulur.
İskelete iskelet ekran denir, bu da gerçek içerik gösterilmeden önce kullanıcının görmesi için genel bir içerik olduğu anlamına gelir, böylece kullanıcı önceden bir şeyler görebilir. Bu, Yüklemenin yükseltilmiş bir sürümüdür, çünkü her bileşen kendi stilini, geçiş zamanlamasını, listesini vb. Özelleştirebilir.
Lavas Skeleton kullanılabilir. Gerçekleşme fikri, Vue'nin bağlama noktasının genellikle boş bir DIV olduğudur. İskelet içeriği, inşaat sırasında montaj noktasına eklenir.Vue monte edilmeden önce DIV'deki içerik temizlenir. Gerçek içerik olarak oluşturun, HTML'yi önbelleğe almak için SW kullanın ve erişirken HTML'yi doğrudan önbellekten alın, böylece kullanıcılar alanı neyin kapladığını görebilir.
Uygulama Kabuğu, bir APP'yi kabuk ve içerikle iki bölüme ayırmak ve kabuğu önbelleğe almaktır. Sayfa her açıldığında, önce kabuk çıkarılır ve ardından içerik oluşturulur. App Shell uygulamasında iki adım vardır: Birincisi, programın hangi kısmının kabuk, hangi kısmının içerik olduğunu söyleyen bölmedir; ikincisi, programın kabuğu önbelleğe almasıdır. Bunun iki yöne ulaşması gerekir. Birincisi SPA'dır. Sunucudan ilk kez Index.HTML'yi döndürmesi istenir. Tüm sayfaların oluşturulması JS tarafından yapılır ve yalnızca bağlama noktasında yeniden oluşturulur. Tek sayfalı Index.html, SW önceden önbelleğe alınmış Dizin kullanan Kabuk'tur .html iyidir. İkincisi SSR'dir. Sunucudan tüm içeriği ilk kez döndürmesi istenir ve sonraki sayfa oluşturma JS tarafından yapılır.
Web ekolojisinin gelişimi İnternetin gelişmesidir.Yeni teknolojilerin sürekli ortaya çıkışı ve yeni senaryoların sürekli olarak gerçekleştirilmesi de bu açık ekolojinin gelişmeye devam etmesine izin verir. Wang Yisheng, Baidu'nun yerel geliştiricilerin ve web yöneticilerinin yerel Web Uygulaması ekosistemini ortaklaşa oluşturmak ve iyileştirmek için PWA projelerine daha fazla katılabileceğini umduğunu söyledi.
