Как предварительно кэшировать файлы из AWS в мое приложение React с сервис-работником? - PullRequest
Новая
       5

Как предварительно кэшировать файлы из AWS в мое приложение React с сервис-работником?

0 голосов
/ 24 марта 2020

Я создаю игру на React и хочу предварительно кэшировать все файлы с AWS на компьютер пользователя, а затем использовать их из serviceworker.

Я нашел такой код 

import React, { Component, lazy } from 'react';

import AvatarComponent from './AvatarComponent';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      details: false
    }
  }

  showDetails() {
    this.setState({ details: true });
  }

  render() {
    const { details } = this.state;

    return (
      <div className="App">
        { !details && <button onClick={() => this.showDetails()}>CLICK ME</button> }
        { details &&   
          <div>
            <AvatarComponent />
          </div> 
        }
      </div>
    );
  }
}

export default App;

в AvatarComponent У меня есть 

import React from 'react';
import imageSrc from './pupper.jpg';

const AvatarComponent = () => (
  <img alt="Puppy" src={imageSrc} />
)

export default AvatarComponent;

Это приложение работает, как и ожидалось - когда я нажимаю CLICK ME Кнопка Я вижу, что pupper.jpg изображение загружается с сервера.

Что мне нужно сделать для предварительного кэширования и сохранения изображений, а также ios и видео, хранящихся в Amazon Simple Storage Service (Amazon S3)?

Вот рабочий пример, который у меня есть https://glitch.com/~daffy-snowy-suggestion

1 Ответ

0 голосов
/ 25 марта 2020

Amazon S3 не является CDN, поскольку он кэширует файлы. Используйте CloudFront для кэширования файлов, хранящихся на S3.

...