Flutter (web) - 如何重新加载 Flutter PWA

Question

这是类似的问题(标题错误):Flutter Web - How to reload currently Active Page

将 Flutter Web 应用程序作为 PWA 运行我需要允许用户启动刷新，从而更新(Web)应用程序。

不幸的是，当 Web 和移动原生应用程序具有相同的代码库时，不再允许使用 import 'dart:html' as html;。所以下面的代码不是选项:

  RaisedButton(
    child: Text("Update me"),
    onPressed: () {
      if (kIsWeb) html.window.location.reload();
    },
  ),

正确的做法是什么？

编辑:
我已经设法使用条件导入在 pwa 和移动设备的相同代码库中使用“dart:js”。这意味着我可以从 Flutter 代码中调用 JavaScript。不幸的是 location.reload(true); 不会重新加载 PWA。

理想情况下，我会将 Flutter 方法用于 PWA 重新加载/更新或 JavaScript 解决方法。

编辑2:
整个问题在于刷新按钮/窗口重新加载的 PWA 处理。

不幸的是 service worker 的 skipWaiting() 只能从 service worker ( https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase ) 内部调用

正确的方法似乎是将skipWaiting消息发送到服务 worker 的新实例。

然而，某些浏览器(iOS？)尚未完全支持skipWaiting，因此更安全的方法接缝只是取消注册 worker ...

我最终使用以下来停止工作人员并重新加载。

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.getRegistration().then(swr => {swr.unregister().then(
     () => {location.reload(true)}
   )});
} else {location.reload(true)}

有关的:

Access service worker skipWaiting from within App build with Webpack+Workbox

https://medium.com/@nekrtemplar/self-destroying-serviceworker-73d62921d717

https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68

https://deanhume.com/displaying-a-new-version-available-progressive-web-app/

Answer 1

解决方法是导航到您的应用程序入口点路线 '/'

`Navigator.of(context).pushNamedAndRemoveUntil(
              '/,
              (Route<dynamic> route) => false
            );`