React PWA - 在点击时强制更新答案

【问题标题】：React PWA - enforce update on clickReact PWA - 在点击时强制更新
【发布时间】：2019-09-25 05:08:23
【问题描述】：

社区，

我正在使用 React (CLI) 和 PWA (register()) 进行“编程演示”。一切正常，但只要进行了一些更改，最终应用程序的 URL 就需要更改，以便加载所有更改。

整个机制是这样工作的：

最终的应用程序被发送到 Github，
此私有存储库已连接到 Netlify，
Netlify 生成一个唯一的 URL，
用户访问此 Netlify URL 并在 iPad 上点击“添加到主屏幕”，
整个应用在 Safari 引擎下运行。
如果对代码进行了任何更改，我必须更改 Netlify 中的链接并将这个新链接发送给他人。

上述过程运行良好，但老实说，拥有某种功能会很好，该功能允许按需请求最新更新 - 比如说 - 点击按钮。 p>

这样的事情可能吗？

感谢cmets！

亲切的问候林克

【问题讨论】：

你在你的 pwa 应用中使用 serviceworker 吗？
这就是问题——我在 React CLI 中实际做了什么——当我完成所有工作后，我只需将 PWA 函数从“unregister()”更改为“register()”。一切都由 React 自己处理。 Ofc，我定义 manifest.json 等等，但所有 PWA 逻辑都是由 React 完成的 - 所以我想知道是否有任何内置功能（如函数）我可以在请求更新资产时调用。

标签： javascript reactjs progressive-web-apps netlify

【解决方案1】：

在serviceWorker.js文件可以找到这段代码

if (config && config.onUpdate) {
    config.onUpdate(registration);
 }

所以实现config.onUpdate函数

创建一个文件swConfig.js

export default {
 onUpdate: registration => {
   registration.unregister().then(() => {
   window.location.reload()
  })
 },
}

在index.js将实现函数发送给serviceWorker

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

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

查看此存储库 https://github.com/wgod58/create_react_app_pwaupdate

【讨论】：

【解决方案2】：

如果您想通过单击按钮来控制更新，我使用了以下 sn-p：

注意：如果您的应用必须离线工作，您应该添加一些额外的逻辑来验证用户是否有互联网连接，因为如果无法获取 service-worker，以下代码会破坏应用。

import React from 'react';
function App(){
  const updateApp = () => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.ready.then((registration) => {
        registration.unregister().then(() => {
          window.location.reload();
        });
      });
    }}

  return(
    <div style={{margin:"auto"}}>
      <button onClick={updateApp}>
        Update App
      </button>
    </div>
  );
}

https://gist.github.com/juliomilani/6492312d1eb657d06b13c9b87d5ad023

【讨论】：