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
Comments
Im trying with the firebase cloud messaging, it's been a pain too. Very hard. |
I found a slightly dirty solution. I will publish in a couple of hours the solution that I found |
Did you end up getting OneSignal integration to work? |
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 register('./OneSignalSDKWorker.js'... |
I solved it in this way too. |
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 -
|
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 |
Hello @eeerrrttty , I'm also trying hard to make OneSignal work with my VueJS App (based on this PWA Template) 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 |
Any updates on this? I'm trying to use OneSignal with Vue CLI 3 |
I just found this. I have not tried it yet, but it looks promising |
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? |
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
The text was updated successfully, but these errors were encountered: