Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
miguelmobilat opened this issue Apr 30, 2024 · 2 comments
Closed
1 task done

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

miguelmobilat opened this issue Apr 30, 2024 · 2 comments

Comments

@miguelmobilat
Copy link

miguelmobilat commented Apr 30, 2024

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

  • I agree to follow this project's Code of Conduct
@jkasten2 jkasten2 transferred this issue from OneSignal/OneSignal-Flutter-SDK Jul 12, 2024
@jkasten2
Copy link
Member

@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
Copy link
Member

Closing due to no response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants