react-router browserHistory刷新页面4

如果只是前端做路由拦截，并使用缓存，当用户正常刷新时可以正常显示，当用户清空缓存并硬性重新加载时会导致404，因为服务器端没有配置，所以最终还是要服务器端配合将路由都返回 index.html 的，这样不管用户怎么刷新都是可以正常显示的。

Making sure ServiceWorker updates at all
https://github.com/NekR/offline-plugin/blob/master/docs/updates.md#making-sure-serviceworker-updates-at-all

This meant to be tested without adding any code to control SW's update process

Load your webpage
Build and deploy new version with something changed, add alert(1) for example
Reload the webpage
Close the tab of the webpage (make sure there is no more open tabs of this website)
Open that webpage again in a new tab
Check if you see alert(1)

Tell to offline-plugin/runtime to use life-cycle events and apply any update immediately:

// client-side code

const runtime = require('offline-plugin/runtime');

runtime.install({
  onUpdating: () => {
    console.log('SW Event:', 'onUpdating');
  },
  onUpdateReady: () => {
    console.log('SW Event:', 'onUpdateReady');
    // Tells to new SW to take control immediately
    runtime.applyUpdate();
  },
  onUpdated: () => {
    console.log('SW Event:', 'onUpdated');
    // Reload the webpage to load into the new version
    window.location.reload();
  },

  onUpdateFailed: () => {
    console.log('SW Event:', 'onUpdateFailed');
  }
});

• index.js

// Install ServiceWorker and AppCache in the end since
// it's not most important operation and if main code fails,
// we do not want it installed
if (process.env.NODE_ENV === 'production') {
  const runtime = require('offline-plugin/runtime')
  runtime.install({
    onUpdating: () => {
      console.log('SW Event:', 'onUpdating');
    },
    onUpdateReady: () => {
      console.log('SW Event:', 'onUpdateReady');
      // Tells to new SW to take control immediately
      runtime.applyUpdate(); // 如果我们不进行 applyUpdate 那么本地缓存的资源将永远得不到更新直到清除浏览器缓存，显然是我们所不希望的。
    },
    onUpdated: () => {
      console.log('SW Event:', 'onUpdated');
      // Reload the webpage to load into the new version
      window.location.reload();
    },
  
    onUpdateFailed: () => {
      console.log('SW Event:', 'onUpdateFailed');
    }
  });
}

• webpack.prod.babel.js

// main: [':rest:'], // 如果这一行不注释掉，那么在Safari浏览器会加载缓存index.html导致用户不能尽早看到最新效果；

const OfflinePlugin = require('offline-plugin');


    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      excludes: ['.htaccess'],

      caches: {
        // main: [':rest:'], // 如果这一行不注释掉，那么在Safari浏览器会加载缓存index.html导致用户不能尽早看到最新效果；

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,
    }),

参考：
https://www.cnblogs.com/BlingSun/p/10037641.html
https://www.jianshu.com/p/42001f172d90
https://github.com/NekR/offline-plugin