From b69fc8af15f2429de78ae7cf94aac2da7784256a Mon Sep 17 00:00:00 2001 From: Oleg Bochagov Date: Wed, 22 Dec 2021 00:35:45 +0100 Subject: [PATCH 1/2] fix: custom worker scope and path --- README.md | 20 ++++++++++++++++ example/.gitignore | 2 +- lib/module.js | 56 ++++++++++++++++++++++++++------------------- templates/plugin.js | 7 +++++- test/module.test.js | 14 +++++++++++- 5 files changed, 73 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 75e2e7f..7e5dd90 100755 --- a/README.md +++ b/README.md @@ -84,6 +84,25 @@ oneSignal: { } ``` +## Change Worker Path and Scope + +By default OneSignal expects you to put `OneSignalSDKWorker.js` in the root of your website (nuxt static folder). In case you're already using `@nuxt/pwa` with the `workbox` module, you already should have a service worker there. Two workers can't have the same path and scope. + +That is why this module puts `OneSignalSDKWorker.js` into the `_push_/onesignal` folder with the same scope. You can use options to customize path, scope, and filenames. + +```js +oneSignal: { + path: '_push_/onesignal/', + workerFile: 'OneSignalSDKWorker.js', + updaterFile: 'OneSignalSDKUpdaterWorker.js', + swParams: { + scope: '_push_/onesignal/' + } +} +``` + +Be sure to use the same settings in OneSignal. See [Service Worker Customizations (path and scope)](https://documentation.onesignal.com/docs/onesignal-service-worker-faq#sdk-parameter-reference-for-service-workers) + ## References - [Web Push SDK Reference](https://documentation.onesignal.com/docs/web-push-sdk) - Available options and API calls @@ -91,6 +110,7 @@ oneSignal: { - [Thanks for Subscribing Notifications](https://documentation.onesignal.com/docs/welcome-notifications) - [Product overview](https://documentation.onesignal.com/docs/product-overview) - More info about OneSignal - [Web Push SDK Setup](https://documentation.onesignal.com/docs/web-push-sdk-setup-https) - Setup guides for in-depth reading what this modules does. +- [Service Worker Customizations (path and scope)](https://documentation.onesignal.com/docs/onesignal-service-worker-faq#sdk-parameter-reference-for-service-workers) ## License diff --git a/example/.gitignore b/example/.gitignore index 06a75e9..a6c7c28 100644 --- a/example/.gitignore +++ b/example/.gitignore @@ -1 +1 @@ -OneSignalSDK* +*.js diff --git a/lib/module.js b/lib/module.js index 2ddbc4b..84a689f 100755 --- a/lib/module.js +++ b/lib/module.js @@ -1,5 +1,5 @@ import path from 'path' -import { writeFileSync, readFileSync } from 'fs' +import { writeFileSync, readFileSync, mkdirSync } from 'fs' import hasha from 'hasha' import defu from 'defu' import { getRouteParams, joinUrl } from './utils' @@ -17,25 +17,29 @@ export default function nuxtOneSignal (oneSignalOptions) { } function addOneSignal (oneSignalOptions) { - const { publicPath } = getRouteParams(this.options) + const context = this + const { publicPath } = getRouteParams(context.options) // Merge options const defaults = { OneSignalSDK: undefined, cdn: true, GcmSenderId: '482941778795', - importScripts: [ - '/sw.js?' + Date.now() - ], init: { allowLocalhostAsSecureOrigin: true, welcomeNotification: { disable: true } + }, + path: '_push_/onesignal/', + workerFile: 'OneSignalSDKWorker.js', + updaterFile: 'OneSignalSDKUpdaterWorker.js', + swParams: { + scope: '_push_/onesignal/' } } - const options = defu({ ...this.options.oneSignal, ...oneSignalOptions }, defaults) + const options = defu({ ...context.options.oneSignal, ...oneSignalOptions }, defaults) if (options.OneSignalSDK === undefined) { if (options.cdn) { @@ -63,8 +67,8 @@ function addOneSignal (oneSignalOptions) { } // Add the oneSignal SDK script to head - if (!this.options.head.script.find(s => s.hid === 'onesignal')) { - this.options.head.script.push({ + if (!context.options.head.script.find(s => s.hid === 'onesignal')) { + context.options.head.script.push({ async: true, src: options.OneSignalSDK, hid: 'onesignal' @@ -72,28 +76,34 @@ function addOneSignal (oneSignalOptions) { } // Adjust manifest for oneSignal - if (!this.options.manifest) { - this.options.manifest = {} + if (!context.options.manifest) { + context.options.manifest = {} } - this.options.manifest.gcm_sender_id = options.GcmSenderId - - // Adjust swURL option of Workbox for oneSignal - if (!this.options.workbox) { - this.options.workbox = {} - } - this.options.workbox.swURL = 'OneSignalSDKWorker.js' + context.options.manifest.gcm_sender_id = options.GcmSenderId // Provide OneSignalSDKWorker.js and OneSignalSDKUpdaterWorker.js - const makeSW = (name, scripts) => { - const workerScript = `importScripts(${scripts.map(i => `'${i}'`).join(', ')})\r\n` - writeFileSync(path.resolve(this.options.srcDir, 'static', name), workerScript, 'utf-8') + const { + path: workerDir, + workerFile, + updaterFile + } = options + + const staticDir = path.resolve(context.options.srcDir, 'static') + + const writeWorker = (fileName, script) => { + const workerScript = `importScripts('${script}')\r\n` + mkdirSync(path.join(staticDir, workerDir), { recursive: true }) + writeFileSync(path.join(staticDir, workerDir, fileName), workerScript, 'utf-8') } - makeSW('OneSignalSDKWorker.js', [].concat(options.importScripts || []).concat(options.OneSignalSDK)) - makeSW('OneSignalSDKUpdaterWorker.js', [options.OneSignalSDK]) + writeWorker(workerFile, options.OneSignalSDK) + writeWorker(updaterFile, options.OneSignalSDK) + + options.workerPath = path.join(workerDir, workerFile) + options.updaterPath = path.join(workerDir, updaterFile) // Add OneSignal plugin - this.addPlugin({ + context.addPlugin({ src: path.resolve(__dirname, '../templates/plugin.js'), ssr: false, fileName: 'onesignal.js', diff --git a/templates/plugin.js b/templates/plugin.js index ea1fbbd..86f14e1 100755 --- a/templates/plugin.js +++ b/templates/plugin.js @@ -1,6 +1,11 @@ window.$OneSignal = window.OneSignal = window.OneSignal || []; -OneSignal.push(['init', <%= JSON.stringify(options.init, null, 2) %>]) +OneSignal.push(() => { + OneSignal.SERVICE_WORKER_PARAM = <%= JSON.stringify(options.swParams) %> + OneSignal.SERVICE_WORKER_PATH = <%= JSON.stringify(options.workerPath) %> + OneSignal.SERVICE_WORKER_UPDATER_PATH = <%= JSON.stringify(options.updaterPath) %> + OneSignal.init(<%= JSON.stringify(options.init, null, 2) %>) +}) export default function (ctx, inject) { inject('OneSignal', OneSignal) diff --git a/test/module.test.js b/test/module.test.js index 66d5d2e..e208425 100644 --- a/test/module.test.js +++ b/test/module.test.js @@ -4,6 +4,9 @@ import { setup, build } from '@nuxtjs/module-test-utils' import onesignalModule from '..' const url = path => `http://localhost:3000${path}` +const testPath = '__pu__/os/' +const testWorkerFile = 'osw.js' +const testUpdaterFile = 'osu.js' describe('module', () => { let nuxt, browser @@ -18,7 +21,10 @@ describe('module', () => { oneSignal: { init: { appId: 'd867ac26-f7be-4c62-9fdd-b756a33c4a8f' - } + }, + path: testPath, + workerFile: testWorkerFile, + updaterFile: testUpdaterFile } } @@ -40,4 +46,10 @@ describe('module', () => { expect($OneSignal).toBeDefined() expect($OneSignal.length).toBe(1) }) + + test('worker\'s path is correctly set in OneSignal', async () => { + const page = await browser.page(url('/')) + const workerPath = await page.runScript(() => window.OneSignal.config.userConfig.serviceWorkerPath) + expect(workerPath).toBe(path.join(testPath, testWorkerFile)) + }) }) From 9c9581c3ae62b9e76789c4e6271fc042d114d4ba Mon Sep 17 00:00:00 2001 From: Oleg Bochagov Date: Wed, 22 Dec 2021 03:41:57 +0100 Subject: [PATCH 2/2] fix: worker default path and scope, set default path to root --- README.md | 8 ++++---- example/nuxt.config.js | 8 +++++++- lib/module.js | 6 +++--- test/module.test.js | 4 ++-- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 7e5dd90..27e3b20 100755 --- a/README.md +++ b/README.md @@ -86,17 +86,17 @@ oneSignal: { ## Change Worker Path and Scope -By default OneSignal expects you to put `OneSignalSDKWorker.js` in the root of your website (nuxt static folder). In case you're already using `@nuxt/pwa` with the `workbox` module, you already should have a service worker there. Two workers can't have the same path and scope. +By default OneSignal expects you to put `OneSignalSDKWorker.js` in the root of your website (nuxt static folder). In case you're already using `@nuxt/pwa` with the `workbox` module, you already should have a service worker there. Two workers can't have the same scope. -That is why this module puts `OneSignalSDKWorker.js` into the `_push_/onesignal` folder with the same scope. You can use options to customize path, scope, and filenames. +That is why this module changes the scope of `OneSignalSDKWorker.js` to `/_push_/onesignal/`. You can use options to customize path, scope, and filenames. ```js oneSignal: { - path: '_push_/onesignal/', + filesPath: '', // set to your path if you put worker files into a subdir, for example '/_push_/onesignal/' workerFile: 'OneSignalSDKWorker.js', updaterFile: 'OneSignalSDKUpdaterWorker.js', swParams: { - scope: '_push_/onesignal/' + scope: '/_push_/onesignal/' // set to an empty string ('') if you want OneSignal to be your main worker } } ``` diff --git a/example/nuxt.config.js b/example/nuxt.config.js index 1ad984b..52a8707 100644 --- a/example/nuxt.config.js +++ b/example/nuxt.config.js @@ -9,6 +9,12 @@ export default { oneSignal: { init: { appId: 'd867ac26-f7be-4c62-9fdd-b756a33c4a8f' - } + }, + workerFile: 'OneSignalSDKWorker.js', + updaterFile: 'OneSignalSDKUpdaterWorker.js', + swParams: { + scope: '' + }, + filesPath: '' } } diff --git a/lib/module.js b/lib/module.js index 84a689f..52bc28f 100755 --- a/lib/module.js +++ b/lib/module.js @@ -31,11 +31,11 @@ function addOneSignal (oneSignalOptions) { disable: true } }, - path: '_push_/onesignal/', + filesPath: '', workerFile: 'OneSignalSDKWorker.js', updaterFile: 'OneSignalSDKUpdaterWorker.js', swParams: { - scope: '_push_/onesignal/' + scope: '/_push_/onesignal/' } } @@ -83,7 +83,7 @@ function addOneSignal (oneSignalOptions) { // Provide OneSignalSDKWorker.js and OneSignalSDKUpdaterWorker.js const { - path: workerDir, + filesPath: workerDir, workerFile, updaterFile } = options diff --git a/test/module.test.js b/test/module.test.js index e208425..4338004 100644 --- a/test/module.test.js +++ b/test/module.test.js @@ -4,7 +4,7 @@ import { setup, build } from '@nuxtjs/module-test-utils' import onesignalModule from '..' const url = path => `http://localhost:3000${path}` -const testPath = '__pu__/os/' +const testPath = '/__pu__/os/' const testWorkerFile = 'osw.js' const testUpdaterFile = 'osu.js' @@ -22,7 +22,7 @@ describe('module', () => { init: { appId: 'd867ac26-f7be-4c62-9fdd-b756a33c4a8f' }, - path: testPath, + filesPath: testPath, workerFile: testWorkerFile, updaterFile: testUpdaterFile }