[question]: How to implement in Flutter Web?

miguelmobilat commented 6 months ago

How can we help?

In one signal everything goes well, the user subscribes.

but the notifications do not reach the browser, on mac no error appears in chrome, but on windows it appears the site has been updated in the background

Has anyone implemented it in Flutter successfully?

<!DOCTYPE html>
<html lang="es">

<head>
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta content="A new Flutter project." name="description">

  <!-- iOS meta tags & icons -->
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="back_office" name="apple-mobile-web-app-title">
  <link href="icons/Icon-192.png" rel="apple-touch-icon">

  <!-- Favicon -->
  <link href="favicon.png" rel="icon" type="image/png" />

  <title>back_office</title>
  <link href="manifest.json" rel="manifest">
  <script
    src="https://maps.googleapis.com/maps/api/js?key=KEY&loading=async&callback"></script>
  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script defer src="flutter.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #101820;
    }

    .container {
      width: 100vw;
      height: 100vh;
      display: flex;
      /* Default Axis is X*/
      justify-content: center;
      /* Main Axis */
      align-items: center;
      /* Cross Axis */
    }

    .indicator {
      width: auto;
    }
  </style>
</head>

<body>
  <div id="loading" class="container">
    <img class="indicator" src="./assets/loading.svg" />
  </div>
  <script>
    const serviceWorkerVersion = null;
  </script>
  <script>
    window.addEventListener('load', function (ev) {
      var loading = document.querySelector('#loading');
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: async function (engineInitializer) {
          let appRunner = await engineInitializer.initializeEngine();
          loading.style.display = 'none'
          await appRunner.runApp();
        }
      });
    });
  </script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(function (OneSignal) {
      OneSignal.init({
        appId: "KEY",
      });
    });
  </script>
</body>

</html>

Code of Conduct

[X] I agree to follow this project's Code of Conduct

jkasten2 commented 4 months ago

@miguelmobilat do you have any other service workers? This can lead to inconsistent results if both the OneSignal service worker and another are replacing each other.

If you have another root service worker I recommend following this guide to change the scope of OneSignal's: https://documentation.onesignal.com/docs/onesignal-service-worker-faq#service-worker-configuration

(Note, I moved this issue from the Flutter repo to this OneSignal-Website-SDK as this the SDK you are using)

jkasten2 commented 3 months ago

Closing due to no response

OneSignal / OneSignal-Website-SDK

[question]: How to implement in Flutter Web? #1184

How can we help?

Code of Conduct