离线模式下Workbox获取第三方图片URL出现net::ERR_INTERNET_DISCONNECTED错误排查

项目背景 #

• 基于React开发，需支持离线模式，嵌入客户PWA应用
• 使用Webpack 3打包
• 核心逻辑：用户点击按钮后显示下载页面，直至所有资源准备完成
• 本地资源（launcher.bundle.js、本地base64图片、HTTP接口请求）离线可正常使用

问题描述 #

在localhost环境测试时，已预取所有资源，但切换到离线模式后，请求第三方URL时出现GET URL net::ERR_INTERNET_DISCONNECTED错误，而该URL已确认预取成功。

相关代码 #

构建配置（Webpack 3） #

new CopyWebpackPlugin([
  {
    from: 'src/index.html',
    to: 'index.html',
  },
  {
    from: 'src/service-worker.js',
    to: 'service-worker.js',
  }
]),

index.js #

if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('./service-worker.js');
  });
}

App.openLaucher()

App.openDownload()

下载页面结构 #

export default class OfflineMode extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() => {
    this.downloadFiles()
  }

  downloadFiles = async () => {
    await someDonwloadfunction()
  }

  render() {
    <div>{this.state.progress}</div>
  }
}

完整service-worker.js #

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');

workbox.googleAnalytics.initialize();

const cacheName = 'webmodule:network-first';
const networkFirst = new workbox.strategies.NetworkFirst({
  cacheName,
  matchOptions: {
    ignoreSearch: true,
    ignoreVary: true
  },
  plugins: [
    new workbox.cacheableResponse.CacheableResponsePlugin({statuses: [0, 200]}),
    new workbox.rangeRequests.RangeRequestsPlugin(),
  ],
});

workbox.routing.registerRoute(/^https:\/\/somewhere\//, networkFirst);

workbox.routing.registerRoute(/.*\.(?:html|js|css|png|jpg|jpeg|svg|gif|json)/, networkFirst);

workbox.routing.registerRoute(/^localhost\//, networkFirst);

self.addEventListener('install', function (event) {
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
  event.waitUntil(self.clients.claim());
});

页面内容 #

export default class launcher extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    <div>
      <img crossOrigin="anonymous" src={'https://www.keycdn.com/img/support/cors.png'} />
    </div>

  }
}

相关截图 #

• 预取成功截图：
• 错误日志截图：
• 本地文件请求截图：
• 第三方URL请求截图：
• Service Worker截图：

内容的提问来源于stack exchange，提问作者M.R.