search

OneSignal / OneSignal-Website-SDK

OneSignal is a push notification service for web and mobile apps. This SDK makes it easy to integrate your website with OneSignal Push Notifications. https://onesignal.com
Other
384 stars 116 forks source link

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

Closed miguelmobilat closed 1 month ago

miguelmobilat commented 4 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

jkasten2 commented 1 month 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 1 month ago

Closing due to no response