Készítsen alkalmazási munkát offline szolgáltatási munkavállalókkal

A szolgáltatók felhasználhatók a rakodási idők és az offline támogatás javítása érdekében webhelyek és webes alkalmazások számára. Ebben a bemutatóban megmutatjuk, hogyan fokozatosan fokozza a webes alkalmazást egy szolgáltató munkavállalóval. Először lefedjük, mi a szolgáltató, és hogyan működik az életciklusa, akkor megmutatjuk, hogyan kell használni, hogy felgyorsítsa a webhelyét (ezt az oldalt), és offline tartalmat kínáljon (2. oldal).

Aztán megmutatjuk, hogyan kell Hogyan építsünk egy alkalmazást szolgáltatási dolgozókkal. Meg fogja tanulni, hogyan kell létrehozni egy csupasz csontos munkavállalót, amely gyorsítótárat és statikus eszközöket fog adni (hatalmas teljesítménynövelést biztosít a későbbi terheléseknél), akkor a dinamikus API-válaszok gyorsítótárának gyorsítót, és adja meg a demo app teljes offline támogatását. Először nézzük meg, hogy pontosan mit szolgálnak a szolgáltatók, és hogyan működnek.

Weboldal építése? Egyszerűsítse a folyamatot egy nagyszerűen weboldal építője , és tisztességesnek tartja web hosting szolgáltatás. És kapja meg a tárhelyet ezekkel felhő tároló lehetőségek.

Mi a szolgáltató?

Tehát mi a szolgáltató? Ez egy parancsfájl, amelyet JavaScript írt, hogy a böngészője a háttérben fut. Nem befolyásolja a fő szálat (ahol a JavaScript általában egy weboldalon fut), és nem ütközik az alkalmazáskóddal, vagy befolyásolja a futásidejű teljesítményt.

A szerviz munkásnak nincs közvetlen hozzáférése a DOM-hez vagy eseményekhez és a felhasználói interakcióhoz a weboldalon. Gondolj arra, mint egy réteg, amely a weboldal és a hálózat között ül, lehetővé téve azt, hogy elfogja és manipulálja a hálózati kérelmeket (például AJAX kérések) az Ön oldalán. Ez ideális a gyorsítótárak kezelésére és az offline használat támogatására.

A szolgáltató munkás életciklusa

A szerviz munkás élete egyszerű áramlást követ, de egy kicsit zavaró lehet, ha a JS parancsfájlok csak azonnal dolgoznak:

Telepítés & gt; Várakozás (telepítve) & gt; Aktiválása & gt; Aktivált & gt; Redundáns

Amikor az oldal első betöltése, a regisztrációs kód hozzáadott index.html elindítja a szerviz munkás telepítését. Ha nincs meglévő munkavállaló, akkor az új szerviz munkás közvetlenül a telepítés után aktiválódik. A weblap csak egy szolgáltatási munkás lehet egyszerre aktív.

Ha egy munkavállaló már telepítve van, az új szerviz munkás telepítve lesz, majd üljön a várakozási lépésre, amíg az oldal teljesen zárva van, majd újratöltve. Egyszerűen frissítő nem elegendő, mert más lapok nyitva vannak. Biztosítania kell, hogy az oldal minden példánya zárva van, különben az új munkavállaló nem aktiválódik. Nem kell bezárnia a lapokat, akkor csak navigálhatsz egy másik webhelyre, és visszatérsz.

Mindkét telepítés és aktiválja Az események csak egyszerre fordulnak elő. Miután aktiválódott, a szerviz munkás lesz az oldal irányítása, és elkezdheti az események kezelését, például a lekérést, hogy manipulálja a kéréseket.

Végül a szerviz munkás redundáns lesz, ha a böngésző észleli, hogy a munkavállalói fájl frissült, vagy ha a telepítés vagy az aktiválás sikertelen. A böngésző egy bájt különbséget keres annak megállapításához, hogy frissült-e munkavállalói parancsfájl.

Fontos megjegyezni, hogy soha ne változtasson (vagy fordítsd) a szolgáltató nevét. A szerveren a munkavállaló fájlja sem gyorsítót, mivel nem fogja tudni, hogy könnyen frissítheti, bár a böngészők most elég okosak ahhoz, hogy figyelmen kívül hagyják a gyorsítótárazási fejléceket.

01. A DEMO alkalmazás klónozása

Oké, kezdjünk el tanulni, hogyan építsünk egy webes alkalmazást a munkavállalók segítségével. Ehhez a bemutatóhoz a számítógépen telepített NODE.JS és NPM legújabb verzióira lesz szükséged.

Megütöttünk egy demo alkalmazást, amelyet e bemutató alapjaként fogunk használni ( Itt klónozza a demo alkalmazást ). Az alkalmazás egy szórakoztató kis projekt, amely az ötnapos időjárás-előrejelzést a felhasználó helyén alapul. Ezután ellenőrizze, hogy az eső előrejelzése a nap vége előtt előrejelzés, és ennek megfelelően frissíti az UI-t.

A nagy, felesleges könyvtárakkal, például a jquery és a bootstrap segítségével nem hatékonyan (szándékosan) épült, nagy, nem optimalizált képekkel, hogy bemutassák a teljesítménykülönbséget a szolgáltató használata során. Jelenleg egy nevetséges 4,1MB.

02. Szerezd meg az API kulcsot

Annak érdekében, hogy az API időjárási adatait el lehessen hozni, meg kell kapnia egy ingyenes API kulcsot Openweathermap :

Miután megkapta a kulcsot, nyissa meg index.html és keresse meg a window.api_key változó a & lt; head & gt; . Illessze be a kulcsot az értékre:

    window.API_KEY = 'paste-your-key-here';

03. Indítsa el a fejlesztési kiszolgálót

Most készen állunk arra, hogy elkezdjük dolgozni a projekten. Először is telepítsük a függőségeket futással:

    npm install

Két feladat van az építési eszközhöz. Fuss NPM indítása A 3000-es porton a fejlesztési kiszolgáló elindítása NPM RUN BUILD A "termelés" verzió elkészítése. Ne feledje, hogy ez csak egy demó, ezért nem igazán termelési verzió - nincs minifikáció vagy bármi - a fájlok csak "megfordítják".

Az algoritmus egy hash, például a 9C616053E5 létrehozására szolgál, a fájl tartalmából. Az algoritmus mindig ugyanaz a kimenet hash ugyanazzal a tartalommal, ami azt jelenti, hogy mindaddig, amíg nem módosítják a fájlt, a hash nem fog változni. A hash ezután hozzáadódik a fájlnév, így például styles.css válhat stílusok-9c616053e5.css. A hash képviseli a fájl felülvizsgálatát - ezért "fordított".

Biztonságosan gyorsítótosíthat a fájl minden felülvizsgálatát a kiszolgálón anélkül, hogy valaha is érvénytelenné válik a gyorsítótárat, ami drága, vagy aggódhat egy másik harmadik féltől származó gyorsítótár miatt, amely a helytelen verziót szolgálja.

04. Ismertesse a szolgáltatóját

Most kezdjük el a szolgáltató munkatársaival. Hozzon létre egy sw.js nevű fájlt a src Könyvtár. Ezután adja hozzá a két esemény hallgatót, hogy naplózza telepítés és aktiválja Események:

 self.addeventlistener ("telepítés", (esemény) = & gt; {
      konzol.log (esemény);
    });

    self.addeventlistener ("Aktiválás", (esemény) = & gt; {
      konzol.log (esemény);
    }); 

A maga Változó Itt képviseli a szerviz munkás globális olvasható hatókörét. Ez egy kicsit, mint a ablak objektum egy weboldalon.

Ezután frissíteni kell az index.html fájlunkat, és hozzáadnunk kell a szerviz munkás telepítéséhez szükséges parancsokat. Adja hozzá ezt a szkriptet közvetlenül a zárás előtt & lt; / test & gt; címke. Ez regisztrálja munkatársainkat, és naplózza az aktuális állapotát.

 & lt; script & gt;
     ha ("szolgáltató" a navigátorban) {
       navigator.serviceworker.register ('/ SW.js')
         .hen (funkció (reg) {
           ha (reg.installing) {
             konzol.log ("sw telepítés");
           } más, ha (reg.waiting) {
             konzol.log ("sw várakozás");
           } más, ha (reg.active) {
             konzol.log ("SW aktiválva");
           }
         }). fogás (funkció (hiba) {
           // a regisztráció meghiúsult
           konzol.log ("regisztráció sikertelen" + hiba);
         });
     }
   & lt; / script & gt; 

Indítsa el a fejlesztési kiszolgálót futással NPM indítása és nyissa meg az oldalt egy modern böngészőben. Azt javasoljuk, használja a Google Chrome-ot, mivel az jó szolgáltatást munkás támogatás annak DevTools, amely leszünk utalva az útmutatóban. Látnia kell a konzolhoz bejelentkezett három dolgot; kettő a szerviz munkás a telepítés és aktiválja események, és a másik lesz az üzenet a regisztráció.

05. Aktiválja a munkavállalót

Elmondjuk a munkavállalónak, hogy kihagyja a várakozási lépést, és aktiválja most. Nyissa meg az SW.JS fájlt, és adja hozzá ezt a sort bárhol a telepítés Eseményhallgató:

 self.skipwaiting (); 

Most, amikor frissítjük a munkavállalói parancsfájlt, azonnal átveszi az oldalt a telepítés után. Érdemes tartani, hogy ez azt jelenti, hogy ez azt jelenti, hogy az új munkavállaló átveszi az olyan oldalt, amelyet a munkavállaló korábbi verziójával töltötte be - ha ez problémákat okozhat, ne használja ezt az opciót az alkalmazásban.

Ezt megerősítheti az oldalról történő navigálással, majd visszatér. Látnod kell a telepítés és aktiválja Az események újra meggyulladnak, amikor az új munkavállaló telepítve lett.

A Chrome Devtools hasznos opcióval rendelkezik, ami azt jelenti, hogy frissítheti a munkavállalót csak újratöltéssel. Nyílt DevTools és menj a Alkalmazások fület, majd válassza a szolgáltatás munkás a bal oldali oszlopban. A panel tetején egy jelölőnégyzet az újratöltési frissítéssel, jelölje be. A frissített munkavállaló most már telepítve lesz és aktiválódik.

06. A módosítások megerősítése

Erősítjük ezt hozzáadásával konzol.log ('foo') Hívjon az esemény hallgatóként és frissítse az oldalt. Ez elkapott minket, mert arra számítottunk, hogy meglátjuk a konzolba való naplót, amikor felfrissülünk, de minden, amit láttunk, az "SW aktivált" üzenet volt. Kiderült, hogy a Chrome frissíti az oldalt kétszer, ha az újratöltési opció frissítése meg van jelölve.

Ezt megerősítheti úgy, hogy a konzol beállításai panelen található, és frissíti újra. Látnia kell a bejelentkezett telepítési és aktiválási eseményeket, a "Foo" mellett, majd a "navigációt http: // localhost: 3000 /", hogy jelezze, hogy az oldal újratöltötte, majd az utolsó "SW aktivált" üzenetet.

07. Nyomon követheti a letöltési eseményt

Ideje egy másik hallgató hozzáadásához. Ezúttal nyomon követjük a lekez Esemény, amely minden alkalommal, amikor az oldal betölti az erőforrást, például egy CSS-fájlt, képet, képet vagy akár API-választ. Megnyitjuk a gyorsítótárat, visszaadjuk a kérés válaszát az oldalra, majd - a háttérben - gyorsítótár a válasz. Először adjunk hozzá a hallgatót és frissítsük, hogy láthassuk, mi történik. A konzolban sokan látnod kell Fetchevent naplók.

 self.addeventlistener ("Fetch", (esemény) = & gt; {
 konzol.log (esemény);
}); 

Serve módunk a Browsersync-t használja, amely hozzáadja saját szkriptét az oldalra, és a WebSocket kéréseket teszi lehetővé. Látni fogja a fájnokokat is, de ezeket figyelmen kívül hagyjuk. Csak azt is szeretnénk gyorsítótár megkapni a saját domainünkre vonatkozó kéréseket. Tehát adjunk hozzá néhány dolgot, hogy figyelmen kívül hagyjuk a nem kívánt kérelmeket, beleértve a kifejezetten figyelmen kívül hagyását / Indexút:

 self.addeventlistener ("Fetch", (esemény) = & gt; {
 // figyelmen kívül hagyja a keresztdomain kérelmeket
 ha (! event.request.url.startswith (self.location.origin)) {
   Visszatérés;
 }
 // figyelmen kívül hagyja a nem kapja meg a kéréseket
 ha (esemény.request.method! == get ') {
   Visszatérés;
 }
 // figyelmen kívül hagyja a böngésző szinkronizálását
 ha (esemény.request.url.indexof ("böngésző-sync") & gt; -1) {
   Visszatérés;
 }
 // megakadályozza az index útvonal gyorsítótárazását
 ha (esemény.request.url === (self.location.origin + '/'))) {
   Visszatérés;
 }
 // megakadályozza az index.html gyorsítótárazását
 ha (esemény.request.url.endswith ('index.html ")) {
   Visszatérés;
 }
 konzol.log (esemény);
}); 

Most a naplóknak sok tisztábbnak kell lenniük, és biztonságosnak kell lennie a gyorsítótárba.

08. Gyorsítótár Az eszközök

