PWAの代替手術：ServiceWorker - キャッシュ

でPWA変装：manifest.jsonを通じ、私たちmanifest.jsonのウェブは、デスクトップ上のショートカットを生成することができ、平均アプリケーションはもはや外観に大きな違いであると、我々は、Webを解決する必要がないのでことを、実行時にアドレスバーを非表示にする必要がありませんようにしますアプリのもう一つの大きな問題- メカニズムオフ、現在のシステムは、ほぼすべてのバックエンドとの情報交換にインターネット経由で瞬時に行われますが、ネットワークの大多数の場合、あなたはその後、アプリケーションは、おそらくその機能を失うが、ウェブとなり、言うことができません違いは、デフォルトのWebブラウザは、平均的なユーザーのためのより多くのコントラストが非友好的、警告画面が表示されますが、空は少し良くアプリケーション、インターネットになり、状態はまだインターネットの画面を持っていないということですオフライン、もはやバックエンドのデータ交換を行いませんが、Webにも、開発をオフラインストレージメカニズムを提供しますが、控除セキュリティを言わなかったものの、まだ、前に取得した情報を提供することができるがとき、機械側に保存されたダウンロード情報また、関連機能を防ぐことができ、特にユーザ（またはブラウザ拡張機能）、より困難です。

ServiceWorkerブラウザのバックグラウンドでスクリプトを実行することができ、その後、我々はネットワークが最後にServiceWorkerの機構ServiceWorkerをキャッシュしてWebアプリケーションの経験オフラインのときに、問題を解決する方法を練習しなければならないがしているのですか？私はそれであると言うことができますずるい、聞くために壁のカーテン垣間見ます。

操作手順

のでServiceWorkerはフロントへのアクセスを監視することができ、それらは開発を容易にするために、唯一の例外は、ネイティブ側で、HTTPSの下で実行させる必要があった、localhostまた、安全な伝送ブラウザ考慮されます、そして、私たちは徐々にServiceWorker実装を開始します。

我々は継続PWAステガノグラフィを：manifest.jsonを例として、プログラムを。
first-app_2017-09-25.zip

命令経由することを忘れないでくださいダウンロードするnpm installにパッケージを再インストールします。
通じここでng build --prod -oh、出力ファイル名がハッシュ値を含んでいないのでことを、コンパイルする命令。
-oh：--output-hashing略語。

参考文献：
MDN - 使用労働者サービス
は、Google Developers - 接客業：AN紹介

登録

まず、プロジェクトディレクトリに設立sw.jsServiceWorkerスクリプトとして、との確立register_sw.js、次のようにスクリプトの構文を登録する責任があります。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js')
    .then(reg => {
      // registration worked
      console.log('[Service Worker] Registration succeeded. Scope is ' + reg.scope);
    }).catch(error => {
      // registration failed
      console.log('[Service Worker] Registration failed with ' + error);
    });
}

私たちは、から見ることができる準備ができているServiceworker？さまざまなブラウザのウェブサイトをサポート。

ホーム（続くindex.htmlに追加）register_sw.js。

<!doctype html>
<html lang="zh">
...
<body oncontextmenu="return false">
  <app-root></app-root>
  <script type="text/javascript" src="register_sw.js"></script>
</body>

</html>

我々はオミットすることもできますregister_sw.jsページに書かれた登録文法に直接ファイル、しかしないServiceWorkerスクリプト - sw.jsブラウザがバックグラウンドで別のスレッド（スレッド）として実行されるので、（まだ空白）も、ページ内を移動するsw.jsので、手段ServiceWorkerは、フロントエンドのWebコンテンツを介入しません。

Chrome拡張機能を通じて- ChromeのWebサーバーを実行するためにも、あなたが見ることができますsw.js空白ですが、ServiceWorkerはすでに実行されています。

そして、manifest.json我々はなりますようregister_sw.jsとsw.jsする追加、ときに、このビルドをコピーされます。.angular-cli.jsonassets

イベントに参加

オープンsw.jsして3つのイベントを追加しますinstall（インストール）、 activate（スタート）、fetchおよびを通じて（アクセス）console.logイベントがトリガされているかどうかを確認すること。

self.addEventListener('install', event => {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', event => {
  event.waitUntil(clients.claim());
});

self.addEventListener('fetch', event => {
  console.log('[ServiceWorker] fetch', event.request);
});

直接元のブラウザウィンドウの更新では、ブラウザを見つけることができる非常に巧妙なスクリプトが（ServiceWorkerを見つけたsw.js）変更されている、より多くのように、＃251アクティブ化されるのを待っているシリアル番号のが、あなたが状態でそれを見つけることができます慎重に見て、現在のバージョンはので、これは、まだ以前のバージョンの開始である
場合、Webアプリケーションを実行するブラウザのフロントエンド、デフォルトのブラウザは、現在のスクリプトを終了していない更新が必要なくなっServiceWorker（例えば、閉鎖されなくなるまで、スクリプトが待機します現在のブラウザウィンドウ）新しいスクリプトで更新されます。

閉じる現在のブラウザウィンドウと、新しいウィンドウページを開き、あなたは現在の開始ServiceWorkを見つけることができ、そのシリアル番号がある＃251、コンソールウィンドウへの切り替えも関連イベントがトリガされて見ることができます。

如果希望異動過的程式能夠立即更新，可以在 install 事件內透過 skipWaiting 方法來立即啟用。
大专栏 PWA 替身術：ServiceWorker - cachesJonny-Huang.github.io//images/angular/training/pwa/pwa_61.png" alt=""/>
參考資料：MDN - ServiceWorkerGlobalScope.skipWaiting()

由上圖也可以了解 ServiceWork 的處理順序為
install(安裝) => activate(啟動) => fetch(存取)
install、activate 只會觸發一次，fetch 則是只要前端對後台發出 request 就會觸發。

靜態快取

開啟腳本(srcsw.js)，先建立檔案快取清單-filesToCache，並將要快取的檔案加入期內，接著在 install 事件內將快取清單加入至快取內。
接著在 fetch 事件內去透過 respondWith 方法來阻止瀏覽器使用預設存取模式，並比對快取是否有該 request 請求的資料，若有則直接從快取提取，否則就使用預設模式存取，相關代碼如下：

const cacheVersion = 'v1';
const filesToCache = [
  '0.chunk.js',
  'favicon.ico',
  'index.html',
  'inline.bundle.js',
  'main.bundle.js',
  'polyfills.bundle.js',
  'register_sw.js',
  'styles.bundle.css',
  'vendor.bundle.js',
  'assets/images/android_048.png',
  'assets/images/android_057.png',
  'assets/images/android_072.png',
  'assets/images/android_076.png',
  'assets/images/android_096.png',
  'assets/images/android_114.png',
  'assets/images/android_120.png',
  'assets/images/android_144.png',
  'assets/images/android_152.png',
  'assets/images/android_167.png',
  'assets/images/android_180.png',
  'assets/images/android_192.png',
  'assets/images/android_512.png'
];

self.addEventListener('install', event => {
  console.log('[ServiceWorker] Install');
  event.waitUntil(
    caches.open(cacheVersion)
    .then(cache => {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', event => {
  console.log('[ServiceWorker] Activate');
});

self.addEventListener('fetch', event => {
  console.log('[ServiceWorker] fetch', event.request);
  event.respondWith(
    caches.match(event.request)
    .then(response => response || fetch(event.request))
  );
});

開啟瀏覽器 ServerWork 的離線(Offline)選項或者直接停用 Web Server，重新整理後可以發現網頁依然存在，基本的離線機制已經完成了。

快取版本

在 sw.js 內的最上方我們宣告了一個常數當作快取名稱
const cacheVersion = 'v1';
到目前為止我們只做到將資料加到快取內，但是我們可能會隨著功能的變更讓網站結構調整，當然快取清單也必然會配合修改，這時候就會發生快取可能會殘留舊有而不需要的資料，或者是快取累計的資料過於龐大，因此我們需要一個方式可以移除這些不必要的資料。

我們可以透過開發者工具來查看目前快取的資料。

在這邊我們以最簡單的方式來處理，當快取規則與以往不同時我們透過變更 cacheVersion 來產生全新的快取區域，並將就的快取直接刪除。
開啟腳本並在 activate 事件添加刪除快取的程式碼，並將快取版本(cacheVersion)改為 v2。

const cacheVersion = 'v2';
const filesToCache = [
  ...
];
...
self.addEventListener('activate', event => {
  console.log('[ServiceWorker] Activate');
  event.waitUntil(
    caches.keys()
    .then(keyList => {
      return Promise.all(keyList.map(key => {
        if (key !== cacheVersion) {
          return caches.delete(key);
        }
      }));
    })
  );
});
...

重新執行，可以發現快取名稱已經變成 v2，而原本的 v1 已經被移除了。

API 快取

因為筆者目前沒有建立 WebAPI 環境，所以在此不做練習，但是我們可以參考 MDN 網站使用 Service Workers 的範例，由範例程式碼可以看到它的作法與我們上面的方法類似，當快取內沒有相關資料時就改從網路去後台抓取，差別就在於它抓取資料後會先存入快取內，這樣下次就可以直接從快取提取資料。

目前的機制看起來與其說我們在建立快取，不如說更像在實作一個 Web App 專屬的代理伺服器(Proxy Server)，最重要的是這種架構讓開發人員可以專注在連線模式的系統運作，完全不需要思考離線的問題。
但是目前也衍生出一些問題：

いくつかのAPIパラメータと同じものの、しかし、例えば、異なる時間に異なるコンテンツを返します。最新のニュース、発表...ので、それがユーザーにない、更新されたデータの錯覚を与える場合は、すべてのこの時間は、キャッシュからデータをフェッチするために、上データ・キャッシュを変更するには、オフラインから読み込むかのように、インターネットを通じて情報を取得するためのバックエンドネットワークがあるとき私たちは、別のメカニズムが必要です。
だけでなく、絵が残っているものの、追加、変更、問題を削除するための情報のためとして、私たちだけではなく、クエリの要件は、どのように対処するも、キャッシングすることにより、そのデータの移動のためにオフラインにするとことができますか？
以下のような行、クライアントモードに脇のバックエンド・サーバ・プッシュメッセージによって、このイニシアチブは、最も一般的に使用されるだけでなく、Web上の人々に到達するためにどのように？

これらの問題は、フォローアップの議論を行う機会を持っています。

first-app_2017-09-26.zip