Web Push - Placing service worker - push-notification

Question

From here https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
If the service worker is at the root of the domain, this means
that the service worker's scope will be the entire origin.
But If we register the service worker file at /example/sw.js, then
the service worker would only see fetch events for pages whose
URL starts with /example/ (i.e. /example/page1/, /example/page2/).
Second point mentions only fetch won't work at / (root or other than example) if I place the service worker at /example/.
But subscription (generation of sub object) itself not getting generated if the service worker is at /example/ and if the web page is at / (root or other than example), which the doc clearly doesn't explain.
Please let me know, if even the generation of subscription (pushManager.getSubscription) in the service worker itself won't happen.
PS: I have tried it on Chrome 54.0.2840.100 Ubuntu 16.04 LTS

Answer 1

Generation of subscription object does not depend on service worker scope. You can do it any where
Eg.
permission.js
export function allowNotifications(scope){
if (navigator.serviceWorker && Notification){
if( Notification.permission !== "granted") {
navigator.serviceWorker.ready.then(function(reg) {
subscribe(reg);
});
}
}
}
function subscribe(reg) {
reg.pushManager.subscribe({userVisibleOnly: true}).then(function(pushSubscription) {
bindUserToDevice(JSON.stringify(pushSubscription));
}, function (err) {
console.log('error');
});
}
export function bindUserToDevice(subscriptionObj) {
// received subsciption object should be send to backend to bind the device for pushes
var data = {
type: 'POST',
url : '/bind',
body: subscriptionObj,
};
fetch('/bind', data);
}
allowNotifications function can be called from anywhere. Only the service worker file should be present on root which should have push event
global.addEventListener('push', function(event) {
var pushObj = event.data.json();
var pushData = pushObj.data;
var title = pushData && pushData.title;
var body = pushData && pushData.body;
var icon = '/img/logo.png';
event.waitUntil(global.registration.showNotification(title, {
body: body,
icon: icon,
data:pushData
}));
});