Webpushr compatibility with PWA Plugins

WordPress Plugin
#1

We are excited to announce that v4.9+ of Webpushr WordPress Plugin is now compatible with both PW, SuperPWA Plugins.

image image

Update November 18th 2020. Webpushr is now also compatible with PWA for WP & AMP

image

The key enabler for this compatibility is our ability to merge 2 different service worker files (one from Webpushr, and the other one from your PWA plugin) into a single service worker file.

Why do we merge: because only ONE service worker can be activated for a site.

Keep in mind that you will not be able to receive web push notifications if this merge is not successful, . Please follow the guide below to validate successful merge:

How to check successful integration with PWA Plugin:

1- On your site, open the Web Console, go to “Application Tab” and click on Service Workers on the left-side menu, as shown in the screenshot below. You should see a service worker file named ?wp_service_worker=1 registered.

image
image1960×1174 219 KB

2- Right click on this file and open it in a new tab. You should now see the following line at the top of this file: importScripts('https://cdn.webpushr.com/sw-server.min.js'); as shown in the screenshot below: If you do not see this line, please clear your browsing history and try again.

image
image1968×1180 330 KB

How to check successful integration with Super PWA Plugin:

Follow the same steps. The only difference is that the service worker file name this time will be webpushr-sw.js.php

How to check successful integration with PWA for WP & AMP:

Same steps as above. The only difference is that the service worker file name this time will be pwa-sw.js. Important: Make sure you enable Webpushr compatibility setting under PWA plugin as shown below:

image
image1498×972 44.2 KB

Commonly reported WordPress Integration Issues & Fixes
PWA is not working after installing webpushr service worker
#2

Update does not support the following plugin:
PWA for WP & AMP

However I have found a manual workaround. Just adding the service worker script importScripts(‘https://cdn.webpushr.com/sw-server.min.js’); to the top of your pwa-sw.js file will do the trick. It’s in the wp root directory.

#3

The only downside of this implementation is that our plugin will continue to try to register our service worker file: ~/wp-content/plugins/webpushr-web-push-notifications/sdk_files/webpushr-sw.js.php. Only one service worker per domain can be registered for root scope. Creating a competition between two plugins trying to register two separate service workers will create conflict and neither will function as expected.

You can prevent this behavior by performing the following 4 steps, outlined below. These steps essentially direct Webpushr plugin to not register it’s service worker (webpushr-sw.js.php):

1- Update our plugin to the latest version. Minimum required version is v4.10.
2- Go to the settings page of our plugin and check the “Manual Integration” option:

image
image2046×328 68.8 KB

3- You will see our JS code snippet once you check the above option. Please replace the URL of our service worker that is passed as a parameter to setup function in the code snippet with 'sw':'none' as shown below: This will prevent our plugin from registering its service worker (webpushr-sw.js.php) because your PWA plugin will register it’s service worker (pwa-sw.js) that now contains our service worker because you added the importScript line to it.

  • webpushr('setup',{'key':'YOUR_KEY_HERE','sw':'none'});

Edit 10/23/2020: for users using the older version of our plugin, please pass an additional parameter 'none' to init function, like the following:

  • webpushr('init','YOUR_KEY_HERE','none');

4- Please add the modified JS snippet to the header of your site.

Tell us if you are able to follow these steps successfully.

#4

Hi I did as you suggested. Webpush sw is now not registered anymore but functionality is broken too. There’s an error about webpushr SW not being registered successfully obviously but this might be causing some issues? Have a look thanks.

snipped

#5

please change 'sw','none' to 'sw':'none'

#6

Unfortunately it’s not allowed. Returns error in the console: expected ‘)’ after end of argument.

#7

Sorry for misguiding you. If you are using init function, please use the following format for disabling registration of service worker:

  • webpushr('init','YOUR_KEY_HERE','none');

The following format if you use setup function:

  • webpushr('setup',{'key':'YOUR_KEY_HERE','sw':'none'});

Both functions are supported by our JS.

#8

That worked thanks! Impressive support…

#9

Fantastic! Happy to help!

#10

Hi again. Unfortunately the push notifications just suddenly stopped again. Only 1 service worker is registered (that of PWA for WP & AMP).

Subscription prompt pops up, I hit accept but no welcome push or manual pushes are successful.

Tried reinstalling both plugins, clearing cache etc on different devices.

The PWA Plugin integration however worked.

screenshot
screenshot881×137 6.05 KB

#11

Did you update your PWA plugin? It could be that the change you made to the service worker file for PWA plugin got overridden by the update. Is there any chance you can use one of the following two PWA plugins that we are compatible with?

PWA Plugin
Super PWA Plugin

#12

I was under the impression that I was not supposed to include the importscript line. Anyway I reincluded it and also noticed that PWA for WP & AMP now support Webpushr plugin! The combination of the two managed to solve my issue. Let’s hope it stays this way.

image
image766×511 71.6 KB

#13

Hi there, it looks like they are still working on compatibility. Here is the latest status:

We are going to reach out to them.

Update: We already reached out to them and proposed a solution. We will keep this thread updated on any progress.

#14

hmm ok looks to be a work in progress. Thanks.

#15

Quick update: PWA for WP & AMP now offers compatibility with Webpushr out of the box. Please update to the latest version of your PWA & Webpushr plugin. We have updated the original post in this thread to reflect this change. Please make sure you check Webpushr compatibility option under Tools > Compatibility as shown below:

image
image1034×670 30.4 KB

#17
#18