Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter (web) - how to reload the Flutter PWA

This is the similar question (with wrong title): Flutter Web - How to reload currently Active Page

Running the Flutter web app as PWA I need to allow users to initiate refresh and thus update the (web) app.

Unfortunately import 'dart:html' as html; is not allowed anymore when having the same codebase for web and mobile native apps. So following code is not the option:

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

What is the correct approach?

EDIT: I have managed to use 'dart:js' in the same codebase for pwa and mobile using conditional imports. This means I can call JavaScript from within the Flutter code. Unfortunately location.reload(true); does not reload the PWA.

Ideally I would have the Flutter approach for the PWA reload / update or JavaScript workaround.

EDIT2: The whole issue is within the PWA handling of refresh button / window reload.

Unfortunately service worker's skipWaiting() can be called only from within service worker ( https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase )

The correct approach seams to be sending the skipWaiting message to the new instance of the service worker.

However skipWaiting is not yet fully supported on some browsers (iOS?) so the safer approach seams to be just unregistering the worker...

I ended up using following to stop the worker and reload.

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

Related:

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/

like image 369
Radek Avatar asked May 26 '20 09:05

Radek


People also ask

Is flutter web a PWA?

Flutter allows you to build multiple apps with one code base, so you can build a web app, or a PWA, if you already have your codebase for Android and iOS, quite quickly. Read this article about PWAs vs native apps to understand the pros and cons of PWAs.

How do I refresh a page from another page in flutter?

pushNamed(context, '/page2'). then((_) { // This block runs when you have returned back to the 1st Page from 2nd. setState(() { // Call setState to refresh the page. }); }); (In your 2nd page): Use this code to return back to the 1st page.


1 Answers

Flutter 2.10.3

In the newest version of Flutter (2.10.3 at the time of writing this), PWAs will automatically update when the serviceWorkerVersion changes in your index.html file.

From this issue, Jonah Williams comments:

"The app will update after the new version has been downloaded and the page revisited."

You can read more about general PWA support by Flutter here. For the pull request that added server worker support, see this.


If you want to allow users to manually fetch a new version of your app, you can use the universal_html package which works on all platforms.

  import 'package:universal_html/html.dart' as html;

  onTap: () {
     html.window.location.reload();
   },

Keep an eye on this issue for an improvement to how server worker caching is handled.

like image 161
Joe Muller Avatar answered Oct 06 '22 16:10

Joe Muller