How to integrate Push Notifications?

[LuisHCK]

I'm trying to integrate OneSignal service, But there is no information on the Internet of how to integrate in Vue PWA. I follow this official guide to do a custom integration, but the OneSignal's service worker causes a conflict with the worker of Vue pwa

[eeerrrttty]

Im trying with the firebase cloud messaging, it's been a pain too. Very hard.

[LuisHCK]

I found a slightly dirty solution. I will publish in a couple of hours the solution that I found

[richardxu100]

Did you end up getting OneSignal integration to work?

[richardxu100]

I got OneSignal to work with the Vue-JS service worker.

I followed this tutorial: https://documentation.onesignal.com/docs/web-push-setup-faq#section-can-onesignal-integrate-with-another-service-worker-on-my-site-or-a-progressive-web-app-, and created a new project using custom code.

I added this script file into my index.html:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
    OneSignal.push(function () {
      OneSignal.init({
        appId: "${YOUR_APP_ID}",
        autoRegister: false,
        notifyButton: {
          enable: true,
        },
      });
    });
</script>

Updated each OneSignal service worker file to look like:

importScripts(`${process.env.BASE_URL}service-worker.js`)
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

And changed the path in my registerServiceWorker.js to:

register('./OneSignalSDKWorker.js'...

[LuisHCK]

I solved it in this way too. But, in android stops the option of "Install" in chrome

[sohailalam2]

Ideally, we can use importScripts in SWPrecacheWebpackPlugin to add custom logic to service worker context, however, unfortunately, this does not work with https://github.com/vuejs-templates/pwa 's webpack scripts.

I tried using the following configurations:

entry: {
    app: './src/main.js',
    'sw': './src/workers/sw.js',
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
.
.
.
plugins: [
// service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'pwa-vue',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      importScripts: [
        utils.assetsPath('js/sw.[hash].js')
      ],
    }),
]

There are potentially 2 problems here -

1. The hash generated by webpack while transpiling the files is different. I believe it has something to do with chunkhash. The hash that importScript [hash] uses is different.

2. The webpack pipeline encapsulates the importScript service-worker code with webpackJsonp, which renders it invalid in the service worker context.

[eeerrrttty]

I'm doing a hard work to integrate Vuejs pwa with firebase cloud message push notifications, if someone has done that, please help me. If i make some progress, i post it here back

[tibetoine]

Hello @eeerrrttty , I'm also trying hard to make OneSignal work with my VueJS App (based on this PWA Template) I did it worked following the @richardxu100.

But, (and it's a big 'But') when I want to deploy a new version in production env, the new version is never updated by client (iPhone, Android, Chrome, etc.)

I have no clue how I can make that update work. Does anyone has clues ?

BTW, I well set my server with 0 cache on index.html, OneSignalSDKWorker.js, service-worker.js

[phiter]

Any updates on this? I'm trying to use OneSignal with Vue CLI 3

[LuisHCK]

I just found this. I have not tried it yet, but it looks promising https://github.com/jfadev/jfa-pwa-toolkit

[tsirolnik]

1. Place the SDK files in /public 1.1 OneSignalSDKUpdaterWorker.js OneSignalSDKWorker.js manifest.json index.html
2. Include the manifest.json in index.html
3. Place their code in index.html

So your index.html head should have this -

 <link rel="manifest" href="/manifest.json" />
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(function () {
      OneSignal.init({
        appId: "<appid>",
        autoResubscribe: true,
        notifyButton: {
          enable: true,
        },
         // Depends if you're testing or not
        allowLocalhostAsSecureOrigin: true
      });
      OneSignal.showNativePrompt();
    });
  </script>

And ta-da

FYI - You should create an app for testing and an app for production

[cuongdevjs]

1. Place the SDK files in /public 1.1 OneSignalSDKUpdaterWorker.js OneSignalSDKWorker.js manifest.json index.html
2. Include the manifest.json in index.html
3. Place their code in index.html

So your index.html head should have this -

 <link rel="manifest" href="/manifest.json" />
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(function () {
      OneSignal.init({
        appId: "<appid>",
        autoResubscribe: true,
        notifyButton: {
          enable: true,
        },
         // Depends if you're testing or not
        allowLocalhostAsSecureOrigin: true
      });
      OneSignal.showNativePrompt();
    });
  </script>

And ta-da

FYI - You should create an app for testing and an app for production

Can you show your code or link github?