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) {
      workbox.precaching.precache(self.__precacheManifest)
    
      self.addEventListener('fetch', function (event) {
        event.respondWith(
          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.