хорошо, вот как я решил это. Я использую Angular JS 1.6.4 с sw-preache.
У меня есть CacheStorage через сервис-воркеров, поэтому, используя сервис-воркеров, я знаю, что ожидаю, что устройства будут поддерживать определенные функции, в моем случае мы знаем, что у наших пользователей будут планшеты Android с Chrome, и поддержка действительна.
Я разрабатываю прогрессивное веб-приложение с автономной функциональностью.
Итак, теория ... У меня есть директивы с templateUrls.
Используя этот пост: 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'
}
}
]);
Теперь, когда это приложение отключается, кешированные экземпляры контента его не пинают - раздражает.
Итак, после долгого откладывания я спустился и испачкался.
Мое решение - оставить templateUrl как есть, но перезаписать содержимое через службу $ templateCache.
Для этого вы добавляете функцию RUN к своей директиве (для ясности). Мы знаем, что представление кэша сервис-воркера наших URL-файлов содержит общий путь, в моем случае: '/App/core/directives/location.html'.
Итак, используя новую технологию в браузере, window.caches дает мне доступ к CacheStorage, который используют рабочие службы, после чего я могу использовать доступный API: https://developer.mozilla.org/en-US/docs/Web/API/Cache
Затем я могу использовать метод сопоставления, чтобы найти соответствующее содержимое кеша сервис-воркера, прочитать этот двоичный поток и преобразовать в HTML, а затем сказать $ templateCache, чтобы он заменил его кешированным значением сервис-воркера.
Итак, для полноты (и вы можете создать общую службу, которая заменяет кешированные значения на основе 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
}
}
]);
})();
Отступы ... процесс RUN является синхронным, поэтому сначала они должны сначала попасть на сайт онлайн ... но именно так должен работать сервис-воркер, так что это обрабатывается в обучении :)
Я ожидаю, что будет лучший вариант, но на данный момент это решение, которое у меня есть, я буду создавать службу шаблонов для замены значений $ templateCache на основе var templateUrl, которые будут иметь каждая директива, поэтому код станет более чистым в каждом директиве. .... я подумывал о наличии глобального набора шаблонов и файлов, но, немного неясно, думаю, что его чище для каждой директивы
person
Paul Backhouse
schedule
05.07.2017
