React istifadə edərək A + Proqressiv Veb Tətbiqi necə qurulur

Brauzer provayderləri (Safari daxil olmaqla) xidmət işçilərini və digər mütərəqqi uzantı API-lərini əlavə etdikləri üçün Proqressiv Veb Tətbiqləri (PWA) hazırda çox həyəcanlıdır. Bəs veb tətbiqləri mütərəqqi edən nədir?

Google, PWA-nı vebin və tətbiqetmələrin ən yaxşısını birləşdirən bir təcrübə olaraq təyin edir. Bunlar olmalıdır:

  • Tez - İstifadəçi qarşılıqlı münasibətlərinə tez cavab verin
  • İnteqrasiya olunmuş - istifadəçinin brauzerdən keçməsinə ehtiyac yoxdur
  • Etibarlı - şəbəkə oflayn və ya pozulmuş olsa da dərhal yüklənir
  • Cəlbedici - əla UX xüsusiyyətləri ilə istifadəçiləri dövrədə saxlayın

Bütün bunlar əla, lakin qeyri-müəyyəndir. Google ayrıca lazımlı bir Proqressiv Veb Tətbiqi Kontrol Siyahısı təqdim edir. Hələ bir PWA-nın nə olduğunu və yaxşı bir şeyin nə olacağına dair qəti bir cavab yoxdur.

Əsas PWA

Ən sadə səviyyədə, bir PWA, brauzerin saytın müəyyən meyarlara cavab verdiyini və ana ekrana əlavə edilməli olduğunu tanıması üçün istifadə etdiyi texniki xüsusiyyətləri ilə müəyyən edilir. Kriteriyalara əməl olunarsa, onu ana ekrana əlavə etmək istəyi görünə bilər.

Əsas ekrana bir pankart əlavə etmək nümunəsi

"Tətbiq Quraşdır" bannerini göstərmək üçün üç qızıl qayda bunlardır:

  1. Tətbiq etibarlı bir mənbədən gəlməlidir, buna görə SSL / HTTPS vasitəsilə təmin edilməlidir.
  2. Tətbiqin oflayn olaraq yüklənməsi lazımdır, oflayn rejimdə işləməlidir (yalnız xüsusi bir offline səhifə və ya önbelleğe alınmış olsa belə). Bu o deməkdir ki, bir xidmət işçisi quraşdırılmalıdır.
  3. Tətbiq bir veb tətbiq manifestinə istinad etməlidir Tətbiqinizi təsvir edən sadə bir JSON faylı.

Bu funksiyanı mövcud veb tətbiqinizə əlavə etmək nisbətən sadə bir işdir və texniki olaraq bir PWA-ya sahibsiniz. Təəssüf ki, bu, sürətli, inteqrasiya olunmuş, etibarlı və cəlbedici orijinal təriflə mütləq uyğun gəlmir. Tətbiqinizi Google Yoxlama Siyahısı və ya Google Lighthouse Audit Tool vasitəsilə işləsəniz, çox böyük bir problem siyahısı tapa bilərsiniz.

Bu nöqtədə, bir server tərəfindən göstərilən bir veb saytınız varsa, Fənərin sizə bildirdiyi problemlərin siyahısını düzəltməkdə çətinlik çəkdiyinizi görəcəksiniz. Bir istifadəçi server tərəfindən göstərilən veb tətbiqetmədə bir düyməyə və ya bir linkə vurduqda, mövcud ekran birdən yeni bir məzmun ekranı görünmədən gözləməyə başlayır. Tətbiqin özünün cihazda yerli olaraq işləməsi fikrinə xəyanət etdiyinə görə bu bir PWA üçün qəbuledilməzdir.

Veb tətbiqinizi bir PWA-ya çevirmək istəyirsinizsə, güc balansını bir server tərəfindən göstərilən veb tətbiqindən bir müştəri tərəfindən göstərilən veb tətbiqinə keçməlisiniz. Bir sözlə, yeni bir tətbiq arxitekturası tələb olunur.

Tətbiq qabığı

App Shell naxışı yerli bir tətbiqetmə arxitekturasını təkrarlayır və tətbiq mağazasından yerli bir tətbiq yüklədiyinizə bənzər bir paket paket təmin edir.

