service-worker

ServiceWorker MIME Type Error ('text/html') on register (React)

蓝咒 提交于 2020-12-30 06:14:25
问题 The current behavior: Service worker does not register due to the below error The expected behavior: Service worker registers Details Posted as a github issue: https://github.com/facebook/create-react-app/issues/8593 Service worker is giving the following error when attempting to register: Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'): The script has an unsupported

React (CRA) SW Cache “public” folder

大憨熊 提交于 2020-12-30 05:34:05
问题 After executing the create-react-app and enabling the service workers in the index.js , all relevant files from the src folder are cached. However some of my resources reside in the public directory. When I run npm run build , the asset-manifest.json and precache-manifest.HASH.js only contain the HTML, mangled JS and CSS (all stuff from the src folder). How can I tell the service worker to additionally cache specific files from the public folder? Here is the actually generated precache

Recognize HTTP 304 in service worker / fetch()

一个人想着一个人 提交于 2020-12-25 09:55:13
问题 I build a service worker which always responds with data from the cache and then, in the background, sends a request to the server. If the server responds with HTTP 304 - not modified everything is fine, if the server responds with HTTP 200 , that means the data was changed and the new file is put into the cache, also the user is notified and asked for a page refresh. I use the not-modified-since / last-modified headers to make sure the client gets the most up-to-date version. When a request

Workbox web worker caching and causes duplicate network calls

好久不见. 提交于 2020-12-16 04:48:53
问题 I have implemented the caching using the following code: require("dotenv").config() const workboxBuild = require("workbox-build") const { COUNTRY: country, NODE_ENV } = process.env const urlPattern = new RegExp(`/${country}\/static|_next\/.*/`) const buildSW = () => { return workboxBuild.generateSW({ swDest: "public/workbox-worker.js", clientsClaim: true, mode: NODE_ENV, skipWaiting: true, sourcemap: false, runtimeCaching: [ { urlPattern: urlPattern, // Apply a cache-first strategy. handler:

How to edit your service worker file for an Angular CLI project

帅比萌擦擦* 提交于 2020-12-15 05:32:41
问题 I have added the @angular/pwa package to my Angular CLI project with the command ng add @angular/pwa --project *project-name* so it becomes a progressive web applicaiton, and this adds a service worker I know. I want to edit that default service worker to support e.g. handling Shared Targets links. I see that the service worker is registered to a file calleded ngsw-worker.js using the "Inspect" option in Google Chrome. How can I edit that service worker ( ngsw-worker.js ) created by the

Generate ServiceWorker using webpack 4.41 and workbox 6

痴心易碎 提交于 2020-12-15 00:44:37
问题 I am using webpack v4.41 and workbox v6 to create my service-worker.js . I am having trouble regitering the service worker in my dev environment. I have set devtools.serviceWorkers.testing.enabled to true I have followed the instructions for using bundlers with workbox, read the documentation for injectManifest and adding the Workbox webpack plugin. After building using webpack (generating serviceWorker.js) Firefox reports error: Service worker error TypeError: ServiceWorker script at http:/

What to change to prevent double request from service worker?

ぐ巨炮叔叔 提交于 2020-12-12 11:59:24
问题 Please do not mark as duplicate. This is not an exact duplicate of the other similar questions here on SO. It's more specific and fully reproducible. Clone this repo. yarn && yarn dev Go to localhost:3000 and make sure under (F12)->Applications->Service workers, the service worker is installed. Go to Network tab and refresh a few times(F5) Observe how the network requests are doubled. Example of what I see: Or if you want to do it manually follow the instructions below: yarn create-next-app

Adding a new header to a Request, while preserving the body

懵懂的女人 提交于 2020-12-09 09:50:28
问题 I am setting up a PWA for my company in house usage. What method should I use to attach a bearer token to all of the requests from dom or web-worker. This method that I am using works as expected when posting a form or json but I would like a cleaner or friendlier method as I don't trust that the text fallback will suffice. I was looking for a function in Google's workbox.js service worker module to see if I could set up a intercept to always append the Bearer token when a request gets made

Local share target handler with workbox ony works if PWA recently active

喜你入骨 提交于 2020-12-08 04:04:59
问题 I use workbox in my serviceworker to handle requests to a share-target url (defined in manifest.json ) locally (offline). On Android, once added to home screen (A2HS) from Chrome, my app is available as share-target, for image files, to other apps. The implementation generally works perfect. my share-target handler stores the received files in browser-cache and redirects to a follow-up /share route (which then handles pictures from cache) locally. But from time to time, the serviceworker

Angular PWA with custom offline page

主宰稳场 提交于 2020-12-07 20:53:12
问题 In an Angular (8) app I'd like to add a custom offline page (just a plain simple html-file to begin with). I have set up my app as a PWA (using @angular/pwa and configured everything so that it at least works smoothly while being online). However, I've had a hard time making updates available for PWA users. So, after many hours of try and error I decided to exclude index.html from the ngsw-config.json . This has -of course- the effect that index.html gets loaded every single time (not so bad,