Using OnseSignal (PWA, web workers) with Frontity

šŸ™‹Get Help
1

Hello, Iā€™m not sure if this question would be in the correct thread, but here goes.

My understanding is that Frontity will not be able to support PWAā€™s until there is an update to the ā€œCustomize Webpack Configurationā€ feature as service workers need to be configured with webpack.

At this moment, I really need to explore webpack further as I do not understand how it works, or really what it does to be honest :sweat_smile:

With that being said though, would the webpack configuration feature be required for adding something like Onesignal to Frontity? My understanding is that Onesignal uses its own service workers and in my regular wordpress installations adds a service worker to the website.

I see that there is a node package and can also be configured with Google Tag Manager with a REST API existing as well.

Could this be a possible solution for now? Or more likely I am missing something as I am still fairly new at this.

I appreciate any feedback and thank you!

2

Hi @ShaGui,

Iā€™ve moved this thread to this category

Yes, this is correct. This Feature is still in research and there are some other dependencies that need to be solved first (like enabling custom webpack configuration)

To be honest I donā€™t see a clear way of making this work with Frontity right now. I think there are some things that should be solved first

@luisherranz any thoughts here?

3

For One Signal you need to:

  • Load their library in the client.
  • Return their service worker.

Returning a service worker is not possible until we add server extensibility: Server Extensibility

EDIT: I have just realized that this is already possible in Embedded mode because the OneSignal WordPress plugin returns the service worker just fine.

What WordPress hosting service are you using @ShaGui?

1 Like
4

Hi @luisherranz,

I am so sorry for not answering you earlier, I honestly completely forgot to answer this in between the holidays and a crazy start to 2021.

As for your question, the current site I was thinking of is hosted on Bluehost, though I could test it out on a few sites that are hosted on my VPS, I also have a few sites on Siteground.

5

Are you using or do you plan to use the Embedded mode?

What type of WordPress cache (page cache/CDN) do Bluehost and SiteGround offer, if any?

6

I hadnā€™t thought of using it, as when I built the sites the embedded mode wasnā€™t available, I believe?

Bluehost and SiteGround both allow for integration with Cloudflare as a CDN and page caching with their caching plugins.

I could try it out though as a test! Will take me a few weeks more and likely.

7

Let us know once you test it out and we will help you :slight_smile:

Also, if Iā€™m not mistaken, @orballo added OneSignal to one of the projects he has been working with. So if you need help with the client-side code part Iā€™m sure we can figure out together as well.

1 Like
8

Hello !
Iā€™ve been trying for a while to make OneSignal work on my Frontity website (Decoupled mode).
Iā€™ve set it up as a wordpress instance, fully configured it there and used it successfully before migrating to Frontity. ATM, thereā€™s a few hundred subscribers from that period, and they still receive notifications when I publish new articles. Iā€™ve setup react-onesignal in my Frontity Project using the same API key as the one setup in WP.

useEffect(() => {
    OneSignal.init({
      appId: "CENSORED-APPID",
      promptOptions: {
        customlink: {
          enabled: true /* Required to use the Custom Link */,
          style: "button" /* Has value of 'button' or 'link' */,
          size: "medium" /* One of 'small', 'medium', or 'large' */,
          color: {
            button:
              "#FB4160" /* Color of the button background if style = "button" */,
            text: "#FFFFFF" /* Color of the prompt's text */
          },
          text: {
            subscribe:
              "Recevoir des notifications" /* Prompt's text when not subscribed */,
            unsubscribe: "Ne plus reƧevoir" /* Prompt's text when subscribed */,
            explanation:
              "Vous recevez les notifications." /* Optional text appearing before the prompt button */
          },
          unsubscribeEnabled: true /* Controls whether the prompt is visible after subscription */
        }
      }
    });
  }, []);

Their SDK seems to load and is present in the console, doesnā€™t return console errors in prod (it does in local because the URL is localhost). However it doesnā€™t seem that any service-worker is pushed. Has anyone ever done that and might give me hints or steps to follow ? Thanks !