React PWA - 强制点击更新

Question

社区，

我正在 "programmatic presentations" 使用 React (CLI) 和 PWA (register())。一切正常，但任何时候进行一些更改，最终应用程序的 URL 都需要更改，以便加载所有更改。

整个机制是这样的：

最终应用发送到Github,
此私人仓库已连接到 Netlify，
Netlify 生成唯一的 URL,
用户访问此 Netlify URL 并在 iPad、
整个应用程序在 Safari 引擎下运行。
如果对代码进行任何更改，我必须更改 Netlify 中的 link 并将这个新的 link 发送给其他人。

上面提到的过程工作得很好，但老实说，如果有某种功能允许按需请求最新更新——比方说——点击一个按钮。

这样的事情可能吗？

谢谢评论！

亲切的问候林克

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 - 强制点击更新

React PWA - enforce update on click

javascript

reactjs

progressive-web-apps

netlify