web-dev-qa-db-fra.com

Angular Service Worker SwUpdate.available non déclenché

J'ai de la difficulté à intégrer le service angulars worker dans ma candidature. J'ai suivi le guide et ça marche jusqu'à présent. Je peux créer un raccourci sur mon écran d'accueil et le lancer dans mon application. Le problème est que mon application ne se met pas à jour. Si je change le nom d'un bouton, construis l'application et la place sur mon serveur, l'ancienne version de l'application reste affichée jusqu'à ce que je tape sur F5 (le redémarrage de l'application n'aide pas non plus).

J'ai essayé de mettre le code suivant dans mon ngOnInot de mon application mais cela n'a pas aidé

ngOnInit() {
if (this._SwUpdate.isEnabled) {

  setInterval( () => {
    this._SwUpdate.checkForUpdate().then(() => console.log('checking for updates'));
  }, this.updateInterval);

  this._SwUpdate.available.subscribe(() => {

    console.log('update found');

    this._SwUpdate.activateUpdate().then(() => {
      console.log('updated');
      window.location.reload();
    });

  });

}

}

L'application fonctionne sur ma machine Linux Apache2. Apache cache-t-il quelque chose ou pourquoi mon application ne réalise-t-elle pas qu'il existe une nouvelle version?

Merci d'avance pour votre aide :)

Modifier:

Mon ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "roomPlan",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Edit 2:

Cela fonctionne si je lance l'application locale en utilisant "serveur http", mais lorsque je copie les fichiers sur mon Apache, la mise à jour n'est pas détectée. Dans l'onglet Réseau, je peux voir que l'intervalle fonctionne, l'application reçoit un nouveau "ngsw.json" du serveur toutes les 3 secondes. Si je mets à jour mon application, je peux voir qu'il y a de nouvelles valeurs de hachage dans la réponse pour "ngsw.json". Après cela, le navigateur charge les nouveaux "index.html" et "main. ***. Js" à partir de mon serveur, mais l'application n'applique pas la nouvelle version. Selon mon code, il devrait indiquer "mise à jour trouvée" mais rien ne se passe.

angularcachingapache2angular6pwa
7
user9973068

Vous devrez probablement demander au technicien de service de rechercher des mises à jour sur le serveur. J'utilise généralement un service pour cela:

export class UpdateService {

  constructor(public updates: SwUpdate) {
    if (updates.isEnabled) {
      interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()
        .then(() => console.log('checking for updates')));
    }
  }

  public checkForUpdates(): void {
    this.updates.available.subscribe(event => this.promptUser());
  }

  private promptUser(): void {
    console.log('updating to new version');
    this.updates.activateUpdate().then(() => document.location.reload())); 
  }

Dans votre app-component.ts:

  constructor(private sw: UpdateService) {
    // check the service worker for updates
    this.sw.checkForUpdates();
  }

Pour une raison quelconque, parfois Angular n'enregistre pas correctement le prestataire de services. Ainsi, vous pouvez modifier main.ts:

Remplacer:

platformBrowserDynamic().bootstrapModule(AppModule);

Avec:

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));
5
Michael Doye

En apportant des modifications à votre application, vous devez utiliser cette méthode activateUpdate (

import { SwUpdate } from '@angular/service-worker';

export class AppComponent implements OnInit {
  constructor(private swUpdate: SwUpdate) { }
  ngOninit() {
    this.swUpdate.available.subscribe(event => {
      console.log('A newer version is now available. Refresh the page now to update the cache');
    });
    this.swUpdate.checkForUpdate()
  }
}

Vérifiez ce lien: https://angular.io/guide/service-worker-getting-started

0
Chellappan