PWA ServiceWorker example (0.16.4)

[Al1_andre]

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 ?

[LaurentPayot]

@al1_andre Sounds like an issue with background sync.

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

[Al1_andre]

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.