Add SW push/sync feature in dev mode

lib/dev-server.js

@@ -65,7 +65,20 @@ class DevServer {
         this.server.use(function (req, res, next) {
           if (req.url === '/service-worker.js') {
             res.setHeader('Content-Type', 'text/javascript')
-            res.send(resetScript)
+            if (cfg.pwa.swPlugins && cfg.pwa.swPlugins.push) {
+              res.write(fs.readFileSync(
+                path.join(appPaths.pwaDir, cfg.pwa.swPlugins.push),
+                'utf-8'
+              ))
+            }
+            if (cfg.pwa.swPlugins && cfg.pwa.swPlugins.sync) {
+              res.write(fs.readFileSync(
+                path.join(appPaths.pwaDir, cfg.pwa.swPlugins.sync),
+                'utf-8'
+              ))
+            }
+            res.write(resetScript)
+            res.end()
           }
           else {
             next()

lib/quasar-config.js

@@ -412,6 +412,10 @@ class QuasarConfig {
       cfg.pwa = merge({
         workboxPluginMode: 'GenerateSW',
         workboxOptions: {},
+        swPlugins: {
+          push: 'push-service-worker.js',
+          sync: 'sync-service-worker.js'
+        },
         manifest: {
           name: this.pkg.productName || this.pkg.name || 'Quasar App',
           short_name: this.pkg.name || 'quasar-pwa',

templates/pwa/push-service-worker.js

@@ -0,0 +1,29 @@
+/*
+ * This file (which will be part of your service worker)
+ * is picked up by the build system and appended at the end of the service-worker
+ * To do so, You must active this option in
+ * quasar.conf > pwa > swPlugins > push by setting the name of this file
+ * THIS PART OF THE CODE is OUT of Hot Reload managment : You should refresh page to reload it.
+ */
+
+/**
+ * Start listening for web notification (client part), and will display them to the user.
+ * Fill free to add/remove anypart of the code
+ */
+self.addEventListener('push', function (event) {
+  if (!event.data) {
+    console.error('This push event has no data.', event)
+    return
+  }
+
+  let msg
+  try {
+    msg = event.data.json()
+  } catch (e) {
+    console.error('This push event data is not valid JSON.', event.data)
+    return
+  }
+  // Sending message to the service-worker for display
+  const promiseChain = self.registration.showNotification(msg.title, msg.options)
+  event.waitUntil(promiseChain)
+})

templates/pwa/sync-service-worker.js

@@ -0,0 +1,11 @@
+/*
+ * This file (which will be part of your service worker)
+ * is picked up by the build system and appended at the end of the service-worker
+ * To do so, You must active this option in
+ * quasar.conf > pwa > swPlugins > sync by setting the name of this file
+ * THIS PART OF THE CODE is OUT of Hot Reload managment : You should refresh page to reload it.
+ */
+
+self.addEventListener('sync', function (event) {
+  // Implement your 'sync' event managment.
+})