Əsas fərq ondan ibarətdir ki, bu paket istifadəçi tətbiqetmə mağazasından dolayı yolla deyil, ilk dəfə müraciət etdikdə bir xidmət nümayəndəsi tərəfindən yüklənməlidir. Bu, PWA-nın sürətli olması deməkdir. Həqiqətən, PWA-nız ilk ekranı görmək üçün mətbəx lavabonunu yükləyərkən istifadəçilərinizin 5-10 saniyə boş ekran görməsini istəmədiyiniz üçün çox sürətli.

Tətbiq qabığında əsas istifadəçi interfeysi və tətbiqin işləməsi üçün tələb olunan əsas komponentlər olmalıdır. Ümumiyyətlə marşrutlaşdırma üçün məsuliyyət daşıyır, lakin heç bir məlumat içerməməlidir.

Tətbiq qabığı naxışı

Şarj səviyyələri

Məlumatların təqdimatdan ayrıldığı və müştəri istifadəçi interfeysinin göstərilməsindən məsul olduğu bir tətbiq qabığına sahib olduqdan sonra, şarj vəziyyətləri anlayışı təbii bir dizayn nümunəsinə çevrilir.

Bir URL istənildikdə, müştəri əvvəlcə tətbiq qabığının bir hissəsi olduğu üçün dərhal yükləyən bir yükləmə vəziyyəti göstərə bilər. Eyni zamanda, müştəri məlumatları almaq üçün bir müraciət edir, bir dəfə alındıqdan sonra müştəri tamamlanmış ekranı yaradır və yükləmə vəziyyətini əvəz edir.

Şarj səviyyələri

Son nəticə, istifadəçi üçün bir server tərəfindən göstərilən veb tətbiqində olduğu kimi ağ bir flaş və səhifə yavaş göstərildiyi zaman səhifədə 3-4 saniyə qalacaq bir keçidə vurmaqdan daha yaxşı bir təcrübədir. .

Kod bölgüsü

Tətbiq qabığının naxışı kod bölgüsü ilə əl-ələ verir. Standart bir React tətbiqində kodunuz bir JavaScript sənədində toplanır. Bir PWA-da ilk ekranı mümkün qədər tez yükləməyimiz lazımdır. Beləliklə, daha kiçik bir paketə ehtiyacımız var. Həm də hər marşrutu ayrı-ayrılıqda önbelleğe almalıyıq. Bir sözlə, JavaScript kodumuzu bölməliyik. Webpack bu işdə kömək edə bilər və ya avtomatik kod bölmə olan Preact istifadə edə bilərsiniz.

Paylaşılan və ayrı tətbiq qabığı kodu, beləliklə xidmət işçilərindən tam istifadə edə bilərsiniz. Əvvəllər praktik olmayan funksiyalar heç bir problem olmadan təklif edilə bilər, məsələn:

  • Oflayn dəstək
  • Əvvəlcədən tətbiqetmə istifadəçi interfeysi
  • Şəbəkə məlumatlarını / aktivlərini dinamik olaraq önbelleğe alma

İş qutusu olan xidmət işçisi

Bu funksiyaları həyata keçirmək üçün xidmət insanlarını daha dərindən araşdırmalısınız. Xidmət agentlərini əl ilə yazmaq tamamilə mümkündür. Bununla birlikdə, Google Workbox ilə sizin üçün çox iş gördü.

Şanslı vasitə WebPack ilə InjectManifest plaginindən istifadə edir. Bu şəkildə öz işçi kodunuzu Workbox ilə birləşdirə bilərsiniz. Ən azından aşağıdakıları həyata keçirməlisiniz:

  • Tətbiq qabığınızın qabaqcadan saxlanılması
  • Tələb olunan məlumatların və varlıqların iş vaxtı önbelleği

Bununla yanaşı, aşağıdakılar daxil olmaqla daha çox xidmət agentləri var.

  • Arxa fonda sinxronizasiya
  • elanlar
  • Oflayn analitik

Workbox ilə xidmət işçiləri özlüyündə böyük bir mövzudur. Daha çox bilmək istəyirsinizsə, Prebox ilə Workbox-da ayrıca bir məqalə hazırladım.

