Create React tətbiqini və xüsusi xidmət agentlərini istifadə edərək PWA necə yaradılır

Qeyd: Bu Yarat və Cavab ver tətbiqi və ya bir xidmət nümayəndəsinin nə olduğu bir giriş deyil. Bu məqalə üçün hər ikisini əvvəlcədən bilmək lazımdır.

Beləliklə, bu yaxınlarda ortaya çıxan veb tətbiqetmənin Progressive Web Application (PWA) kimi yayımlandığı bir React layihəsi üzərində işləmək fürsəti tapdım.

Create React App (CRA) üçün bir quruluşda konfiqurasiya edilmiş xüsusi marşrutlarla PWA yaratmaq nə qədər çətin olduğunu başa düşdüm. İnşallah bu oxşar vəziyyətdə olan birinə kömək edəcəkdir.

Reaktiv Yarat tətbiqindəki PWA'lar

CRA qabığımızda bir PWA tam olaraq necə icra olunur?

CRA qabığı artıq bir xidmət işçisini varsayılan olaraq birləşdirir. Index.js faylında sadə bir CRA qabığında registerServiceWorker üçün bir çağırış olduğunu fərq etməlisiniz:

Yeni bir CRA tətbiqi yarada və registerServiceWorker sənədinə baxa bilərsiniz.

Çox mürəkkəb görünür, ancaq mühit dəyişkənlərinin istehsalın qurulması üçün qurulub-qoyulmadığını və serviceWorker-in cari brauzerdə dəstəklənib-dəstəklənmədiyini yoxlayır.

İplik build əmri ilə bir build çalıştırdığınızda build qovluğunu aça və service-worker.js faylının yaradılıb-yaradıldığını görə bilərsiniz. Bu, CRA-nın sizin üçün yaradacağı standart xidmət işçisi sənədidir.

Faylın formatlaşdırılması xətti ES5 JavaScript-dir, bu da oxunmasını bir az çətinləşdirir. Ancaq hər hansı bir hazırlayıcıda yaza bilərsiniz və daha oxunaqlı bir sənəd görməlisiniz.

Yuxarıda göstərilən fayla nəzər salmaq lazımdır ki, aşağıdakı önbellek adı ilə yalnız statik bir önbellek yaradılır: sw-precache-v3-sw-precache-webpack-plugin - + (selg.registration? Self.registration.scope). Sonra index.html və js və css sənədləriniz kimi bütün statik fayllar bu önbellekdə saxlanılır.

Orada bir gətirmə hadisəsini kəsəcək və tətbiqin əvvəlcədən keşlənmiş statik varlıqlardan hər hansı birini tələb edib-etməyəcəyini yoxlayacaq bir hadisə tədbiri dinləyicisi görməlisiniz.

İndi milyon dollarlıq bir sual gəlir: əgər müəyyən bir marşrut üçün dinamik bir önbelleği konfiqurasiya etmək istəyirsinizsə? Əslində istifadəçi müəyyən bir marşrutu ziyarət edərkən server tərəfindən göndərilən məlumatlarla özünü yeniləyən bir önbellek. Qeyd edək ki, bu, məlumatların yaradıldığı zaman mövcud olmadığı və buna görə də yaradılan standart xidmət işçisi tərəfindən önbelleğe alınmadığı anlamına gəlir.

CRA-da standart PWA'ların məhdudiyyətləri

Təəssüf ki, CRA istifadə edərkən yuxarıdakı addımları izləmək asan deyil. Çıxartmağa hazır olmadığınız təqdirdə.

CRA komandasının niyə standart xidmət işçisini özəlləşdirməyi dəstəkləmədiyini öyrənmək üçün bu GitHub məsələlərini nəzərdən keçirin.

Varsayılan xidmət işçisini fərdiləşdirə bilməyəcəyimiz üçün bununla necə məşğul olacağıq?

CRA-nın bir xidmət agenti yaratdığını anlayın

İnşaat sistemi üçün bir həll tapmaq üçün ilk addım, qurma sisteminin necə işlədiyini anlamaqdır.

Beləliklə, qurma sisteminin bir xidmət işçisi faylı yaratmaq üçün istifadə etdiyi kitabxanadan başlayaq.

sw-precache, bir şablon əsasında bir işçi faylı yarada biləcəyiniz bir kitabxanadır. Şablon faylı alt çizgi şablon mühərriki istifadə edərək yazılır.

