Cache dynamique angulaire 4 ne fonctionne pas PWA

Je travaille sur une application web progressive en angulaire 4 qui semble fonctionner correctement en mode en ligne. Il fonctionne également en mode hors ligne, à moins que j'implique une mise en cache dynamique.Cache dynamique angulaire 4 ne fonctionne pas PWA

Donc il y a ce ngsw-manifest.json dans lequel je l'ai fait une configuration:

{ 
    "routing": { 
     "index": "/index.html", 
     "routes": { 
      "/": { 
       "match": "exact" 
      }, 
      "/coffee": { 
       "match": "prefix" 
      } 
     } 
    }, 
    "static.ignore": [ 
     "^\/icons\/.*$" 
    ], 
    "external": { 
     "urls": [ 
      { 
       "url": "https://fonts.googleapis.com/icon?family=Material+Icons" 
      }, 
      { 
       "url": "https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2" 
      } 
     ] 
    }, 
    "dynamic": { 
     "group": [ 
      { 
       "name": "api", 
       "urls": { 
        "http://localhost:3000/coffees": { 
         "match": "prefix" 
        } 
       }, 
       "cache": { 
        "optimizeFor": "freshness", 
        "networkTimeoutMs": 1000, 
        "maxEntries": 30, 
        "strategy": "lru", 
        "maxAgeMs": 360000000 
       } 
      } 
     ] 
    } 
}

Ainsi, la dynamic clé dans le JSON ci-dessus met en cache le contenu de la page pour une utilisation hors ligne. Voici une image du contenu en cours de mise en mémoire cache:

Cependant lorsque je tente de recharger la page en mode hors connexion après la mise en cache, le contenu ne sera pas indiquée. Y a-t-il une configuration que j'ai ratée? En attendant que ngsw soit prêt, vous pouvez utiliser le paquetage workbox-build npm dans votre projet Angular.

Source

2017-09-17 Aakash Thakur

À partir de cette [documentation] (https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures#key_concepts), l'approche de l'application shell repose sur la mise en cache de ' shell' de votre application web en utilisant un travailleur de service. L'utilisation du modèle de contenu dynamique app shell + améliore considérablement les performances de l'application et fonctionne très bien avec la mise en cache des agents de service en tant qu'amélioration progressive. Toutefois, lorsque les techniciens de service ne sont pas pris en charge dans votre navigateur, les actifs ne sont pas mis en cache hors connexion, mais le contenu est toujours récupéré sur le réseau et l'utilisateur obtient toujours une expérience de base. – abielita

J'attends également que le cache dynamique soit corrigé. https://github.com/angular/mobile-toolkit/issues/168 – bob

Hey @bob. étiez-vous capable de trouver une solution à cela? –

Pour les actifs cache préalable:

const workbox: WorkboxBuild = require('workbox-build'); 
workbox.injectManifest({ 
    globDirectory: './dist/', 
    globPatterns: ['**\/*.{html,js,css,png,jpg,json}'], 
    globIgnores: ['build/*', 'sw-default.js', 'workbox-sw.js','assets/icons/**/*'], 
    swSrc: './src/sw-template.js', 
    swDest: './dist/sw-default.js', 
});

Pour la mise en cache dynamique:

const workboxSW = new self.WorkboxSW(); 

// work-images-cache 
workboxSW.router.registerRoute('https://storage.googleapis.com/xxx.appspot.com/(.*)', 
    workboxSW.strategies.cacheFirst({ 
    cacheName: 'work-images-cache', 
    cacheExpiration: { 
     maxEntries: 60 
    }, 
    cacheableResponse: { statuses: [0, 200] } 
    }) 
);

Vous pouvez mettre en cache des polices Web etc. en appelant une autre registerRoute. Exemple d'utilisation réaliste here.

Source

2017-11-09 18:18:26 bob

Cache dynamique angulaire 4 ne fonctionne pas PWA

Répondre

Questions connexes