0

angularでのアクセスを高速化するために、すべてのhtmlをテンプレートキャッシュに入れるgulpセットアップがあります。オフラインで使用できるように、sw-precache を使用して Service Worker をプロジェクトに追加しようとしています。ネットワークに接続していれば、すべて正常に動作します。オフラインにすると、ネットワークからのパスを要求しているように見えるため、(テンプレート キャッシュにある) html リソースの要求が失敗します。

HTMLファイルの取得を処理するためにangularに任せるために、sw-precache構成に追加する必要があるものはありますか?

4

2 に答える 2

2

わかりました、これが私がこれを解決した方法です。sw-precache で Angular JS 1.6.4 を使用しています。

私は Service Worker を介して CacheStorage を持っているので、Service Worker を使用すると、デバイスが特定の機能をサポートすることを期待していることがわかります。

オフライン機能を備えたプログレッシブ Web アプリを開発しています。

だから、理論...私は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 ファイルの Service Worker キャッシュ表現には、共通のパス (私の場合は「/App/core/directives/location.html」) が含まれていることがわかっています。

そのため、ブラウザーの新しいテクノロジーを使用すると、window.caches によって Service Worker が使用する CacheStorage にアクセスできるようになり、利用可能な API を使用できるようになります: https://developer.mozilla.org/en-US/docs/Web/ API/キャッシュ

その後、match メソッドを使用して一致する Service Worker キャッシュ コンテンツを見つけ、そのバイナリ ストリームを読み取って HTML に変換し、それを Service Worker のキャッシュ値に置き換えるよう $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プロセスは同期的であるため、最初はオンラインでサイトにアクセスする必要があります...しかし、それはサービスワーカーがとにかく作業する必要がある方法であるため、トレーニングで処理されます:)

より良いオプションがあると思いますが、当分の間、それが私が持っている解決策です。各ディレクティブが持つ var templateUrl に基づいて $templateCache 値を置き換えるためのテンプレート サービスを作成するので、各ディレクティブでコードがよりクリーンになります。 ....テンプレートとファイルのグローバルな配置を検討しましたが、少しあいまいですが、各ディレクティブのほうがきれいだと思います

于 2017-07-05T15:15:56.993 に答える