Как использовать файл, загруженный в кэш, а не загружать его снова при использовании serviceWorker в React? - PullRequest
Новая
       3

Как использовать файл, загруженный в кэш, а не загружать его снова при использовании serviceWorker в React?

0 голосов
/ 16 января 2020

Я пытаюсь выяснить, как работает serviceWorker. Моя цель - загрузить все медиа-файлы (видео, музыку c, изображения) одновременно в самый первый момент, когда приложение запускается, и после этого вызывать их из serviceWorker во время работы с приложением.

Я создал массив обещаний axios.get и показал процесс загрузки с помощью простого (только для примера) индикатора выполнения. 

axios.all([
      axios.get("https://www.asianscientist.com/wp-content/uploads/bfi_thumb/animal-animal-photography-ape-1670413-38cshn63e0eeraruoe2k1s.jpg", {
        responseType: "arraybuffer",
      }).then(res => {
        setState(state => ({ ...state, percent: state.percent + (100 / 3) }));
      }),
      axios.get("https://ichef.bbci.co.uk/news/410/cpsprodpb/025B/production/_85730600_monkey2.jpg", {
        responseType: "arraybuffer"
      }).then(res => {
        setState(state => ({ ...state, percent: state.percent + (100 / 3) }));
      }),
      axios.get("https://ichef.bbci.co.uk/news/410/cpsprodpb/E9DF/production/_96317895_gettyimages-164067218.jpg", {
        responseType: "arraybuffer"
      }).then(res => {
        setState(state => ({ ...state, percent: state.percent + (100 / 3) }));
      })
    ]).then(res => console.log("done"));

Я включил serviceWorker в React с этой строкой: 

serviceWorker.register();

насколько я понял принцип работы с serviceWorker, после этого он должен загружать изображения из serviceWorker (в Chrome DevTools во вкладке Network он должен показывать serviceWorker в размере столбца), но это не так. Также я проверил это так: я загружал изображения. Отключил inte rnet и нажал, чтобы загрузить их (см. Мой пример https://codesandbox.io/s/pedantic-star-dkrvk), но это также не сработало.

Полный Приложение. js здесь https://codesandbox.io/s/pedantic-star-dkrvk

Для создания приложения я использовал create-react-app

index. js: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.register();
...