Динамический кеш angular 4 не работает PWA

Я работаю над прогрессивным веб-приложением в angular 4, которое, похоже, отлично работает в онлайн-режиме. Он также работает в автономном режиме, если я не использую динамическое кеширование.

Итак, вот этот ngsw-manifest.json, в котором я проделал некоторую настройку:

{
    "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
                }
            }
        ]
    }
}

Таким образом, ключ dynamic в приведенном выше json кэширует содержимое страницы для автономного использования. Вот изображение кэшируемого контента:

введите описание изображения здесь

Однако, когда я пытаюсь перезагрузить страницу в автономном режиме после кэширования, содержимое не отображается. Есть какая-то конфигурация, которую я пропустил?


angular caching progressive-web-apps service-worker
person Aakash Thakur    schedule 17.09.2017    source источник
comment
На основе этой документации , подход оболочки приложения основан на кэшировании shell вашего веб-приложения с помощью сервис-воркера. Использование оболочки приложения + модель динамического содержимого значительно улучшает производительность приложения и действительно хорошо работает с кэшированием сервис-воркеров в качестве прогрессивного улучшения. Однако, когда сервис-воркеры не поддерживаются в вашем браузере, ресурсы не кэшируются в автономном режиме, но контент по-прежнему передается по сети, и пользователь по-прежнему получает базовые возможности.   -  person abielita    schedule 18.09.2017
comment
Также жду исправления динамического кеша. github.com/angular/mobile-toolkit/issues/168   -  person bob    schedule 23.09.2017
comment
Привет @bob. Вы смогли найти какое-то решение?   -  person Aakash Thakur    schedule 23.09.2017

Ответы (2)


arrow_upward
0
arrow_downward

Ожидая готовности ngsw, вы можете использовать пакет npm workbox-build в своем проекте Angular. .

Для предварительного кэширования активов:

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',
});

Для динамического кеширования:

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] }
  })
);

Вы можете кэшировать веб-шрифты и т. Д., Вызвав другой registerRoute. Реалистичный пример использования здесь.

person bob    schedule 09.11.2017

arrow_upward
0
arrow_downward

Даже я столкнулся с той же проблемой, когда использовал ту же конфигурацию. Ниже у меня сработало, и я смог получить список кофе из кеша в автономном режиме. Используйте dataGroups для динамического кэширования в ngsw-config.json, как показано ниже.

    "dataGroups":[
      {
       "name":"api",
       "urls":[
        "/coffees"
       ],
      "cacheConfig": {
       "strategy": "performance",
       "timeout": "10s",
       "maxSize": 30,
       "maxAge": "1d"
       }
     }
   ]

Следующие статьи могут быть полезны:

person Avinash    schedule 04.05.2018