typescript - Kuinka luet nykyisen PWA:n version hashin Angularissa?


Haluaisin pystyä lukemaan tällä hetkellä aktiivisen Angular PWA:ni hajautusarvon. En kuitenkaan näe mitään mekanismia sen tekemiseen.

SwUpdate-objekti tarjoaa havaittavia kohteita, jotka antavat sinun lukea nykyisen version hajautusarvon kun uusi versio aktivoituu tai kun se tulee saataville, mutta se ei näytä tarjoavan mitään staattista menetelmää nykyisen version hajautusarvon saamiseksi.

class SwUpdate {
  available: Observable<UpdateAvailableEvent>
  activated: Observable<UpdateActivatedEvent>
  unrecoverable: Observable<UnrecoverableStateEvent>
  isEnabled: boolean
  checkForUpdate(): Promise<void>
  activateUpdate(): Promise<void>
}

Haluaisin pystyä lukemaan jotain kuten SwUpdate.current lukeakseni nykyisen hash-arvon (esim. a518f9f1ab65954c2eafa02fec134fa54b391651) ilman, että minun tarvitsee odottaa available- tai activated-tapahtumaa. Onko tämä mahdollista?

Liite

En koskaan ratkaissut tätä virallista reittiä käyttäen. Kuitenkin ratkaisu, jota lopulta käytin, oli kirjoittaa oma hash-versio sovellukselle CI-rakennusprosessin aikana. Laitoin sen JSON-tiedostoon sovelluksessa, jonka sovellus pystyi itse lataamaan, ja sitten käytin sitä sovellusversion hashina Angularin generoiman hashin sijaan. Käytännössä tämä on toiminut hyvin.

Vastaus #1

Voit käyttää SwUpdate-luokkaa @angular/service-worker-kirjastosta tehdäksesi sen. Esimerkiksi voit tarkistaa sen app.component.ts-tiedostossa näin:

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private swUpdate: SwUpdate) {}

  checkForUpdate() {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe((event) => {
        console.log('Update is available!');
        console.log('Current version: ' + event.current.hash);
        console.log('New available version: ' + event.available.hash);
      });
    }
  }

  ngOnInit() {
    this.checkForUpdate();
  }
}

Vastaus #2

Minulla oli sama ongelma enkä löytänyt vastausta mistään internetistä. En vieläkään ymmärrä, miksi Angular ei tarjoa tätä tietoa suoraan. Joten aloin kokeilla, kunnes löysin jotain, mikä saattaisi toimia. Sovelluksen tiedot ja sen versiot on tallennettu välimuistiin:

Nimenomaan, viimeksi tallennetun version tiiviste löytyy polusta /latest, ja sen voi saada näin:

caches.open('ngsw:/:db:control').then((cache) => {
  cache.match('/latest').then((res) => {
    res?.json().then((body) => {
      console.log(body.latest)
    }
  }
}

Olin myös kiinnostunut saamaan version päivämäärän, joten katsoin kyseisen version manifestia, ja estääkseni sen leviämisen lupauksena, muutin sen observableksi käyttämällä rxjs:n "from"-operaattoria:

    import { from } from 'rxjs';

    getAppVersion() {
        return from(
          caches.open('ngsw:/:db:control').then((cache) => {
            return cache.match('/latest').then((resLts) => {
              return resLts?.json().then((bodyLts) => {
                return cache.match('/manifests').then((resManifests) => {
                  return resManifests?.json().then((manifests) => {
                    return {
                      hash: bodyLts.latest,
                      timestamp: manifests[bodyLts.latest].timestamp,
                    };
                  });
                });
              });
            });
          })
        );
      }

Tähän asti olen päässyt ja olen tyytyväinen tulokseen, vaikka siinä on ongelma, että sivuston ensimmäisellä latauksella välimuisti ei vielä ole olemassa eikä se palauta mitään. Ehkä ajastettuja kyselyjä voidaan tehdä, kunnes tieto löytyy, mutta en ole varma, toimiiko se.

Toinen ongelma, jonka näen, on se, että tämä saattaa olla väliaikainen ratkaisu, koska Angularin dokumentaatiossa ei ole mitään virallista, mikä osoittaisi, että nämä välimuistireitit pysyvät samoina.

No, vaikka tämä kysymys onkin jo useita vuosia vanha, ajattelin olevan tärkeää jakaa se siltä varalta, että se voisi olla hyödyllinen jollekulle muulle.

Aiheeseen liittyviä artikkeleita