workbox

I've done a simple service-worker to defer requests that fail for my JS application (following this example ) and it works well. But I still have a problem when requests succeed: the requests are done twice. One time normaly and one time by the service-worker due to the fetch() call I guess. It's a real problem because when the client want to save datas, they are saved twice... Here is the code : const queue = new workbox.backgroundSync.Queue('deferredRequestsQueue'); const requestsToDefer = [ { urlPattern: /\/sf\/observation$/, method: 'POST' } ] function isRequestAllowedToBeDeferred (request

I'm trying to build a PWA for my app; and have spent almost 48 hours trying to figure out how to make use of Workbox with Laravel Mix. What's ironical is that Google says Workbox is meant to make things easy! Buh! Okay, so far I've figured out that - I will need to use the InjectManifest Plugin because I want to integrate Push notifications service in my Service Worker I have no clue how to specifiy the paths for swSrc and swDest . What code should go into my webpack.mix.js and whether I should have a temporary service-worker inside my resources/js folder to create a new service worker inside

Some initial considerations: "react": "^16.8.2", "react-scripts": "2.1.5" I have created a new react app and I need to implement Push Notifications. Following this tutorial, I was able to get up and running in 5 minutes, but now I have to implement the same strategy (kinda) into a react app. The problem I am facing is that I am able to subscribe to the Notification API, but I'm not sure how to edit the service-worker.js file to add an event listener to catch the push event ( Handle a Push Event chapter in the google guide) Customizing your service worker with Create React App is possible, but

I am implementing PWA into my project, I have setted up the serviceworker.js, and I am using workbox.js for cache routing and strategies. 1- I add the offline page to cache on install event, when a user first visit the site: /** * Add on install */ self.addEventListener('install', (event) => { const urls = ['/offline/']; const cacheName = workbox.core.cacheNames.runtime; event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls))) }); 2- Catch & cache pages with a specific regex, like these: https://website.com/posts/the-first-post https://website.com/posts/ https://website.com

(Publicly asking/answering on behalf of someone.) I'm using Workbox to generate a service worker that precaches resources for my progressive web app. Am I wrong to be reluctant to precache ~20mb of minified JavaScript? It's huge, obviously. 20mb seems way too much. My plan was to just precache the essential stuff, and use runtime caching for the rest. In other words, what are some general heuristics for determining what should and shouldn't be included in the precache payload? There's a lot of nuance here, and the right answer comes down to a mix of understanding your users and understanding

To enable my app running offline. During installation the service worker should: fetch a list of URLs from an async API reformat the response add all URLs in the response to the precache For this task I use Googles Workbox in combination with Webpack. The problem: While the service worker successfully caches all the Webpack assets (which tells me that the workbox basically does what it should), it does not wait for the async API call to cache the additional remote assets. They are simply ignored and neither cached nor ever fetched in the network. Here is my service worker code: importScripts(