Question

社区

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

整个机制如下：

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

上面提到的过程效果很好，但是说实话，具有某种功能会很不错，该功能允许按需请求最新更新-假设-单击按钮即可。

有这种可能吗？

感谢您的评论！

亲切问候林克

Answer 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

Answer 2

如果您想通过单击按钮来控制更新，我确实使用了以下代码段：

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

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

React PWA-点击更新

2 个答案: