2017-10-16 15 views
0

私のウェブサイトのサービスワーカーの設定にはいくつか問題があります。サービスワーカーでstart_urlをキャッシュしないようにしてください

私はcss/js/fontsといくつかの画像/ svgをキャッシュしたいだけです。すべてを1分ごとに更新するので、HTMLをキャッシュしたくありません。

それはちょっとしたことですが、スマートフォンで試してみましたが、私がすでに追加していても「ホーム画面に追加」という通知が表示されています。 Chrome Devアプリケーションでは[追加]ボタンが表示されません。灯台とも

私は次のエラーを取得:

は失敗、ユーザーがWebアプリケーションをインストールするように促されることはありません」

を「200オフライン時に応答しません」:マニフェストSTART_URLではありませんサービスワーカーによってキャッシュされます。

今、私のsw.jsはこのようです。あなたが見ることができるように、私はHTMLをキャッシュしていたので、また、クッキーが動作していなかったので、取り出し部分にコメントしました。

シンプルなサービスワーカー「テンプレート」がありますか?

const PRECACHE = 'app-name'; 
const RUNTIME = 'runtime'; 

// A list of local resources we always want to be cached. 
const PRECACHE_URLS = [ 
'/css/file.css', 
'/js/file.js', 
'/images/logo.png', 
'/fonts/roboto/Roboto-Regular.woff2' 
] 

// The install handler takes care of precaching the resources we always need. 
self.addEventListener('install', event => { 
    event.waitUntil(
    caches.open(PRECACHE) 
     .then(cache => cache.addAll(PRECACHE_URLS)) 
     .then(self.skipWaiting()) 
); 
}); 

// The activate handler takes care of cleaning up old caches. 
self.addEventListener('activate', event => { 
    const currentCaches = [PRECACHE, RUNTIME]; 
    event.waitUntil(
    caches.keys().then(cacheNames => { 
     return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); 
    }).then(cachesToDelete => { 
     return Promise.all(cachesToDelete.map(cacheToDelete => { 
     return caches.delete(cacheToDelete); 
     })); 
    }).then(() => self.clients.claim()) 
); 
}); 

// The fetch handler serves responses for same-origin resources from a cache. 
// If no response is found, it populates the runtime cache with the response 
// from the network before returning it to the page. 
self.addEventListener('fetch', event => { 
    // Skip cross-origin requests, like those for Google Analytics. 
    // if (event.request.url.startsWith(self.location.origin)) { 
    // event.respondWith(
    //  caches.match(event.request).then(cachedResponse => { 
    //  if (cachedResponse) { 
    //   return cachedResponse; 
    //  } 

    //  return caches.open(RUNTIME).then(cache => { 
    //   return fetch(event.request).then(response => { 
    //   // Put a copy of the response in the runtime cache. 
    //   return cache.put(event.request, response.clone()).then(() => { 
    //    return response; 
    //   }); 
    //   }); 
    //  }); 
    //  }) 
    // ); 
    // } 
});  

答えて

0

私はなぜバナーをインストール表示されますが、灯台によって与えられた2つのエラーがpropably index.htmlを、非常にSTART_URLの行方不明のキャッシングに関連しているかわかりません。あなたがここで説明したキャッシング戦略に従えば、Lighthouseは常にそれらについてあなたに告げるでしょう。

私はあなたがWorkboxとそのランタイムキャッシングを試すことをお勧めします。ランタイムキャッシュは簡単に言えば、* .svg、* .cssなどのURLを指定すると、クライアントが最初に要求したときにそれらをキャッシュします。将来、ファイルがすでにキャッシュされている場合、SWはそれらをキャッシュからクライアントに提供します。基本的にはSWに、に遭遇したときに、これとその種類のURLをにキャッシュするように指示します。

ランタイムキャッシュでは、一連のファイルをキャッシュするために、プリキャッシング(Workboxからも見つかる可能性があります)を伴う可能性があります。

は、ここでそれをチェックアウト:https://workboxjs.org

を彼らは例やビルドツールのプラグインのカップルを持っています。

関連する問題