load site from cacheStorage with iframe tag

When offline, you can access cacheStorage using fetch(), etc.

The address entered in the src tag of <iframe> will not be bypassed to cacheStorage and will fail to view the site.

Using fetch() to collect text information from cacheStorage, convert it to a blob, and use URL.createObjectURL() to get the blob address, it works in the <iframe> tag.

However, files such as scripts linked to the html file also fail to load from cacheStorage, causing the page to break.

Any good ideas?

——

How to reproduce the action

this link is the page I’m working on that supports Offline-pwa:

is2you2.github.io/godotchat_pwa

When you enter a page, it stores about 1527 page files in cacheStorage. Once all are stored, it will work normally offline.

To configure the environment that reproduce the action:

1. Second tab at the bottom: In the Channels tab, click the + button to create a channel with any name.

2. Enter the created channel and send a *.blend file. Example *.blend files can be received from this link. (pjcone.ddns.net:9002/cdn/…)

3. When a file is sent to the channel, a gray square box is created. Clicking on the box will open the *.blend file.

4. There are some errors, but the important thing is that it opens. That’s all for the online test.

5. When you change the network status to offline and try to open the file sent to the channel again, it doesn’t open.

When opening a *.blend file, the action is to create an iframe object in JavaScript and open “assets/js.blend/index.html” in src. When fetch() this address, page information is normally received from cacheStorage. However, it is not in the iframe.