Kaip priversti savo programą veikti neprisijungus naudojant „JavaScript“

Šiuolaikiniame pasaulyje ryšys mus pavertė mobilesniais nei bet kada anksčiau, dėl kurių (paradoksalu) kartais esame neprisijungę: kai mes esame lėktuvo režime, blogas ryšys, neturime daugiau duomenų, esame metro ... ir pan.

Antras šio mobilumo efektas yra lėtas sunkių svetainių įkėlimas: „Amazon“ nustatė, kad vos 100 milisekundžių papildomo įkelties laiko jiems kainuoja 1% pardavimų.

Šiomis situacijomis norėtume turėti prieigą prie savo turinio neprisijungę. Štai kodėl egzistuoja tokie įrankiai kaip „Instapaper“ ir „Pocket“. „Spotify“ ir „Netflix“ taip pat leidžia atsisiųsti laikmeną, skirtą naudoti neprisijungus.

Mes lengvai suprantame, ar yra šios funkcijos poreikis, ir kaip ji gali būti naudinga jūsų verslui.

Atėjo laikas prisijungti prie interneto.

Laimei, mums nebereikia kurti vietinių programų, kad pasiektume šį tikslą. Naujų paslaugų darbuotojų ir „ Cache“ API funkcijų dėka galime sukurti neprisijungus veikiančią svetainę su „JavaScript“ galia .

Kas yra paslaugų darbuotojas (SW)?

Aptarnavimo darbuotojai yra „JavaScript“ kodas, kuris veikia jūsų svetainės fone, net kai puslapis yra uždarytas. Naudojant neprisijungus, vienas iš jų tikslų yra išsaugoti tinklo užklausas ar vaizdus naršyklės talpykloje.

Agentūra BETC sukūrė Prancūzijos telekomunikacijų bendrovės „Bouygues“ demonstracinę svetainę whentheinternetisdown.com. Tai veikia tik neprisijungus ir jaučiasi tarsi stebuklinga. Eik išbandyti :)

Svetainės magija sukuria talpyklą: galite grįžti po 3 savaičių, 1 mėnesio, 1 metų vis tiek be ryšio ir pasiekti visą turinį. - Maxime Huygue, „BETC Digital Studio“ vadovas

Gerai, tai šaunu, pasakyk man, kaip tada tai padaryti.

Gerai, pradėkime nuo keleto sąlygų:

  • Norėdami naudoti SW, savo svetainėje turite įgalinti https.
  • Turėtumėte gerai suprasti, kaip veikia „JavaScript“ pažadai.
  • SW veikia visose šiuolaikinėse naršyklėse, išskyrus mūsų draugą IE.
  • Net jei tai „JavaScript“, jie veikia žiniatinklio darbuotojų kontekste. Tai reiškia: be DOM ir paleisti už pagrindinio sriegio ribų.
  • Suprasti, kaip veikia duomenų bazės.
  • Aptarnavimo darbuotojo kodas turi būti atskirame „JavaScript“ faile. Pavyzdys: service-worker.js

Aptarnaujančių darbuotojų gyvenimo ciklas

Kad galėtumėte dirbti, SW turite būti užregistruoti jūsų programoje, tada įdiegti. Prieš tai atlikdami, turėtumėte patikrinti, ar SW yra suderinami su jūsų klientu.

1) Registracija

Jei įmanoma, užregistruokite savo SW failą. Tai grąžins pažadą, todėl galėsite tvarkyti klaidas. Registracijos parinktyse taip pat galite nurodyti URL apimtį.

2) montavimas

Aptarnavimo darbuotojai priklauso nuo įvykių. Trumpai tariant, jūs turite pridėti atgalinius įvykius, kaip tai darytumėte su elementu.addEventListener. Pirmasis įvykis, kurį turite naudoti, yra diegimo įvykis. Tai tinkamas laikas talpinti visus gyvybiškai svarbius išteklius kaip „Javascript“, CSS, HTML, vaizdus ... Čia „Cache“ API prisijungia prie partijos!

Tada atidarykite metodą arba sukurkite talpyklą, susietą su norimu pavadinimu. Grąžintą pažadą reikia suvynioti į įvykį.waitUntil (), kuris atidės paslaugos darbuotojo diegimą, kol pažadas bus išspręstas. Priešingu atveju nepavyksta įdiegti įvykio ir paslaugų darbuotojas bus atmestas.

Atsargiai laikykite talpyklą: jūsų vartotojo saugykla yra brangi, todėl nepiktnaudžiaukite ja. Be to, būkite atsargūs: diegimo įvykį galima iškviesti tik vieną kartą, todėl jį modifikuoti turėsite atnaujinti savo SW.

3) Aktyvinimas

Šis yra šiek tiek subtilus.

Baigus diegimą, paslaugų darbuotojas dar nėra aktyvus: mes esame įdiegtos būsenos.

Šioje būsenoje ji laukia, kol perims puslapio kontrolę. Tada jis pereina į kitą gyvenimo ciklo etapą, kuris yra aktyvavimo etapas.

Suaktyvinimo etapas yra patogu, kai atnaujinate SW. Dažniausias atvejis yra išvalyti ankstesnio SW talpyklą.

Atkreipkite dėmesį, kad sėkmingai įdiegęs atnaujintas darbuotojas lauks, kol esamas darbuotojas valdys nulį klientų (atnaujinant klientai sutampa).

self.skipWaiting () neleidžia laukti, o tai reiškia, kad paslaugų darbuotojas aktyvuojasi, kai tik jis baigia diegti. Šio metodo pranašumas yra tai, kad galite greičiau gauti iškvietimo įvykius.

