pwa
pwa copied to clipboard
How to integrate Push Notifications?
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
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 registerServiceWorker.js
to:
register('./OneSignalSDKWorker.js'...
I solved it in this way too. But, in android stops the option of "Install" in chrome
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 -
-
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.
-
The webpack pipeline encapsulates the importScript service-worker code with webpackJsonp, which renders it invalid in the service worker context.
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) 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
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 https://github.com/jfadev/jfa-pwa-toolkit
- Place the SDK files in /public 1.1 OneSignalSDKUpdaterWorker.js OneSignalSDKWorker.js manifest.json index.html
- Include the manifest.json in index.html
- 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
- Place the SDK files in /public 1.1 OneSignalSDKUpdaterWorker.js OneSignalSDKWorker.js manifest.json index.html
- Include the manifest.json in index.html
- 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?