PWA: n luominen Create-React-App- ja asiakaspalvelun työntekijöiden avulla

Huomaa: Tämä ei ole perusta reagoida-sovelluksessa tai palvelutyöntekijä. Tämä viesti edellyttää molempien etukäteen tuntemusta.

Joten minulla oli äskettäin tilaisuus työskennellä Reakt-projektissa, joka sisälsi tuloksena olevan verkkosovelluksen julkaisemisen progressiivisena verkkosovelluksena (PWA).

Tajusin, mikä on kamppailu saada PWA, jolla on mukautetut reitit, jotka on määritetty Create React App (CRA) -rakennuksen sisälle. Toivottavasti tämä auttaa joku jäämään samanlaiseen asemaan.

PWA: t Luo-reagoi -sovelluksessa

Kuinka tarkalleen saamme PWA: n käynnissä CRA-kuoremme sisällä?

Nyt CRA-kuori niputtaa palvelun työntekijän oletuksena. Sinun olisi pitänyt huomata, että perus CRA-kuoressa, index.js-tiedoston sisällä, on puhelu registerServiceWorker:

Voit luoda uuden CRA-sovelluksen ja tarkastella registerServiceWorker-tiedostoa.

Se näyttää melko monimutkaiselta, mutta se on todella vain tarkistaa, onko ympäristömuuttujat asetettu tuotantokokoonpanolle ja onko nykyinen selain tuettu serviceWorkeria.

Jos suoritat rakennuksen komento lankarakenne, voit avata rakennuskansion ja tarkistaa sisäpuolelta, että service-worker.js-tiedosto on luotu. Tämä on oletuspalvelun työntekijän tiedosto, jonka CRA luo sinulle.

Tiedoston muotoilu on in5 ES5 JavaScriptiä, mikä tekee siitä hieman vaikean lukea. Mutta voit upottaa sen mihin tahansa alustusaineeseen, ja sinun pitäisi nähdä selkeämpi tiedosto.

Edellä mainitun tiedoston tarkastelemisen pitäisi osoittaa, että se luo yksinkertaisesti staattisen välimuistin, jolla on seuraava välimuistinimi: sw-precache-v3-sw-precache-webpack-plugin - + (selg.registration? Self.registration.scope). Sen jälkeen välimuisti tallentaa kaikki staattiset tiedostosi, kuten index.html, sekä js- ja css-tiedostot välimuistiin.

Sinun pitäisi myös nähdä siellä hakemistapahtuman kuuntelija, joka tarttuu hakemistapahtumaan ja tarkistaa, onko sovellus pyytänyt jotakin aiemmin välimuistiin tallennetuista staattisista resursseista.

Nyt tulee miljoonan dollarin kysymys: entä jos haluat määrittää dynaamisen välimuistin tietylle reitille? Pohjimmiltaan välimuisti, joka päivittää itsensä palvelimelta lähetetyillä tiedoilla, kun käyttäjä käy tietyllä reitillä. Huomaa, että tämä tarkoittaa, että tietoja ei ole saatavana rakennusaikana, joten oletuspalvelun työntekijä ei voi tallentaa niitä välimuistiin.

Rahoitukset luottoluokituslaitosten oletus PWA-arvoille

Valitettavasti yllä olevan tekeminen ei ole kovin helppoa, kun käytetään CRA: ta. Ellet tietenkään ole halukas karkaamaan.

Katso näitä GitHub-ongelmia nähdäksesi miksi CRA: n tiimi ei tue oletuspalvelun työntekijän mukauttamista.

Joten ottaen huomioon, että emme näytä mukauttavan oletuspalvelun työntekijää, miten voimme kiertää sitä?

Ymmärtäminen, kuinka CRA luo palvelutyöntekijän

Ensimmäinen askel rakennusjärjestelmän kiertämisessä on ymmärtää rakennusjärjestelmän toiminta.

Joten aloitetaan kirjastolla, jota rakennusjärjestelmä käyttää palvelun työntekijän tiedoston luomiseen.

sw-precache on kirjasto, jonka avulla voit luoda palvelun työntekijän tiedoston mallin perusteella. Mallitiedosto kirjoitetaan alaviivojen mallipohjalla.

Tässä on linkki mallitiedostoon sw-precache-lähdekoodissa.

