5

動的にリンクされたページのコンテンツをキャッシュしようとしています。Service Worker が登録された単純な index.html があり、このページに到達したときに、リンクが指しているコンテンツを動的にキャッシュするように設定したいと考えています (この 2 番目のページは静的インストール イベント)。

基本的に、キャッシュに保存したい推奨/関連ページへのリンクを持つページを設計しています。ユーザーが推奨される関連ページへのリンクをクリックすると、キャッシュから読み込まれるようになります。

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <h3>I want to cache</h3>
    <a href="page2.html">this link to my second page!</a> 
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').then(function(reg) {
        // registration worked
        console.log('Registration succeeded. Scope is ' + reg.scope);
      }).catch(function(error) {
        // registration failed
        console.log('Registration failed with ' + error);
      });
    }
  </script>
  </body>    
</html>

page2.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script2.js"></script>
  </head>
  <body>
    <h1>This is my second page!</h1>
    <h3>I want everything from this page to be stored in the cache.</h3>
  </body> 
</html>

plunkr は次のとおりです: https://plnkr.co/edit/YIAacgkuboyRBkv10hfl?p=catalogue

静的インストール イベントに page2.html を明示的に配置せずに、2 番目のページのコンテンツを動的にキャッシュするようにフェッチ イベントを設定するにはどうすればよいですか?

4

2 に答える 2

2

更新された質問によると、 Client.postMessage()でそれを行うことができます。

client/html/script で 

<a href="/url/cache-this" class="precache"></a>
<script>
if ('serviceWorker' in navigator) {

  // ensure service worker is ready, you can also put this into DOM 'ready' or 'load' event
  navigator.serviceWorker.ready.then(function (reg) {

    var data = {
      action: "precache", 
      url: $('.precache').attr('href') // if you had more than an url need to be cached, do a loop to collect all data
    };
    // NOTE: the 'action' is optional, but it is nice to separate your message type, in case you have a lot of communication between DOM and service worker.

    // message to SW a stringified string of data.
    navigator.serviceWorker.controller.postMessage(JSON.stringify(data));

  });
}
</script>

Service Worker で。 

self.addEventListener('message', event => {

  if (event.data) { 
    let data = JSON.parse(event.data); // parse the message back to JSON
    if (data.action == "precache") { // check the action
        self.toolbox.precache([data.url]); // here you can use sw-toolbox or anything to cache your stuff.
    }
  }
});

編集：タイプミスを修正

于 2016-07-07T05:12:53.267 に答える
0

リンク先に「yoursite/pages/」のようなパターンがある場合は、そのためにツールボックス キャッシュ ルーターを配置できます

toolbox.router.get('/myapp/pages/*', toolbox.networkFirst);

これは、動的キャッシュの別のソリューションです

于 2016-07-14T17:02:33.353 に答える