Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to integrate Push Notifications? #184

Closed
LuisHCK opened this issue May 2, 2018 · 12 comments
Closed

How to integrate Push Notifications? #184

LuisHCK opened this issue May 2, 2018 · 12 comments

Comments

@LuisHCK
Copy link

LuisHCK commented May 2, 2018

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
Copy link

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

@LuisHCK
Copy link
Author

LuisHCK commented May 9, 2018

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

@richardxu100
Copy link

Did you end up getting OneSignal integration to work?

@richardxu100
Copy link

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
Copy link
Author

LuisHCK commented May 18, 2018

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

@sohailalam2
Copy link

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
Copy link

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
Copy link

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
Copy link

phiter commented May 16, 2019

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

@LuisHCK
Copy link
Author

LuisHCK commented May 23, 2019

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

@tsirolnik
Copy link

  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

image

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

@cuongdevjs
Copy link

  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

image

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

Can you show your code or link github?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants