Flutter Web, script to provide PWA functionality causes errors on profile/release mode when using canvaskit

[chessasuke]

Bug report

Describe the bug The script to provide PWA functionality causes errors on profile/release mode when using canvaskit.

The default script when creating a new project

   <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      // Service workers are supported. Use them.
      window.addEventListener('load', function () {
        // Wait for registration to finish before dropping the <script> tag.
        // Otherwise, the browser will load the script multiple times,
        // potentially different versions.
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl)
          .then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', () => {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing ?? reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });

        // If service worker doesn't succeed in a reasonable amount of time,
        // fallback to plaint <script> tag.
        setTimeout(() => {
          if (!scriptLoaded) {
            console.warn(
              'Failed to load app from service worker. Falling back to plain <script> tag.',
            );
            loadMainDartJs();
          }
        }, 4000);
      });
    } else {
      // Service workers not supported. Just drop the <script> tag.
      loadMainDartJs();
    }
  </script>

Errors:

BindingError: Expected null or instance of Paint, got an instance of Paint
js_primitives.dart:47     at BindingError.<anonymous> (https://unpkg.com/canvaskit-wasm@0.25.1/bin/profiling/canvaskit.js:9:130708)
js_primitives.dart:47     at new BindingError (eval at createNamedFunction (https://unpkg.com/canvaskit-wasm@0.25.1/bin/profiling/canvaskit.js:9:130417), <anonymous>:4:34)
js_primitives.dart:47     at throwBindingError (https://unpkg.com/canvaskit-wasm@0.25.1/bin/profiling/canvaskit.js:9:134225)
js_primitives.dart:47     at upcastPointer (https://unpkg.com/canvaskit-wasm@0.25.1/bin/profiling/canvaskit.js:9:140630)
js_primitives.dart:47     at RegisteredPointer.nonConstNoSmartPtrRawPointerToWireType [as toWireType] (https://unpkg.com/canvaskit-wasm@0.25.1/bin/profiling/canvaskit.js:9:143398)
js_primitives.dart:47     at Canvas$drawPath [as drawPath] (eval at new_ (https://unpkg.com/canvaskit-wasm@0.25.1/bin/profiling/canvaskit.js:9:152523), <anonymous>:9:26)
js_primitives.dart:47     at JavaScriptObject.drawPath$2 (http://localhost:51859/main.dart.js:44439:23)
js_primitives.dart:47     at Object.drawPath$2$x (http://localhost:51859/main.dart.js:10084:43)
js_primitives.dart:47     at CkCanvas.drawPath$2 (http://localhost:51859/main.dart.js:27889:9)
js_primitives.dart:47     at PhysicalShapeEngineLayer.paint$1 (http://localhost:51859/main.dart.js:29554:38)
2js_primitives.dart:47 Another exception was thrown: Instance of 'ErrorSummary'

---

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 2.2.1, on Microsoft Windows [Version 10.0.19042.1052], locale es-ES) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.5) [√] Android Studio (version 3.6) [√] IntelliJ IDEA Community Edition (version 2019.2) [√] VS Code (version 1.55.2) [√] Connected device (3 available) • No issues found! ```

---

[markusaksli-nc]

Hi @chessasuke I wasn't able to reproduce this issue, worked just fine on release, profile, and debug. You should probably upgrade to the latest stable 2.2.2. That being said this issue looks like it's more suited for https://github.com/flutter/flutter/issues anyway Thank you

[chessasuke]

It still gives errors after the upgrade. I opened an issue in the flutter repository too though not sure where it should be. If I don't add the firebase libraries it works ok, so it seems like some conflict with that script for PWA.

[markusaksli-nc]

How exactly have you added the firebase libraries? Have you carefully followed https://firebase.flutter.dev/docs/installation/web?

[chessasuke]

yes, this is the first time it gives errors and the error disappears if I comment out that default script.

This is the body part of the index file:

<body>

  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
   <!-- THE DEFAULT SCRIPT CAUSING ISSUES HERE -->
  </script>

<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-analytics.js"></script>

  <script>
  // My Firebase configuration here
  var firebaseConfig = {
...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

  <script src="main.dart.js" type="application/javascript"></script>

</body>

[markusaksli-nc]

Well I can't reproduce this with the official example and your stacktrace only contains canvaskit drawing stack lines so I think it's safe to leave it open in the flutter repository rather than here.