PRPL naxışı

Tətbiqiniz artıq tez yüklənməlidir. Bir tətbiq qabığı, kod bölgüsü var və bir xidmət işçisi tərəfindən önbelleğe alınır. Əslində, Google tərəfindən PWA üçün tövsiyə olunan PRPL modelini tətbiq etdik. PRPL tətbiq yerləşdirmə və işə salma performansına odaklanır. Bu:

  • Mühüm mənbələri orijinal marşruta köçürün
  • Birinci marşrutu göstərin
  • Qalan marşrutlar əvvəlcədən önbelleğe alınır
  • Tənbəlliklə yükləyin və lazım olduqda qalan marşrutları yaradın

Bu HTTP / 1-də işləyərkən, ehtimal ki, HTTP / 2 qabiliyyətli bir veb hostu araşdırmaq istəyirsiniz. HTTP / 2, tək bir əlaqə üzərindən çoxsaylı yükləmələrə imkan verir, beləliklə çoxsaylı kiçik fayllar daha səmərəli yüklənə bilər.

Server tərəfində göstərmə və s. Əvvəlcədən göstərmə və CDN

Server tərəfində, məlumatla tamamlanan ilk marşrutu göstərə və sonra müştərinin göstərilməsini təmin edə bilərsiniz. Bu sürətdə ilkin bir artım verə bilər, lakin konfiqurasiya mürəkkəb ola bilər. Ümumiyyətlə, kod bazasına əlavə olunan mürəkkəbliyə görə azarkeş deyiləm.

Fikrimcə, daha yaxşı bir həll, statik bir veb saytı əvvəlcədən təqdim etmək və inanılmaz sürət və kod bazası sadəliyinə sahib olan HTTP / 2 effektiv məzmun çatdırılma şəbəkəsində (CDN) yerləşdirməkdir. Bonus olaraq, hosting mürəkkəbliyinizi də azaltmısınız, çünki sizə lazım olan yalnız statik veb hostingdir!

Əvvəlcədən göstərmə üçün bir çox seçim var:

  • Preact
  • Statik reaksiya verin
  • Gatsby

Mümkün olan ən yaxşı sürət üçün, statik veb saytınıza Netlify kimi bir CDN provayderi vasitəsilə xidmət edə bilərsiniz.

Bükün

Tətbiqinizi belə bir arxitektura ilə Deniz Fənəri ilə idarə edirsinizsə, daha yaxşı bir nəticə əldə etməlisiniz. Tətbiqinizin nə qədər sürətli olduğunu və böyük bir istifadəçi təcrübəsi təklif etdiyini də tapa bilərsiniz.

Proqressiv veb tətbiqetmələri yerli tətbiqlərdən daha asan qurmaq və yerləşdirmək üçün asan bir fantastik təklifdir. Bununla birlikdə, yerli tətbiq istifadəçilərinin sevdikləri və gözlədikləri təcrübələrin çoxunu təmin edirlər.

Safari'nin PWA ilə əlaqəli dəstəyinə dair hələ bir sual işarəsi var, lakin bir çox məhsul üzərində işləyirlər və xidmət işçiləri iOS 11.3-də təqdim ediləcəklər, çünki ümidverici görünür.

Bir addım daha irəli getmək istəyirsinizsə, istifadəçinizə daha da yaxşı bir təcrübə təqdim edə biləcək bəzi əlavə API tətbiq olunur (yenə də Safari'nin nələri tətbiq etdiyini görməliyik):

  • Push Bildirişlər API
  • Veb Ödənişlər API
  • Etibarnamə API

React Native-i sevdiyim qədər və bir çox halda bu hələ də istifadəçi təcrübəsi üçün ən yaxşı seçim olacaqdır, şəxsən onların çox parlaq bir gələcəyinə inandığım üçün PWA-ya çox vaxt və enerji sərf edirəm!

Mənim adım Dave Hudson, inkişaf qruplarına rəhbərlik edən və kod yazan UX məhsul inkişaf pedantıyam.
Applification Ltd-də məsləhət görürəm və hər hansı bir suala cavab vermək üçün hazıram. Reaksiya verin, çevik və məhsul inkişaf etdirin!