PWA ServiceWorker example (0.16.4)

  • Hi there, I’m trying to make my app available in offline mode I’m using quasar 0.16.4 added workboxPluginMode: 'InjectManifest', workboxOptions: {} to my pwa key in quasar.conf.js

    But When on my Iphone which has the app in screen home, I click on it, if the phone is offline, nothing shows up. I have read workbox things and ServiceWorkerRegistration documentation but I’m not able to implement this in my app.

    I’m a bit lost on what to do and how especially since I cannot test this ServiceWorker thing in dev mode. Anyone can help or give a quasar basic example ?

  • @al1_andre Sounds like an issue with background sync.

    Unfortunately, for now, background sync only works with Chrome.

  • Well, for the offline thing , I could cache all files and get a 100% with google audit tool. Important links where workbox-precaching and workbox-lab.

    All I had to do is to make my custom-service-worker.js look like

     * This file (which will be your service worker)
     * is picked up by the build system if BOTH conditions are met:
     *  - You are building for production
     *  - quasar.conf > pwa > workboxPluginMode is set to "InjectManifest"
    /* global workbox */
    if (workbox) {
      self.addEventListener('fetch', function (event) {
          caches.match(event.request).then(function (response) {
            return response || fetch(event.request)

    When offline on IPhone, it still does not launch the app saying “Safari could not open the page because IPhone is not connected to the Internet” I’m going to have a look on background things.

Log in to reply