Sw-precache mənbə kodundakı şablon sənədinə keçid.

Yenidən şablon faylı mürəkkəb görünür, ancaq şablon dili ilə tanış olduqdan sonra olduqca sadədir.

Beləliklə, bir xidmət işçisi yaratmaq üçün bir CRA qabığında bir qurma prosesi çalıştırdığınız zaman aşağıdakılar olur:

  1. Sw-preache kitabxanası daxili olaraq icra olunur
  2. Xidmət işçisi sənədinin şablondan yaradıla biləcəyi bir seçim obyekti təmin edilir
  3. Xidmət işçisi faylı service-worker.js adı ilə build qovluğunda yaradılır

Varsayılan xidmət işçisini ləğv edin

İndi yuxarıdakı prosesi necə ləğv edə bilərik ki, öz xüsusi xidmət işçi sənədimiz yaradıla bilsin?

Cavab Jeff Posnick-in Stackoverflow cavabına (sw-preache-nin qoruyucusu) əsaslanır.

Əvvəlcə normal qurma prosesindən sonra SW Precache CLI-ni işə salmalıyıq.

Aşağıdakı əmri işə salmaqla sw-precache kitabxanasını quraşdırın: npm install --save-dev sw-precache

İndi sw-precache kitabxanası CLI-də bir seçim yolu ilə təmin edilən bir konfiqurasiya sənədində icra olunur. Bu əmr budur: sw-precache --config = sw-precache-config.js, burada sw-precache-config.js konfiqurasiya sənədinin adıdır.

Budur nümunə konfiqurasiya faylı.

module.exports = {staticFileGlobs: ['build / static / css / **. css ',' build / static / js / **. js '], swFilePath:' ./build/service-worker.js ', templateFilePath:' ./service-worker.tmpl ', stripPrefix:' build / ', handleFetch: false, runtimeCaching: [{urlPattern: / this \ \ .is \\. a \\. regex /, işləyici: 'networkFirst'}]}

Qeyd: swFilePath ./build/service-worker.js olaraq təyin etməyiniz vacibdir. Xüsusi qurma prosesiniz nəticəsində yaradılan xidmət işçisinin CRA tərəfindən yaradılanın üzərinə yazması üçün (hər ikisi də eyni ada sahibdir). Əks təqdirdə qurma qovluğunda iki xidmət işçisi sənədiniz olacaq!

Sw-precache üçün GitHub səhifəsində obyekt xüsusiyyətləri və onlara etibarlı dəyərlər təyin edilə biləcəyi barədə ətraflı sənədlər tapa bilərsiniz.

Xüsusi maraq, runtimeCaching seçimidir, çünki bu, xidmət nümayəndənizin dinamik məzmuna reaksiya göstərə biləcəyi xüsusi qaydaları təyin etməyə imkan verən çox genişlənən bir həlldir.

TemplateFilePath, xüsusi xidmət işçisi şablon sənədinizi almaq üçün CLI tərəfindən istifadə edilməli bir seçimdir. Bununla birlikdə, demək olar ki, həmişə kitabxananın özü tərəfindən verilən şablon sənədindən istifadə edəcəksiniz.

Nəhayət, xüsusi xidmət işçimizi yaratmaq üçün CRA qurma sisteminə siqnal vermək üçün skript yerləşdirməliyik. Davam edin və sw-precache kitabxanasını quraşdırın.

Sonra, pack.json build skriptini aşağıdakı kimi yeniləyin:

build: Reak skriptləri build && sw-precache --config = sw-precache-config.js

Npm run build ilə tikinti prosesini etdikdən sonra build qovluğunu aça və yaradılan xidmət işçinizə baxa bilərsiniz.

Xüsusi xidmət işçisi ilə və onsuz tikinti prosesini tamamlayın və ikisi arasındakı fərqləri qeyd edin.

Nəticə

Bu, bir xidmət agentini fərdiləşdirmək qədər sadə bir şəkildə işlənmiş bir yanaşma kimi görünsə də, bu yanaşmanın üstünlüyü, tətbiqləri qurmaq və cavab vermək üçün qabıqda möhkəm dayandığınızdır.

Xüsusi bir xidmət işçisi yaratmaq üçün başqa yanaşmalar var (React-App-ReWire və Workbox birləşməsindən istifadə edərək). Bu yanaşmanı bir yazıda da izah etməyə çalışacağam.