带有服务工作者问题的角模板缓存

Question

我有一个湾设置，该设置将我的所有HTML放入模板缓存中，以便在Angular中更快地访问。我正在尝试使用SW-PRECACHE将服务工作者添加到我的项目中，以便可以离线使用它。如果我连接到网络，一切正常。当我离线时，HTML资源的请求(模板缓存中(失败了，因为它似乎正在请求网络的路径。

我需要添加到我的SW-Precache配置中，以便将其推迟到Angular来处理HTML文件的检索？

Answer 1

好的，这就是我解决这个问题的方式。我正在使用Angular JS 1.6.4与SW-PRECACHE。

我通过服务工作人员有scaceStorage，因此使用我知道我希望设备支持某些功能的服务工人，在我的情况下，我们知道我们的用户将拥有具有Chrome的Android平板电脑，并且支持是有效的。

我正在开发具有离线功能的渐进式网络应用程序。

所以，理论...我有具有模板的指令。

使用此帖子：https：//thinkster.io/templatecache-tutorial

我基本上有我的指示代码：

angular.module('app').directive('location',
['$timeout', 'notify.service', 'user.settings.service', 'log.service',
    function ($timeout, notify, userSettings, log) {
        return {
            restrict: 'EA',
            ... controller etc.., 
            templateUrl: '/App/core/directives/location.html'
        }
    }
]);

现在，当这个应用程序脱机时，内容的缓存实例没有踢它 - 烦人。

所以，经过大量的拖延，我下来又脏了。

我的solutio是，保持模板图，但通过$ templatecache服务覆盖内容。

为此，您可以使用指令(为了清楚(附加运行功能。我们知道，在我的情况下，我们的URL文件的服务工作者缓存表示包含通用路径：'/app/core/directives/location.html'。

因此，在浏览器中使用新技术，窗口。CACHES使我可以访问服务工作人员使用的缓存，然后我可以使用可用的API：https：//develoveler.mozilla.org/en-us/docs/web/api/cache

我可以使用匹配方法查找匹配的服务工作者缓存内容，读取二进制流并转换为HTML，然后告诉$ templatecache将其替换为服务工作者cached值。

因此，为了完整性(您可以创建一个基于TemplateUrl的缓存值的通用服务 - 我将为每个指令做(

(function () {
    'use strict';
    var templateUrl = '/App/core/directives/location.html';
    // <location on-location='someFunc'></location>
    // provides a form/control to find a location either by GEO location or manual city search
    angular.module('app')
            .run(['$templateCache', function ($templateCache) {
                var cache = window.caches;
                cache.match(templateUrl, { ignoreSearch: true }).then(function (response) {
                    if (response) {
                        response.body.getReader().read().then(function (cachedResponse) {
                            // convert the Uint8Array value to HTML string
                            var content = new TextDecoder('utf-8').decode(cachedResponse.value);
                            $templateCache.put(templateUrl, content);
                            //console.log($templateCache.get(templateUrl)); // debug
                        });
                    }
                });

            }])
    .directive('location',
    ['$timeout', 'notify.service', 'user.settings.service', 'log.service',
        function ($timeout, notify, userSettings, log) {
            return {
                restrict: 'EA',
                ... controller, scope etc...
                templateUrl: templateUrl
            }
        }
    ]);  
})();

退缩...运行过程是同步的，所以最初他们必须首先在线上网站...但是这就是服务工作者的工作方式，因此在培训中处理：(

我希望有一个更好的选择，但是暂时是我拥有的解决方案，我将创建一个模板服务，用于替换$ templatecache值，基于var TemplateUrl每个指令都有在每个DirectTive中。。。我考虑过具有一个全局的模板和文件，但是，有点晦涩，认为每个指令的清洁剂

Answer 2

我的原始解决方案不是100％

要解决此问题，请使用SW-PRECACHE和SW-Toolbox

使用Gulp配置您可以设置SW-PRECACHE来缓存您的内容，并使用SW-Toolbox扩展此内容以根据路由配置使用缓存响应

请参阅：https：//developers.google.com/web/ilt/pwa/ususe-sw-precache-and-sw-toolbox