title: React.js error: The service worker navigation preload request was cancelled before 'preloadResponse' settled
body: <p>I have an issue with my React application (with Redux Saga), I'm getting the console error:</p>
  <pre><code>The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.
  </code></pre>
  <p>I see this error on the console only on Chrome, not in Firefox or Edge.
  This error does not affect my application.</p>
  <p>The following steps reproduce the error:<br /><br />
  <strong>1. Main page upload.</strong><br /><br />
  <a href="https://i.stack.imgur.com/8dxli.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8dxli.png" alt="enter image description here" /></a><br /><br />
  <strong>2. Go to movie details page.</strong><br /><br />
  <a href="https://i.stack.imgur.com/QVInT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QVInT.png" alt="enter image description here" /></a><br /><br />
  <strong>3. Go back to main page.</strong><br /><br />
  <a href="https://i.stack.imgur.com/7SLtA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7SLtA.png" alt="enter image description here" /></a><br /><br /></p>
  <p><strong>Main.jsx</strong></p>
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { mainActions } from '../../store/actions/actions';
  import './Main.scss';
  import { MoviesList, SearchPanel } from '../../components';
  
  const propTypes = {};
  const defaultProps = {};
  
  class Main extends Component {
  
    constructor(props) {
      super(props);
      this.handleSearchTextChange = this.handleSearchTextChange.bind(this);
      this.handleLoadMoreButtonClick = this.handleLoadMoreButtonClick.bind(this);
      this.handleMovieClick = this.handleMovieClick.bind(this);
      this.handleFavoriteMovieClick = this.handleFavoriteMovieClick.bind(this);
    }
  
    componentDidMount() {
      this.handleComponentDidMount();
    }
  
    handleComponentDidMount() {
      const { moviesList } = this.props;
      if (!moviesList || moviesList.length &lt;= 0) {
        this.getMovies(null, false);
      }
    }
  
    handleLoadMoreButtonClick() {
      this.getMovies(null, false);
    }
  
    handleMovieClick(e) {
      if (e.target.className === 'movie') {
        this.props.history.push(`/details/${e.currentTarget.dataset.id}`);
      }
    }
  
    handleSearchTextChange(e) {
      const { pageNumber, favoriteMoviesList } = this.props;
      this.props.onSearchTextChange({
        searchText: e.target.value,
        pageNumber: pageNumber,
        favoriteMoviesList: favoriteMoviesList
      });
    }
  
    handleFavoriteMovieClick(e) {
      const { id, name, posterId } = e.currentTarget.dataset;
      const { moviesList, favoriteMoviesList } = this.props;
      this.props.onUpdateFavoriteMovies({
        updatedMovie: { id: id, name: name, posterId: posterId },
        favoriteMoviesList: favoriteMoviesList,
        moviesList: moviesList
      });
    }
  
    getMovies(updatedSearchText, isSearchChange) {
      const { searchText, pageNumber, favoriteMoviesList } = this.props;
      this.props.onLoadMovies({
        pageNumber: pageNumber,
        favoriteMoviesList: favoriteMoviesList,
        updatedSearchText: isSearchChange ? updatedSearchText : searchText,
        isSearchChange: isSearchChange
      });
    }
  
    render() {
      const { searchText, isLoadingMoreMovies, isPager, moviesList } = this.props;
      return (
        &lt;div className=&quot;main-area&quot;&gt;
          &lt;SearchPanel
            searchText={searchText}
            onSearchTextChange={this.handleSearchTextChange}
          /&gt;
          &lt;MoviesList
            pageName='movies'
            moviesList={moviesList}
            isLoadingMoreMovies={isLoadingMoreMovies}
            isPager={isPager}
            onLoadMoreClick={this.handleLoadMoreButtonClick}
            onMovieClick={this.handleMovieClick}
            onFavoriteMovieClick={this.handleFavoriteMovieClick}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  Main.propTypes = propTypes;
  Main.defaultProps = defaultProps;
  
  const mapStateToProps = (state) =&gt; {
    return {
      searchText: state.main.searchText,
      pageNumber: state.main.pageNumber,
      isLoadingMoreMovies: state.main.isLoadingMoreMovies,
      isPager: state.main.isPager,
      moviesList: state.main.moviesList,
      favoriteMoviesList: state.main.favoriteMoviesList
    };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      onLoadMovies: (request) =&gt; dispatch(mainActions.loadMovies(request)),
      onSearchTextChange: (request) =&gt; dispatch(mainActions.searchTextChange(request)),
      onUpdateFavoriteMovies: (request) =&gt; dispatch(mainActions.updateFavoriteMovies(request))
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Main);
  </code></pre>
  <p><strong>Details.jsx</strong></p>
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { detailsActions, mainActions } from '../../store/actions/actions';
  import './Details.scss';
  import { ActorsList, ButtonClick, CrewsList, FeaturesList, PageTitle, ProductionsList, Rating, Trailer } from '../../components';
  import movieUtils from '../../utils/movie.utils';
  
  const propTypes = {};
  const defaultProps = {};
  
  class Details extends Component {
      constructor(props) {
          super(props);
          this.handleBackClick = this.handleBackClick.bind(this);
          this.handleFavoriteMovieClick = this.handleFavoriteMovieClick.bind(this);
          this.isFavorite = false;
      }
  
      componentDidMount() {
          this.handleComponentDidMount();
      }
  
      handleComponentDidMount() {
          if (this.props.moviesList.length &lt;= 0) {
              this.handleBackClick();
              return;
          }
          const movieId = this.props.match.params.id;
          if (!movieId) {
              this.handleBackClick();
              return;
          }
          this.props.onLoadMovieDetails(movieId);
          this.updateIsFavorite(movieId);
      }
  
      numberWithCommas(number) {
          return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
  
      updateIsFavorite(movieId) {
          this.isFavorite = this.props.favoriteMoviesList.findIndex(movie =&gt; parseInt(movie.id) === parseInt(movieId)) &gt; -1;
      }
  
      handleBackClick() {
          this.props.history.push(`/`);
      }
  
      handleFavoriteMovieClick() {
          const { movie, moviesList, favoriteMoviesList } = this.props;
          this.props.onUpdateFavoriteMovies({
              updatedMovie: { id: movie.id, name: movie.title, posterId: movie.poster_path },
              favoriteMoviesList: favoriteMoviesList,
              moviesList: moviesList
          });
          this.updateIsFavorite(movie.id);
      }
  
      render() {
          const { movie, youtubeKey, credits } = this.props;
          if (!movie) {
              return null;
          }
          const { adult, poster_path, budget, genres, homepage, imdb_id, original_language, original_title,
              overview, popularity, production_companies, production_countries, release_date, revenue, runtime, spoken_languages,
              status, tagline, title, video, vote_average, vote_count } = movie;
          const genresText = genres.map(genre =&gt; genre.name).join(', ');
          const countriesText = production_countries.map(country =&gt; country.name).join(', ');
          const languagesText = spoken_languages.map(language =&gt; language.name).join(', ');
          const featuresList = [
              { item: 'Release Date', value: release_date },
              { item: 'Budget', value: `$${this.numberWithCommas(budget)}` },
              { item: 'Revenue', value: `$${this.numberWithCommas(revenue)}` },
              { item: 'Length', value: `${runtime} minutes` },
              { item: 'Popularity', value: popularity },
              { item: 'Original Title', value: original_title },
              { item: 'For Adults', value: adult ? 'Yes' : 'No' },
              { item: 'Original Language', value: original_language },
              { item: 'Spoken Languages', value: languagesText },
              { item: 'Countries', value: countriesText },
              { item: 'Status', value: status },
              { item: 'Is Video', value: video ? 'Yes' : 'No' }
          ];
          const linksList = [];
          if (homepage) {
              linksList.push({ id: 1, name: 'Homepage', url: homepage });
          }
          if (imdb_id) {
              linksList.push({ id: 2, name: 'IMDB', url: `https://www.imdb.com/title/${imdb_id}` });
          }
          const actorsList = movieUtils.removeDuplicates(credits ? credits.cast ? credits.cast : null : null, 'name');
          const crewsList = movieUtils.removeDuplicates(credits ? credits.crew ? credits.crew : null : null, 'name');
          return (
              &lt;div&gt;
                  &lt;section className=&quot;details-area&quot;&gt;
                      &lt;PageTitle
                          pageName='details'
                          pageTitle='Details'
                      /&gt;
                      &lt;ul className=&quot;details-content&quot;&gt;
                          &lt;li className=&quot;details-left&quot; style={{ backgroundImage: `url('https://image.tmdb.org/t/p/original${poster_path}')` }}&gt;&lt;/li&gt;
                          &lt;li className=&quot;details-right&quot;&gt;
                              &lt;h2&gt;{title} ({release_date.substr(0, 4)})&lt;/h2&gt;
                              &lt;p className=&quot;genres&quot;&gt;{genresText}&lt;/p&gt;
                              &lt;p className=&quot;description short&quot;&gt;{tagline}&lt;/p&gt;
                              &lt;Rating
                                  rating={vote_average}
                                  votesCount={this.numberWithCommas(vote_count)}
                              /&gt;
                              &lt;p className=&quot;description full&quot;&gt;{overview}&lt;/p&gt;
                              &lt;div className=&quot;extra&quot;&gt;
                                  &lt;FeaturesList
                                      featuresList={featuresList.slice(0, 5)}
                                      linksList={null}
                                      isFavorite={this.isFavorite}
                                      onFavoriteMovieClick={this.handleFavoriteMovieClick}
                                  /&gt;
                                  {youtubeKey &amp;&amp; &lt;Trailer
                                      youtubeKey={youtubeKey}
                                  /&gt;}
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;div className=&quot;extra-features&quot;&gt;
                              &lt;FeaturesList
                                  featuresList={featuresList.slice(5, featuresList.length)}
                                  linksList={linksList}
                                  isFavorite={null}
                                  onFavoriteMovieClick={null}
                              /&gt;
                              &lt;ProductionsList
                                  productionsList={production_companies}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/ul&gt;
                  &lt;/section&gt;
                  &lt;section className=&quot;actors-area&quot;&gt;
                      &lt;PageTitle
                          pageName='actors'
                          pageTitle='Cast'
                      /&gt;
                      &lt;ActorsList
                          actorsList={actorsList}
                      /&gt;
                  &lt;/section&gt;
                  &lt;section className=&quot;crew-area&quot;&gt;
                      &lt;PageTitle
                          pageName='crew'
                          pageTitle='Crew'
                      /&gt;
                      &lt;CrewsList
                          crewsList={crewsList}
                      /&gt;
                  &lt;/section&gt;
                  &lt;ButtonClick
                      buttonText={'Back'}
                      buttonTitle={'Back'}
                      isLoading={false}
                      onClick={this.handleBackClick}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  Details.propTypes = propTypes;
  Details.defaultProps = defaultProps;
  
  const mapStateToProps = (state) =&gt; {
      return {
          movie: state.details.movie,
          youtubeKey: state.details.youtubeKey,
          credits: state.details.credits,
          moviesList: state.main.moviesList,
          favoriteMoviesList: state.main.favoriteMoviesList
      };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onLoadMovieDetails: (movieId) =&gt; dispatch(detailsActions.loadDetails(movieId)),
          onUpdateFavoriteMovies: (request) =&gt; dispatch(mainActions.updateFavoriteMovies(request))
      };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Details);
  </code></pre>
  <p>What I already looked in:<br />
  <a href="https://stackoverflow.com/questions/64064215/getting-the-service-worker-navigation-preload-request-was-cancelled-before-prel">Getting The service worker navigation preload request was cancelled before &#39;preloadResponse&#39; settled</a><br />
  <a href="https://docs.microsoft.com/en-us/answers/questions/108004/getting-the-service-worker-navigation-preload-requ.html" rel="noreferrer">https://docs.microsoft.com/en-us/answers/questions/108004/getting-the-service-worker-navigation-preload-requ.html</a><br />
  <a href="https://support.google.com/mail/thread/4055804?hl=en" rel="noreferrer">https://support.google.com/mail/thread/4055804?hl=en</a><br />
  <a href="https://love2dev.com/pwa/service-worker-preload/" rel="noreferrer">https://love2dev.com/pwa/service-worker-preload/</a><br /></p>
  <p>I tried to put this on Details.jsx page, but it didn't work:</p>
  <pre><code>self.addEventListener('fetch', event =&gt; {
      event.respondWith(async function () {
          // Respond from the cache if we can
          const cachedResponse = await caches.match(event.request);
          if (cachedResponse) return cachedResponse; // Else, use the preloaded response, if it's there
          const response = await event.preloadResponse;
          if (response) return response; // Else try the network.
          return fetch(event.request);
      }());
  });
  
  self.addEventListener('activate', event =&gt; {
      event.waitUntil(async function () {
          // Feature-detect
          if (self.registration.navigationPreload) { // Enable navigation preloads!
              console.log('Enable navigation preloads!');
              await self.registration.navigationPreload.enable();
          } return;
      })();
  });
  </code></pre>
  <p>How can I solve this issue? Thanks.</p>