Are Cached Images Loaded By The Browser When Offline?

February 16, 2024 Post a Comment

I'm using AngularJS and I'm developing SPA. My goal was to provide offline brwosing. JSON data can be easily stored in js variables, images can be cached in Image objects. So now I

Solution 1:

The unsatisfactory, but honest answer is "it depends". Unless you use specific instructions by listing your image in an AppCache or ServiceWorker, the browser cache may or may not show your images. Older browsers showed the HTML document and the content it had when you opened the file offline, but browsers that do have features like the ones mentioned are more aggressive in telling you that you are offline and will not show the page at all. The reason is that browser makers could not guarantee a good experience so instead of showing a document that may or may not display the images you get a "you are offline" message.

You can instruct browsers to cache images for a long time, which increases the likelihood of them being displayed https://developers.google.com/speed/docs/insights/LeverageBrowserCaching but there is no clean way to instruct the browser not to look for a newer version of them unless you specify it in AppCache or a ServiceWorker.

Solution 2:

Browser caching is not a suitable replacement for making a site retain functionality when the client isn't connected to the internet (offline).

Take a look at: Makes Angular JS works offline

There are a number of ways in which you can make assets available to offline users.

Solution 3:

As a companion to Alex Johnson's answer, you should probably check out the Service Workers API. There is also a good explanation of the technology in this Github repo. It will allow you to ensure your architecture supports a pleasurable offline experience.

Solution 4:

I recommend base64 encoding your images, which essentially turns them into strings. Base64 strings can be used as image source. You can save these strings into localStorage, and read them when you're offline.

Check out this code:

Baca Juga

<imgsrc="#"class="myImage" /><styletype="text/css">.myImage {
      content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw==');
    }
    
    </style>

Solution 5:

Ok, after reading your answers, the most useful was the piece in @Alexjohnson answer. Makes Angular JS works offline says something about browser caching:

The native "old" caching won't work here, because it still requires to communicate with the server to have the "304 Not Modified" http code.

But I've tried this technique, and it strangely works. Guys please try this by yourself, you'll see, by going offline after image preloading, the image will be displayed. And if you put another img element with a reference to the web image, this won't be loaded.

If you refresh the page the image cached will be displayed.

What do you think about this?

Here is an example:

<html><head></head><body><scripttype="text/javascript">var my_image1 = newImage();
            var my_image2 = newImage();
            var images = 2, count_images = 0;

            // notify the user that the image has been preloaded, and reveal the// button to use the preloaded imagefunctionnotify()
            {
                count_images++;
                if (count_images == images) {
                    document.getElementById('preloadbutton2').style.display = 'none';
                    document.getElementById('after_preload').style.display = 'block';
                }
                console.log('finito');      
            }

            functionpreload()
            {
                my_image1.onload = notify;
                my_image2.onload = notify;

                my_image1.src = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/47351a35419617.56f6327af207a.gif';
                my_image2.src = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/2150fb35419617.56f6327b44e47.gif';
            }

            // using only the file name, we can take advantage of the preloaded imagefunctionuse_preloaded_image()
            {
                document.getElementById('offline_1').src = my_image1.src;
                document.getElementById('offline_2').src = my_image2.src;
            }
        </script><!-- INSTRUCTIONS 

            OPEN THIS FILE IN THE BROWSER WITH ONLINE NETWORK, CLICK ON THE BOTTON TO PUT IMAGES IN CACHE
            GO OFFLINE AND REALOAD THE PAGE (INSPECT ID DOF THE IMAGES: IMAGES FRO MTHE WEB WON'T BE LOADED, THE ONES CACHED WILL BE SHOWED)
            RELOAD THE PAGE: AS BEFORE, IMAGES FROM CACHE ARE STILL THERE, THEY'RE VISIBLE
        --><!-- IMAGES FROM THE WEB --><imgsrc="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5aa12735419617.56f6327ab4f72.gif"width="500px" /><imgsrc="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/74f16635419617.56f6327adcf75.gif"width="500px" /><br/><!-- IMGES PUT IN CACHE ON BUTTON CLICK --><inputtype="button"id="preloadbutton2"value="Preload Image"onclick="preload();this.value='Loading. Please wait...'" /><divid="after_preload"style="display: none"><inputtype="button"value="Use Preloaded Image"onclick="use_preloaded_image()" /><br /><imgsrc=""id="offline_1"width="500px" /><imgsrc=""id="offline_2"width="500px" /></div></body></html>

javascript spravka