web-dev-qa-db-fra.com

Angular 5 et Service Worker: Comment exclure un chemin particulier de ngsw-config.json

J'ai ngsw-config.json (tiré du docs ):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Sur mon site, il existe un lien vers le fil RSS /api/rss, qui devrait s'ouvrir dans un nouvel onglet de navigateur sans charger l'application Angular. Comment puis-je l'exclure d'une liste de ressources dont la demande est redirigée vers index.html?

UPD: J'ai essayé mais je n'ai pas utilisé la configuration suivante (voir !/api/rss):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "patterns": ["!/api/rss"],
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "!/api/rss"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}
angularservice-workerangular-service-worker
15
ktretyak

Grâce au Pedro Arantesconseil , j’ai atteint la prochaine configuration opérationnelle (voir dataGroups et "maxAge": "0u"):

{
  "index": "/index.html",
  "dataGroups":
  [
    {
      "name": "api",
      "urls": ["/api"],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ],
  "assetGroups":
  [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}
13
ktretyak

Avez-vous déjà essayé de créer des groupes de données? dataGroups sont utilisés pour les demandes de données telles que assetGroups pour les actifs (qui sont des fichiers).

Groupes de données 

Contrairement aux ressources des ressources, les demandes de données ne sont pas versionnées avec l'application. Ils sont mis en cache conformément à la configuration manuelle des stratégies plus utiles pour des situations telles que les demandes d'API et autres dépendances de données.

Interface du groupe de données:

export interface DataGroup {
  name: string;
  urls: string[];
  version?: number;
  cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };
}

Vous pouvez créer un groupe de données qui exclut /api/rss (si "!/api/rss" ne fonctionne pas, vous pouvez ajouter toutes les autres API dans urls": ["/api/user", "/api/admin"]:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "assetGroup1",
    ...
  }, {
    "name": "assetGroup1",
    ...
  }],
  "dataGroups": [{
    "name": "dataGroup1";
    "urls": ["!/api/rss"];
    cacheConfig: {
      maxSize: 50;
      maxAge: "3d12h";
    }
  }, {
    "name": "dataGroup2";
    "urls": ["/api/user"];
    cacheConfig: {
      maxSize: 40;
      maxAge: "3d12h";
    }
  }]
}
12
Pedro Arantes

Le fichier ngsw-configuration.json utilise le format global pour les chemins de correspondance de modèle.

Patterns use a limited glob format:

** matches 0 or more path segments.
* matches exactly one path segment or filename segment.
The ! prefix marks the pattern as being negative, meaning that only files that don't match the pattern will be included.

Ce qui est important ici, c'est le préfixe !, qui peut être utilisé pour exclure un chemin. Par exemple, un modèle global de !/api/rss devrait exclure ce chemin.

Pour exclure un chemin de votre fichier nags-configuration.json, ajoutez simplement le caractère ! à ce modèle de chemin.

6
Trent

Dans le fichier ngsw-config.json { "index": "/index.html", "dataGroups": [ { "name": "api", "urls": ["!/**/*profileimageupload*"], "cacheConfig": { "maxSize": 0, "maxAge": "0u", "strategy": "freshness" } } ]
}

par exemple. Si votre API ressemble à https://api.example.com/profileimageupload/ , ajoutez le dernier segment du service/API.

J'ajoute profileimageupload que je veux exclure (supprimer) en appelant le technicien de maintenance, c'est pourquoi j'ai ajouté!/**/votre nom de service/Api,

0
Sachin from Pune