Jälleen, mallitiedosto näyttää monimutkaiselta, mutta se on melko suoraviivaista, kun onnistuu saamaan pääsi mallin kielen ympärille.

Joten mitä tapahtuu, kun suoritat rakennusprosessin CRA-kuoressa suhteessa palvelevan työntekijän luomiseen, on seuraava:

  1. Sw-preache-kirjasto suoritetaan sisäisesti
  2. Valinnaobjekti tarjotaan sw-esivalintaa varten, jotta palvelun työntekijän tiedosto voidaan luoda mallista
  3. Palvelun työntekijä-tiedosto luodaan rakennuskansiossa nimellä service-worker.js

Oletushuoltotyöntekijän ohittaminen

Nyt miten ohitamme yllä mainitun prosessin salliaksemme oman räätälöidyn palvelun työntekijän tiedoston luomisen?

Vastaus perustuu Jeff Posnickin (sw-precachen ylläpitäjä) pinovirtausvastaukseen.

Ensinnäkin meidän on suoritettava thesw-precache CLI normaalin rakennusprosessin jälkeen.

Asenna sw-precache-kirjasto suorittamalla seuraava komento: npm install --save-dev sw-precache

Nyt sw-precache-kirjasto toimii konfigurointitiedostossa, joka tarjotaan CLI: n vaihtoehdon kautta. Tämä on komento: sw-precache --config = sw-precache-config.js, missä sw-precache-config.js on konfigurointitiedoston nimi.

Tässä on esimerkki konfigurointitiedostosta.

module.exports = {
  staticFileGlobs: [
    'Build / staattinen / CSS / **. Css'
    'Build / staattinen / js / **. Js'
  ],
  swFilePath: './build/service-worker.js',
  templateFilePath: './service-worker.tmpl',
  stripPrefix: 'build /',
  handleFetch: false,
  runtimeCaching: [{
    urlPattern: / tämä \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\,,
    käsittelijä: 'networkFirst'
  }]
}

Huomaa: On tärkeää, että määrität swFilePath-muodossa ./build/service-worker.js. Tämä on niin, että mukautetun rakennusprosessisi tuloksena tuotettu palvelustyöntekijä kirjoittaa CRA: n luoman (korvaa, että heillä on sama nimi, tässä tilanteessa). Muutoin pääset kahteen palvelotyöntekijän tiedostoon rakennushakemistossasi!

GitHub-sivulla sw-esivalintaa varten on laaja dokumentaatio esineen ominaisuuksista ja siitä, mitkä kelvolliset arvot voidaan antaa niille.

Erityisen kiinnostava on runtimeCaching -vaihtoehto, koska tämä on erittäin laajennettava ratkaisu, jonka avulla voit määrittää räätälöityjä sääntöjä palveluntarjoajallesi vastaamaan dynaamiseen sisältöön.

TemplateFilePath on vaihtoehto, kun haluat CLI: n noutavan mukautetun palvelun työntekijän mallitiedoston. Mutta käytät melkein aina kirjaston itse tarjoamaa mallitiedostoa.

Viimeinkin meidän on toimitettava komentosarja, joka ilmoittaa CRA-rakennusjärjestelmälle, että haluamme räätälöityjen palveluiden työntekijän luomisen. Asenna sw-precache-kirjasto.

Päivitä seuraavaksi paketti.json rakennuskomentosarja seuraavalla:

build: react-scripts build && sw-precache --config = sw-precache-config.js

Kun olet suorittanut rakennusprosessin npm run build -sovelluksella, voit avata rakennuskansion ja nähdä luomasi palvelun työntekijän.

Suorita rakennusprosessi mukautetun palvelun työntekijän kanssa ja ilman sitä ja huomaa näiden kahden erot.

johtopäätös

Vaikka tämä voi tuntua erittäin selkeältä lähestymistavalta niin yksinkertaiselta kuin palveluntarjoajan mukauttaminen, tämän lähestymistavan etuna on, että pidät sinut tiukasti luo-reagoi -sovelluksen kuoressa.

On myös muita lähestymistapoja räätälöityjen palvelujen työntekijöiden luomiseen (käyttämällä react-app-rewire- ja työlaatikoiden yhdistelmää). Yritän saada tämän lähestymistavan esiin myös viestissä.