How to Implement True Push Notifications PWA?

Ask us anything
1

How to implement true push notifications in WeWeb PWA? — meaning notifications that can reach users even when the browser is closed or the app is fully inactive

2

@despia

1 Like
3

I achieved this by workarounds and you have to use cloudflare as your DNS manager or if there is an option on your current DNS

  1. Point your domain to Cloudflare DNS

    • Add and verify your domain in Cloudflare.

  2. Deploy the OneSignal worker script on Cloudflare

    • In Workers & Pages → Workers, create a new worker (route it to /onesignalsdkworker.js) with this code:
    addEventListener('fetch', e => {
  const { search } = new URL(e.request.url);
  // import the SW script, preserving any ?appId=… or sdkVersion=… params
  const swUrl = `https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js${search}`;
  const body = `importScripts('${swUrl}');`;
  e.respondWith(
    new Response(body, {
      headers: { 'Content-Type': 'application/javascript' }
    })
  );
});

image
image1920×1063 52.7 KB

  1. (Optional) Upload that same file to any static host — use its URL instead of the Worker’s if you can’t use Cloudflare.

  2. Add OneSignal init in WeWeb

    • In Project → Custom Code, paste:
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
  window.OneSignal = window.OneSignal || [];
  OneSignal.push(() => {
    OneSignal.init({
      appId: "YOUR_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID",
      httpPermissionRequest: { enable: true }
    });
    console.log('OneSignal initialized via Cloudflare Worker.');
  });
</script>

image
image1920×977 83.1 KB

  1. Verify

    • In DevTools → Network, load /onesignalsdkworker.js and confirm it serves the SDK.
    • Send a test notification from OneSignal.
3 Likes
4

Hey - it’s actually quite simple.

You can add native push notifications using Despia in your WeWeb App - here is a video on how to set this up for iOS + Android, without using web push (which has some limitations): https://youtu.be/pffJdLBcWDE?si=GARlmkJbvhWaphzU

If you need any help, please let me know :wink:

2 Likes
5

Looks solid but the hassle of the play store and apps store is better to have it PWA notification

I have multiple apps where the app stores are requiring many steps every now and then to check the content of the app where it is something.

1 Like
6

The app stores do require updates from time to time - but with Despia’s auto compliance + version updates and over-the-air updates (that do not need store approval) it’s actually a quite pleasant experience.

Plus you get access to all native features that native apps have exclusive access too, for push notifications the most relevant will be dynamic badge setting and deep linking via native app links.

But I agree for a simple app - with just a few users and the majority of the users coming from a landing page instead of the app store search, a PWA + a workaround could make sense, you also have the benefit of taking 0% commission in app purchases across the world (not just US).

7

You can do PWA push notifications without any workarounds, you just need to rename your onesignal service worker to not conflict with WeWeb’s default one

8

can you explain more here because I didn’t get what you meant?