PWA対応 Webサイトのオフラインで表示

PWA対応 Webサイトのオフライン表示を試します。

以下対応を行うと1度表示した後はネットワークがつながっていなくてもページが表示できます。

PWAの基本的なところは前回の「PWA対応 Webサイトのアイコンをホーム画面に追加」を参照してください。

①前提

前回のmanifest.jsonはそのまま使用します

テスト用に以下2ページを用意します。

・index.html

前回行った「serviceWorker.js」の登録はそのまま使用します。

オフラインで遷移と画像が表示できることを試すためにページ内にリンクと画像表示を追加しています。

 

・index2.html

 

②キャッシュに保持設定

・serviceWorker.jsに記述

「resourcesToCache」にキャッシュするリソースを記述します。

「/」配下と「/images」をキャッシュしています

「CACHE_VERSION」でキャッシュのバージョン管理を行います。

 

③キャッシュされた内容を表示設定

・serviceWorker.jsに記述

 

③古いキャッシュを削除

・serviceWorker.jsに記述

 

④オフライン表示

携帯でオンライン状態で表示をいったん行ってから、フライトモードに変更しオフライン状態で表示を行ってみました。

成功です!

オフライン状態でページ遷移も画像ファイルも表示されました。

こんな便利な機能iosも早く対応してほしいもんですね。

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です