- From: Shiva <notifications@github.com>
- Date: Tue, 27 Apr 2021 04:26:41 -0700
- To: w3c/ServiceWorker <ServiceWorker@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/ServiceWorker/issues/1589@github.com>
I have used following code in the html file
```html
<iframe src="about:blank" id="iframe">
```
and used the below code to update iframe `src` content
```javascript
self.iframe = document.getElementById("iframe");
self.iframe.src = 'about:blank';
self.iframe.contentWindow.document.open();
self.iframe.contentWindow.document.write(html);
self.iframe.contentWindow.document.close();
```
in the above code the `html` content is
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/test.png" >
</body>
</html>
```
in the above code `/test.png` is not present in the project folder, But i have base64 data of that file. so i cached it using service worker by below code.
```javascript
caches.open("assets").then(cache=>{
cache.put(response[index].name,new Response(dataURItoBlob("data:image/jpeg;base64,"+response1.content)));
});
```
The image is cached and can be seen in browser cache section.
Now when the code is executed the fetch request of `img` tag of html which is in iframe is failed and should capture by service using below code.
```javascript
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).then((response)=>{
if(response.ok ){
return response;
}else{
if(event.request.method=='GET'&& event.request.url.includes(location.host+'/blocks/')){
console.log("data:image/jpeg;base64,"+dfg.cf[event.request.url.split('/').reverse()[0]][0],event.request.url);
caches.match(event.request)
.then(function(cachedFiles) {
if(cachedFiles) {
return cachedFiles.clone();
} else {
// go get the files/assets over the network
// probably something like this: `fetch(event.request)`
}
}).catch((err)=>{
console.log(err)
});
}else{
return fetch(event.request.url,{"mode":"no-cors"})
}
}
}).catch((err)=>{
console.log(err)
})
)
});
```
Now consideration of browsers
1. The failed fetch request is capturing in the Firefox, but not in the chrome. (Not tested in remaining browsers)
2. In the Firefox at the place of failed request capture, when I try to return the cache, it says `NS_ERROR_INTERCEPTION_FAILED` and is blocked by browser.
Is there any thing that Iam missing or is their any way to do so.
Hoping with a positive response,
Regards, @shiva-sandupatla
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/ServiceWorker/issues/1589
Received on Tuesday, 27 April 2021 11:26:54 UTC