Tikrai nesvarbu, kada skambinate „skipWaiting“ (), jei tai laukiama ar prieš laukimą. Gana dažnai tai vadinama diegimo įvykyje.

Phew! Pailsėkime ir apibendrinkime tai, ką matėme:

  • Aptarnavimo darbuotojai yra „JavaScript“ dalys, įgalinančios neprisijungus veikiančias funkcijas, pvz., Talpyklą.
  • Mes ištyrėme SW gyvenimo ciklą: registraciją, diegimą, aktyvavimą
  • Sužinojome, kaip įgyvendinti tokius įprasto naudojimo atvejus, kaip: išteklių talpykla ir talpyklų išvalymas naudojant „Cache“ API.
  • Mes matėme, kad „self.skipWaiting“ ir „self.clients.claim“ leidžia mums greičiau suaktyvinti SW, kad greičiau sulauktume įvykių.

Gerai judėti dešinėn ...

4) Atnešti

Atsiuntimo įvykis leidžia mums perimti tinklo užklausas ir išsaugoti atsakymus arba juos tinkinti.

Pagrindinis šio kabliuko privalumas yra grąžinti talpykloje esančius išteklius, užuot skambinus užklausa. Turėtumėte pažvelgti į „Fetch“ API tvarkydami užklausos skambučius.

Viename straipsnyje negalime aptarti visų paslaugų darbuotojų siūlomų galimybių. Vis dėlto raginu pasidomėti, kas įmanoma: „Custom 404“, „Background Sync“ API, skirta analizei neprisijungus, „ServiceWorker“ pusės šablonai .... ateitis atrodo įdomi!

Iki šiol matėme, kas yra paslaugų darbuotojas, kaip jis veikia per visą savo gyvavimo ciklą, ir dažniausiai naudojamus atvejus žaisdami su „Cache“ ir „Fetch“ API. Šios dvi API suteikia mums visiškai naują būdą, kaip naršyti URL adresuojamus išteklius . Norėdami užbaigti šį vadovą, pažiūrėkite, kaip galime saugoti kitų tipų duomenis, pavyzdžiui, vartotojo JSON iš jūsų duomenų bazės.

Saugokite pasirinktinius duomenis naudodami „IndexedDB“

Bendrosios duomenų saugojimo gairės yra tai, kad URL adresuojami ištekliai turėtų būti saugomi „Cache“ sąsajoje, o kiti duomenys - „IndexedDB“. Pvz., HTML, CSS ir JS failai turėtų būti saugomi talpykloje, o JSON duomenys - „IndexedDB“. Atkreipkite dėmesį, kad tai tik gairės, o ne tvirta taisyklė. (šaltinis)

Trumpai tariant, pamatysime, kada turėtumėte naudoti ne „Cache“ API, o „IndexedDB“. Abi yra asinchroniškos ir prieinamos paslaugų darbuotojams, interneto darbuotojams ir lango sąsajai. Gera žinia ta, kad ji yra gerai palaikoma, net ir naujausiose IE versijose.

„IndexedDB“ yra „NoSQL“ duomenų bazė. „IndexedDB“ duomenys yra saugomi kaip raktų ir verčių poros objektų parduotuvėse, o ne lentelės. Vienoje duomenų bazėje gali būti bet koks objektų saugyklų skaičius. Kai vertė saugoma objektų saugykloje, ji susiejama su raktu. Tai atrodo taip:

Gana klasika, tiesa? Pagrindinis dalykas, kurį reikia suprasti, yra pagrindinio kelio sąvoka. Naršyklei nurodoma, kurį klavišą naudoti norint išgauti duomenis iš objektų saugyklos ar indekso.

Šiame pavyzdyje galime pamatyti, kad mūsų pagrindinis kelias yra ypatybės ID ir jis apibrėžtas 10 eilutėje. Tada mes grąžiname visus elementus iš duomenų bazės. Tai labai paprastas naudojimo atvejis, todėl jei norite sužinoti daugiau apie „IndexedDB“ veikimą, patariu perskaityti šį puikų straipsnį.

Išvada

Naudojimasis neprisijungus naudojamu žiniatinkliu yra naudingas vartotojui, ir kai kurios įmonės pradėjo jį plėšti. Tai daugiausia priklauso nuo paslaugų darbuotojų, „JavaScript“ scenarijų, kurie veikia jūsų svetainės fone.

Mes matėme, kaip juos naudoti per paslaugų darbuotojo gyvavimo ciklą ir ką galite padaryti naudodami talpyklos ir „Fetch“ API. Galimybės yra beveik neribotos. todėl būkite kūrybingi ir ne per godūs prietaiso saugykloje.

Jūs netgi galite naudoti duomenų bazes neprisijungę: tam, kas yra skirta „IndexedDB“. Šios galimybės neprisijungus tikrai yra žiniatinklio ateities dalis, todėl ji puikiai tinka naujo tipo „Google“ kuriamoms svetainėms: „Progressive Web Apps“.

Papildoma literatūra:

  • „Cookbook“ neprisijungus: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA ir neprisijungus: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Laboratorija: failų talpykla su paslaugų darbuotoju: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Aptarnaujančio asmens gyvenimo ciklas: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Tarnaujančio asmens gyvenimo ciklo atskleidimas: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Greičiau suaktyvinkite paslaugų darbuotojus: //davidwalsh.name/service-worker-claim
  • Tiesioginiai duomenys darbuotojui: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • IndeksuotaDBPagrindinės sąvokos: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Darbo su nepertraukiama saugykla neprisijungus naudojimas su „IndexedDB“: