Question

我正在使用AngularJS和我开发SPA。我的目标是提供离线brwosing。 JSON数据可以很容易地存储在js变量中，图像可以缓存在Image对象中。

所以现在我想知道..如果一个人下线并尝试浏览内容，会发生什么？

1）浏览器无法加载图片，因为在离线状态下，它无法检查图片的最新版本（缓存或在线版本）

2）浏览器在缓存中找到图像的引用。即使浏览器无法检查最新版本的在线图像，也会加载缓存的图像

注意：这不是一个重复的问题。

我使用Angular的事实对于这个问题并不重要。将有其他人使用其他框架并寻找一般解决方案。

其次..这些答案只是指出使用HTML5和服务工作者。与AngularJS无关的事情。

Answer 1

当客户端未连接到互联网（离线）时，浏览器缓存不是使网站保留功能的合适替代品。

看看：Makes Angular JS works offline

您可以通过多种方式为离线用户提供资源。

Answer 2

作为Alex Johnson答案的伴侣，您应该查看Service Workers API。 this Github repo中对技术也有很好的解释。它将允许您确保您的架构支持愉快的离线体验。

Answer 3

我建议对图像进行base64编码，这实际上会将它们转换为字符串。 Base64字符串可用作图像源。您可以将这些字符串保存到localStorage中，并在您离线时阅读它们。

查看此代码：

＆＃13;

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

＆＃13;

Answer 4

不满意但诚实的回答是“这取决于”。除非您通过在AppCache或ServiceWorker中列出图像来使用特定说明，否则浏览器缓存可能会也可能不会显示您的图像。较旧的浏览器显示HTML文档及其在离线打开文件时所拥有的内容，但是具有上述功能的浏览器会更积极地告诉您离线并且根本不显示页面。原因是浏览器制造商无法保证良好的体验，因此，不是显示可能显示或不显示图像的文档，而是显示“您离线”消息。

您可以指示浏览器长时间缓存图像，这会增加它们显示的可能性https://developers.google.com/speed/docs/insights/LeverageBrowserCaching但除非您指定，否则没有干净的方法来指示浏览器不要查找它们的更新版本它在AppCache或ServiceWorker中。

Answer 5

好的，在阅读完答案之后，最有用的是@Alexjohnson的答案。 Makes Angular JS works offline说了一些关于浏览器缓存的内容：

本地“旧”缓存在这里不起作用，因为它仍然需要与服务器通信以获得“304 Not Modified”http代码。

但我已经尝试了this technique，这很奇怪。伙计们请亲自试试，你会看到，在图像预加载后离线，图像将会显示出来。如果您将另一个img元素与对Web图像的引用放在一起，则不会加载它。

如果刷新页面，将显示缓存的图像。

您如何看待这个？

以下是一个例子：

<html>
    <head>
    </head>

    <body>
        <script type="text/javascript">
            var my_image1 = new Image();
            var my_image2 = new Image();
            var images = 2, count_images = 0;

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

            function preload()
            {
                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 image
            function use_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 -->

        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5aa12735419617.56f6327ab4f72.gif" width="500px" />
        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/74f16635419617.56f6327adcf75.gif" width="500px" />

        <br/>


        <!-- IMGES PUT IN CACHE ON BUTTON CLICK -->

        <input type="button" 
            id="preloadbutton2" 
            value="Preload Image" 
            onclick="preload();this.value='Loading. Please wait...'" />

        <div id="after_preload" style="display: none">
            <input type="button" value="Use Preloaded Image"
            onclick="use_preloaded_image()" /><br />
            <img src="" id="offline_1"  width="500px" />
            <img src="" id="offline_2" width="500px" />

        </div>

    </body>
</html>

离线时浏览器是否加载了缓存的图像？

5 个答案: