onfetch | native Request / Response API
kandi X-RAY | onfetch Summary
kandi X-RAY | onfetch Summary
Mock fetch() with native Request / Response API. Works with globalThis, service worker, @mswjs/interceptors, and custom contexts. ️ Jump to Callback, Delay, Redirect, Times, Restore, Context, Options, Q&A, or Contributing Guide.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of onfetch
onfetch Key Features
onfetch Examples and Code Snippets
Community Discussions
Trending Discussions on onfetch
QUESTION
My scenario is the following:
- I have a Progressive Web App that uses a Service Worker where I need to catch the request and do something with it every time the user requests a resource or leaves the current URL
- I'm handling that through adding a callback to the fetch event of the worker
- I only care about requested resources within our domain (e.g. example.com)
- If the requested resource is within our domain I return the promise result from a regular
fetch, so that's already covered - But, if the requested resource is outside my domain (as shown in the below snippet) I want the original request to just continue
- I'm currently just doing a simple
returnif the scenario in bullet 5 is true
Snippet of my current code:
...ANSWER
Answered 2021-Nov-09 at 23:07It is absolutely okay to do what you're doing. Not calling event.respondWith() is a signal to the browser that a given fetch handler is not going to generate a response to a given request, and you can structure your code to return early to avoid calling event.respondWith().
You might have multiple fetch handlers registered, and if the first one returns without calling event.respondWith(), the next fetch handler will then get a chance to respond. If all of the fetch handlers have executed and none of them call event.respondWith(), the browser will automatically handle the request as if there were no service worker at all, which is what you want.
In terms of observed behavior, not calling event.respondWith() at all ends up looking similar to what would happen if you called event.respondWith(event.request). But there is overhead involved in making a fetch() request inside of a service worker and then passing the response body from the service worker thread back to the main program, and you avoid that overhead if you don't call event.respondWith(). So, I'd recommend the approach you're taking.
QUESTION
I have a functional component Pets that shows all of the pets of the current logged in user. Inside of my Pets component I am using useEffect and useState to achieve this.
ANSWER
Answered 2021-Oct-28 at 00:37The problem of the infinite renders with useEffect is because of the dependency array. If you are updating state inside the effect, but the effect is dependent on the state you're updating, then the effect is called anytime anything in your petsContext changes.
That means that the effect is called when context changes, then it changes the context, which calls itself again ad infinitum until you get a Stack Overflow (rimshot).
To get around this, decide what you want this effect to be dependent on, and minimize it to just that object. onFetch is declared as an empty function in your example, so I'm not 100% sure what it's doing or I would advise you further.
QUESTION
According to MDN:
The onfetch property of the ServiceWorkerGlobalScope interface is an event handler fired whenever a fetch event occurs (usually when the WindowOrWorkerGlobalScope.fetch() method is called.)
Does this mean that service worker can only intercept requests sent by fetch() from main thread? How about ajax requests? Is there any way to intercept them through service worker?
ANSWER
Answered 2021-May-18 at 03:09Fetch events are sent when any resource is being fetched through HTTP, be it scripts, medias, links etc., and XHR.
So yes, a ServiceWorker should intercept XHR requests (though synchronous ones are only intercepted in Firefox...)
QUESTION
I'm working on a Blazor WebAssembly App hosted in Ubuntu with Nginx as a proxy. However, when I publish the application and upload it to the server, any UI changes I have made are not reflected on the client. The application is a PWA.
service-worker.js
...ANSWER
Answered 2020-Dec-24 at 17:33So after much frustration, it turns out the files in the _framework folder that is also generated by the publish functionality in Visual Studio must also be updated. I hope this helps someone avoid a long and frustrating day.
QUESTION
I'm struggling with a case where I've done good research on how to it. It works for everyone but not for me!!
Environment:
- Microsoft Windows 10 Pro
- Visual Studio Community Edition 2019
So I've created a project and selected Progressive Web Application (PWA) from the get-go to have everything I need auto-generated. Also made the app ASP.NET Core hosted.
The startup project is Rihal.Server in standalone mode (not IIS or Docker).
When I launch the application I get the default prompt in Chrome to install app. When I click the "+" icon I get the default Blazor icon and the app's name "Rihal". So far so good. When I change the icon and name, I still keep getting the defaults!
- I've tried cleaning and rebuilding all projects one by one, no errors.
- I've tried restarting Visual Studio.
- I've tried changing other things in the manifest like background color to see any change, nothing changes.
- I've checked the Build Action (Content). The default Copy to Output Directory is (Do Not Copy), Changing to (Copy Always) has no effect.
It's like the manifest is completely ignored.
I've developed other parts of this app and then came around to change the icon and name:
Replaced the default icon (same icon used for 192 at a smaller resolution)
Updated my manifest.json for the 192 size and name/short name: (I've also tried adding multiple sizes).
...
ANSWER
Answered 2020-Jul-02 at 11:16I think you have to increment the version of the cache anytime you want the client to download the latest files.
In your navigator, register a JavaScript file where const CACHE_VERSION = 1.01. You can increment the value whenever you want the client to updatee
https://blog.jeremylikness.com/blog/implement-progressive-web-app-hugo/
QUESTION
I'm using React-native version 0.62.2, Axios version ^0.19.2 express version ^4.17.1
In express im using
...ANSWER
Answered 2020-May-24 at 12:45But the thing is on front end (react-native) side using axios,i'm getting following in catch: [Error: Request failed with status code 404] and not the err.response
That's working by design, when the status code of a response is not in the range of 200-299 by default it throws an error.
You can change this default by overwriting validateStatus in axios.create.
For example to accept the default allowed status code range + 404:
QUESTION
I'm trying to implement a progressive web application funtionality into my Rails 6 application, which works fine in first place. I'm developing an application for a hospital which should be accessible from outsite the hospital aswell, so we decided to redirect external requests in their DMZ to my webserver.
And that causes my problem: The script resource which is registering the service-worker is behind a redirect and can't access it, that's why the service worker doesn't get loaded and users can't use the functionality of a PWA.
Here's my code for registering the worker in application.js:
...ANSWER
Answered 2020-Feb-21 at 14:30If you remove the scope property the error disappear? Do this test, because the scope property is optional and in your case, don't must be difference.
According to the Mozilla website:
he scope parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '/sw-test/', which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.
https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/Using_Service_Workers
QUESTION
I noticed that the fetch event of a service worker is no longer triggered when the service worker script itself is loaded in the browser. For example, when we have a new version of a service worker, the old service workers fetch event is not triggered. As consequence, the old service worker can no longer check the content of the new service worker.
I'm sure this was possible before and I would like to know if this is a bug or if any changes were made regarding to that. I did not find anything in the official repository or W3C draft regarding to this change.
To verify that the fetch event is not triggered I programmed a small example service worker with a version number (see code). I have tested it the following way:
- Install first version of service worker
- Increase the version number to two.
- Reload the page -> So that the new sw.js file is installed in the browser.
- Check the chrome logs -> ChromeLogs
Example 'sw.js':
...ANSWER
Answered 2020-Apr-20 at 19:00The service worker update check that is initiated by the browser always bypasses all service worker fetch handlers. It might end up being fulfilled by the HTTP Cache, although all modern browsers default to also bypassing the HTTP Cache and going straight to the network.
I'm fairly confident that no browser has ever triggered the previous service worker's fetch event handler when performing the service worker update check, as that's explicitly forbidden by the service worker specification (the service-workers mode of the update request is required to be set to 'none'). This helps developers avoid scenarios in which an old service worker could get "stuck" if it did something incorrect when processing the fetch event for a new service worker.
I'm not sure why you might have thought otherwise—perhaps you are thinking about the HTTP Cache interaction. Or perhaps you're thinking about a scenario in which a web app explicitly calls fetch('service-worker.js') to check to see if a service worker exists at a given URL, which will trigger the fetch handler of the service worker in control of a given page. But calling fetch('service-worker.js') is very different from the service worker update check.
QUESTION
Looking at the MDN documentation IOS/Safari fully supports ServiceWorkerGlobalScope.onfetch but when you look at the FetchEvent specification it says it is not supported at all by Safari.
In particular, I would like to store some state for each client and was hoping to use the fetchEvent.clientId property of the event to index it. Of course I presume I also have access to the fetchEvent.request object otherwise I can't see how a service worker can do anything useful and I could simulate clientID from a passed in parameter in the url. But the docs don't really tell me what IOS/Safari supports and doesn't so I don't know which way to go.
Can someone please tell me precisely what does IOS/Safari pass when it calls the defined onfetch function.
...ANSWER
Answered 2020-Apr-07 at 09:46I found the answer to my question by using https://jakearchibald.github.io/isserviceworkerready/demos/fetchevent/
connecting my iPad to my Macbook and debugging my iPad. I was eventually able to open the web inspector for the Service worker for that page, and the console.log showed the event passed in.
FetchEvent.clientID is present but a zero length string. As it happens I did the same thing on my (linux) Desktop using Chrome and its also a zero length string, BUT it has another parameter resultingClientId with what looks like a UUID in it. That parameter is not there in Safari.
The FetchEvent.request is there, and in particular the URL. So I can generate my own client id in the client (I am using Date.now().toString() as that is good enough for my purposes) for use in the service worker. In fact my site without a service worker was using the in the URLs I need to intercept already, so I am happy that I have a solution.
QUESTION
I'm trying to pass a javascript array to PHP file like this:
Code in JS file:
...ANSWER
Answered 2020-Mar-31 at 19:58Try print your response with print_r($_POST)
You will see you don't send {directories: directories} in your request's body and in your php you try get data: $_POST['directories'] so you get a response with server error (500 status)
Updated:
And it's better if you send just one request and send all data with that
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install onfetch
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
