Much needed example code for PWA mode using 'InjectManifest' and custom-service-worker.js

[jitendra1607]

It would be very helpful to provide sample code for @quasar/app 2.2.* and workbox 5.* and workbox-webpack-plugin 5.* .

As I don't know what aspects are handled by quasar, so an example would be very helpful to all.

[jitendra1607]

Below is service-worker.js file auto generated by quasar (pwa: {workboxPluginMode: 'GenerateSW'}). But I need to use 'InjectManifest' mode for push notification and custom caching logic. Please provide a sample 'custom-service-worker.js' to get started.

/**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// If the loader is already loaded, just stop.
if (!self.define) {
  const singleRequire = name => {
    if (name !== 'require') {
      name = name + '.js';
    }
    let promise = Promise.resolve();
    if (!registry[name]) {
      
        promise = new Promise(async resolve => {
          if ("document" in self) {
            const script = document.createElement("script");
            script.src = name;
            document.head.appendChild(script);
            script.onload = resolve;
          } else {
            importScripts(name);
            resolve();
          }
        });
      
    }
    return promise.then(() => {
      if (!registry[name]) {
        throw new Error(`Module ${name} didn’t register its module`);
      }
      return registry[name];
    });
  };

  const require = (names, resolve) => {
    Promise.all(names.map(singleRequire))
      .then(modules => resolve(modules.length === 1 ? modules[0] : modules));
  };
  
  const registry = {
    require: Promise.resolve(require)
  };

  self.define = (moduleName, depsNames, factory) => {
    if (registry[moduleName]) {
      // Module is already loading or loaded.
      return;
    }
    registry[moduleName] = Promise.resolve().then(() => {
      let exports = {};
      const module = {
        uri: location.origin + moduleName.slice(1)
      };
      return Promise.all(
        depsNames.map(depName => {
          switch(depName) {
            case "exports":
              return exports;
            case "module":
              return module;
            default:
              return singleRequire(depName);
          }
        })
      ).then(deps => {
        const facValue = factory(...deps);
        if(!exports.default) {
          exports.default = facValue;
        }
        return exports;
      });
    });
  };
}
define("./service-worker.js",['./workbox-69116813'], function (workbox) { 'use strict';

  /**
  * Welcome to your Workbox-powered service worker!
  *
  * You'll need to register this file in your web app.
  * See https://goo.gl/nhQhGp
  *
  * The rest of the code is auto-generated. Please don't update this file
  * directly; instead, make changes to your Workbox build configuration
  * and re-run your build process.
  * See https://goo.gl/2aRDsh
  */

  workbox.setCacheNameDetails({
    prefix: "name"
  });
  self.addEventListener('message', event => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
      self.skipWaiting();
    }
  });
  /**
   * The precacheAndRoute() method efficiently caches and responds to
   * requests for URLs in the manifest.
   * See https://goo.gl/S9QRab
   */

  workbox.precacheAndRoute([{
    "url": "0.js",
    "revision": "3f07e220b689f5330fbb83094c8a9380"
  }, {
    "url": "1.js",
    "revision": "55a07f9d3d9a2af0da3d878b1a933dc7"
  }, {
    "url": "10.js",
    "revision": "08f74ba94799263eafda36449b113c43"
  }, {
    "url": "11.js",
    "revision": "d50adbc0e09f844b7801086c9ca29bdb"
  }, {
    "url": "12.js",
    "revision": "714b6108a49d6d63ccbd1b27a5fdb279"
  }, {
    "url": "13.js",
    "revision": "bb1fe34669bbb3ae73db26e9224d968d"
  }, {
    "url": "14.js",
    "revision": "f67cd5b044fea136032ae1238277efb5"
  }, {
    "url": "15.js",
    "revision": "f7057731c9d38f6151b479765a684d38"
  }, {
    "url": "16.js",
    "revision": "070d9d6c5c9053a9870328917f27f4e5"
  }, {
    "url": "17.js",
    "revision": "3c11f2e71490a2392331e46de759b327"
  }, {
    "url": "18.js",
    "revision": "9b91daeedfb4b15353ff8b3ce36fb960"
  }, {
    "url": "19.js",
    "revision": "6891b251044f7bdd706fbc02d1c5e33d"
  }, {
    "url": "2.js",
    "revision": "2f939be7fe63e9c36ef5a4d7023f499a"
  }, {
    "url": "20.js",
    "revision": "d01879e4ced6cd31c8457b27f6e07204"
  }, {
    "url": "21.js",
    "revision": "1f3a13614fb37de7aa4d5c61a136ac5e"
  }, {
    "url": "22.js",
    "revision": "5fb72b83fc17ca72f13e50d815b24e96"
  }, {
    "url": "23.js",
    "revision": "b9f410dd7e6e0f2154d25c89c16fde4d"
  }, {
    "url": "24.js",
    "revision": "27668c74084ff680a6319ea40765ec35"
  }, {
    "url": "25.js",
    "revision": "3e8f8eea4c2edd6fdb428847c560b9c9"
  }, {
    "url": "26.js",
    "revision": "553d9f57da740c3951bf2cfcbf98ebf3"
  }, {
    "url": "27.js",
    "revision": "f68046b044dfb3c0e1eaf5bf650cbf89"
  }, {
    "url": "28.js",
    "revision": "d46b58d87a61eff98f425faa571f7d9b"
  }, {
    "url": "29.js",
    "revision": "dba224820006aa81ec3523c589b3fb5a"
  }, {
    "url": "3.js",
    "revision": "7384cb91ded1bd2ba38fe4f51b6cfb82"
  }, {
    "url": "30.js",
    "revision": "365e043c4b1066c945b6b6c1e53b3f90"
  }, {
    "url": "31.js",
    "revision": "d570b94aec3f77fcb7f88cf8e74ea3d7"
  }, {
    "url": "32.js",
    "revision": "5010a6fc160724bec043b4ac9879745b"
  }, {
    "url": "33.js",
    "revision": "d210f0f64e11df67fbb1731f8d665a5a"
  }, {
    "url": "34.js",
    "revision": "65732b1a36fb895a679168851bb5cf61"
  }, {
    "url": "4.js",
    "revision": "342fa658c82c9b98bbb0916285ccc113"
  }, {
    "url": "5.js",
    "revision": "5729650296261f683a49eaede45236d0"
  }, {
    "url": "6.js",
    "revision": "55ee0269df6077dff0c94479fd661792"
  }, {
    "url": "7.js",
    "revision": "8bc4877297a01ad04174e8d780e3da69"
  }, {
    "url": "8.js",
    "revision": "508333686802c265264fc03cf7ef6a79"
  }, {
    "url": "9.js",
    "revision": "38a6866130fc82ab3edf60c30ebbbc0e"
  }, {
    "url": "app.js",
    "revision": "d3494ecfd463c35af742ea1823ba1e10"
  }, {
    "url": "fonts/KFOkCnqEu92Fr1MmgVxIIzQ.woff",
    "revision": "04b7fd97f88b82dccce5ec446ccc29e6"
  }, {
    "url": "fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff",
    "revision": "da2721c68b4bc80db8d4c404f76b118c"
  }, {
    "url": "fonts/KFOlCnqEu92Fr1MmSU5fBBc-.woff",
    "revision": "bf0f407102faf3a0b521d3b545f547a5"
  }, {
    "url": "fonts/KFOlCnqEu92Fr1MmWUlfBBc-.woff",
    "revision": "68d6dabfe54e245e7d5d5c16c3c4b1a9"
  }, {
    "url": "fonts/KFOlCnqEu92Fr1MmYUtfBBc-.woff",
    "revision": "64bba9c4e8156c152050c657e9d24bf1"
  }, {
    "url": "fonts/KFOmCnqEu92Fr1Mu4mxM.woff",
    "revision": "dc3e086fc0c5addc09702e111d2adb42"
  }, {
    "url": "fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff",
    "revision": "9c4b4d0d5ef2ead1e086fd1f71e5eb84"
  }, {
    "url": "fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2",
    "revision": "df8803afe71155fa95130772bd0da593"
  }, {
    "url": "index.html",
    "revision": "1b97c1cbe12a3dc315648ba7d2786676"
  }, {
    "url": "manifest.json",
    "revision": "6cf2f01b3874659b9f77d42453450aaa"
  }, {
    "url": "vendors~fastclick.js",
    "revision": "88ebf8865dae5c0137da32948354fe27"
  }], {});
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {
    denylist: [/service-worker\.js$/, /workbox-(.)*\.js$/]
  }));

});
//# sourceMappingURL=service-worker.js.map

