Кеш рабочей панели не используется тегом ‹img /›

Настраивать

"workbox-cdn": "^5.1.4",
"nuxt": "^2.15.2"

Контекст

Мое приложение Pictalk позволяет пользователям сохранять и получать пиктограммы. Таким образом, практически у каждого пользователя есть собственный набор пиктограмм. Пока он работает только онлайн, но я хочу реализовать оффлайн-режим.

Технические подробности

Я показываю все свои пиктограммы с помощью тега html <img .../>. Каждый раз, когда я загружаю новую пиктограмму, я делаю так:

created(){
          if(navigator.onLine){
          caches.open('pictos').then((cache) => {
            cache.add(this.collection.path)
            .then(() => {})
            .catch((err)=> {console.log(err)})
          });
      }
  },

Вот снимок экрана кэш-памяти: введите здесь описание изображения Как мы видим, URL правильный, а запросы кэшируются правильно.

Проблема

Тег <img .../> не использует созданный мной кеш рабочей панели. введите описание изображения здесь


vue.js caching progressive-web-apps workbox nuxtjs
person Ratatinator97    schedule 06.03.2021    source источник
comment
Если вы добавляете изображения в кеш из вашего основного приложения (например, app.js), Workbox не будет знать о кешированных изображениях, поэтому не будет их искать. Поэтому вам нужно будет настроить Workbox для кеширования и обслуживания файлов из кеша одним из двух способов: время выполнения или предварительное кэширование. С Nuxt вам, вероятно, придется использовать плагин, чтобы каждый раз создавать нового Service Worker вы строите свой проект.   -  person Charis Theo    schedule 08.03.2021
comment
Итак, я просто добавил в свой проект модуль Nuxtjs PWA и, как мне кажется, должен добавить: workbox: { runtimeCaching: [ { // Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*') urlPattern: 'https://my-cdn.com/.*', // Defaults to `NetworkFirst` if omitted // handler: 'NetworkFirst', // Defaults to `GET` if omitted // method: 'GET' } ] } в свой файл nuxtjs.config.js. Я попробую это сделать, как только смогу, и опубликую здесь решение, если оно будет успешным.   -  person Ratatinator97    schedule 08.03.2021
comment
Все еще не работает :( Я получаю те же ошибки, что и раньше ... Вот мой репозиторий git на случай, если он кому-то понадобится! https://github.com/Ratatinator97/PicTalk-Frontend   -  person Ratatinator97    schedule 08.03.2021
comment
В вашем github.com/Ratatinator97/PicTalk нет конфигурации Workbox -Frontend / blob / master /   -  person Jeff Posnick    schedule 10.03.2021
comment
Привет, это в ветке разработчиков   -  person Ratatinator97    schedule 11.03.2021
comment
У вас workbox за пределами pwa раздела. Что будет, если вы исправите это?   -  person Allan Chain    schedule 12.03.2021
comment
@AllanChain теперь работает только с моим localhost сервером и внешним интерфейсом (localhost:3001 для задней части и localhost:3000 для передней части), но не в производственной конфигурации (у меня передняя часть находится в Vercel, а задняя часть размещена где-то еще ...). fornt находится по адресу: www.pictalk.xyz, а обратно по адресу api.pictalk.xyz У меня не должно быть проблем с CORS ...   -  person Ratatinator97    schedule 12.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

Нашел решение здесь и здесь.

Вот файлы, которые мне пришлось изменить, чтобы заставить его работать:

Во-первых, мои теги <img/> должны были использовать метод crossorigin="anonymous":

<img class="image" style :src="path" crossorigin="anonymous"/>

Как только теги <img/> станут более гибкими с их происхождением, мы можем приступить к построению нашего настраиваемого зарегистрированного маршрута рабочего окна:

// plugins/workboxConfig.js
workbox.routing.registerRoute(
  new RegExp('https://myapi\\.somewhere\\.com/pictalk/image/.*\\.(png|jpg|jpeg)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'pictos',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [200] }),
      new workbox.rangeRequests.RangeRequestsPlugin(),
    ],
    matchOptions: {
      ignoreSearch: true,
      ignoreVary: true
    }
  }),
);

Мне пришлось объявить этот файл здесь, в nuxtjs.config.js:

pwa: {
   workbox: {
      cachingExtensions: '@/plugins/workboxConfig.js'
   }
}
person Ratatinator97    schedule 21.03.2021