Most megkezdhetjük ezeket a válaszokat. Először meg kell adnunk gyorsítótárunkat. Hívjuk a miénket V1-eszközök . Adja hozzá ezt a sort a sw.js fájl tetejére:

 CONST AssetsCachename = 'V1-eszközök'; 

Ezután meg kell adnunk a fájlok, hogy ellenőrizhessük, hogy mit küld az oldalra. Ezt megtehetjük az esemény használatával válaszol módszer. Ez a módszer elfogadja az ígéretet, hogy hozzáadhassuk ezt a kódot, cserélje ki a konzol.log :

 // Mondja el a lekérést, hogy válaszoljon ezzel az ígéret lánccal
 esemény. Resudwith (
   // Nyissa meg a gyorsítótárat
   Caches.Open (AssetScachename)
     .hen ((cache) = & gt; {
       // tegye meg a kérelmet a hálózathoz
       Visszatérés letöltés (esemény.request)
         .hen ((válasz) = & gt; {
           // gyorsítótár A válasz
           cache.put (esemény.request, válasz.clone ());
           // Visszaadja az eredeti választ az oldalra
           visszatérési válasz;
         });
     })
 ); 

Ez továbbítja a kérést a hálózatra, majd tárolja a válasz a gyorsítótárban, mielőtt az eredeti válasz visszaadása az oldalra.

Érdemes megjegyezni, hogy ez a megközelítés nem fog gyorsítót gyorsítani a válaszokat a második alkalommal, amikor a felhasználó betölti az oldalt. Az első alkalommal telepíti és aktiválja a munkavállalót, de a lekez A hallgató készen áll, mindent már kértek.

Frissítsen néhányszor, és ellenőrizze a gyorsítótárat a DECTOOLS & GT; Alkalmazás lap. Bontsa ki a gyorsítótár tárolófáját a bal oldali oszlopban, és látnia kell a gyorsítótárat a tárolt válaszokkal.

09. Tálaljuk a gyorsítótárból

Minden tárolva van, de nem használjuk a gyorsítótárat, hogy csak a fájlokat szolgáljanak fel. Hozsuk fel most. Először keressünk egy mérkőzést a gyorsítótárban, és ha létezik, akkor ezt szolgáljuk. Ha nem létezik, használjuk a hálózatot, majd gyorsítótárat a válasz.

// Mondja el a fetch-t, hogy válaszoljon erre a láncra
 esemény. Resudwith (
   // Nyissa meg a gyorsítótárat
   Caches.Open (AssetScachename)
     .hen ((cache) = & gt; {
       // Keresse meg a megfelelő kérést a gyorsítótárban
       vissza a cache.match (esemény.request)
         .hen ((megfelel) = & gt; {
           // Ha egy mérkőzést talál, először adja meg a gyorsítótárazott verziót
           Ha (megfelel) {
             visszatérés;
           }
           // egyébként folytassa a hálózatot
           Visszatérés letöltés (esemény.request)
             .hen ((válasz) = & gt; {
               // gyorsítótár A válasz
               cache.put (esemény.request, válasz.clone ());
               // Visszaadja az eredeti választ az oldalra
               visszatérési válasz;
             });
         });
     })
); 

Mentse el a fájlt és frissítse. Ellenőrizze a DEVTOOLS & GT; Hálózat fül, és látnia kell (a szervizmunkertől) a méret oszlopban szerepel az egyes statikus eszközök esetében.

Phew, elvégeztük. Egy ilyen kis mennyiségű kód esetében sokat kell megértenie. Látnod kell, hogy az oldal frissítése után minden eszköz gyorsítótárazott, meglehetősen snappy, de végezzünk egy gyors (tudatosabb) ellenőrző betöltési időt egy fojtott kapcsolaton (DECTOOLS & GT; Hálózat lap).

A szerviz munkás nélkül a szimulált gyors 3G hálózatok áthelyezése közel 30 másodpercig tart, amíg mindent betölt. A szerviz munkásval, ugyanolyan fojtott kapcsolattal, de a gyorsítótárból való betöltés, csak egy másodperc alatt tart.

Ellenőrizze az Offline mezőt, és frissítse, és azt is látni fogja, hogy az oldal betöltése kapcsolat nélkül, bár nem kaphatjuk meg az előrejelzési adatokat az API-ból. A 2. oldalon visszatérünk erre, és megtanuljuk, hogyan gyorsíthatjuk az API-választ is.

Következő oldal: A szerviz munkavállaló használata online hozzáféréssel

• 1
• 2

Aktuális oldal: Page 1: Gyorsabb betöltés