[ontwikkelfabriek]

This course will teach you how to setup a custom serviceworker with push notifications.( and a lot more PWA related features)

Danny's very recommended Quasar's PWA course

[metalsadman]

try this guide from @TobyMosque https://medium.com/@tobias.mesquita/quasar-framework-a-ssr-pwa-app-with-dynamic-data-196354bc0d5f, it's quite old but I learned to use InjectManifest custom-service-worker.js from this article. also advice to read workbox official docs https://developers.google.com/web/tools/workbox.

[jitendra1607]

I just got success from official workbox docs.

[jitendra1607]

In case if anyone needs it in future, below is the basic setup code for 'custom-service-worker.js' file.

/* eslint-disable */
import {precacheAndRoute} from 'workbox-precaching';
import {clientsClaim} from 'workbox-core';
import {registerRoute} from 'workbox-routing';
import {ExpirationPlugin} from 'workbox-expiration';
import {CacheFirst, StaleWhileRevalidate, NetworkFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

precacheAndRoute(self.__WB_MANIFEST, {})
clientsClaim();

// testing
registerRoute(
        /^https:\/\/.(?:png|gif|jpg|jpeg|svg)$/,
        new CacheFirst({
            cacheName: 'my-img',
            plugins: [
                new CacheableResponsePlugin({
                    statuses: [0, 200]
                })
            ]
        }),
    )
    //

registerRoute(
    /.*(?:cloudflare|gstatic|googleapis|materialdesignicons|jsdelivr|unpkg)\.(com|net)/,
    new StaleWhileRevalidate({
        cacheName: 'foregin-resources'
    })
)

importScripts('https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/8.4.2/firebase-messaging.js')
importScripts('https://cdnjs.cloudflare.com/ajax/libs/localforage/1.7.3/localforage.min.js')

// Initialize Firebase
var config = {
    messagingSenderId: 'xxxxxxxxxx'
}
firebase.initializeApp(config)

var messaging = firebase.messaging()