ホームページ > 記事 > ウェブフロントエンド > Service Worker を使用して、非常に単純なオフライン page_html/css_WEB-ITnose を作成します
Service Worker を使用して、非常に単純なオフライン page_html/css_WEB-ITnose を作成します
- WBOYオリジナル
- 2016-06-24 11:16:031711ブラウズ
次のシナリオを想像してみましょう。私たちは田舎に向かう電車に乗って、モバイル デバイスで素晴らしい記事を読んでいます。同時に、[もっと見る] リンクをクリックすると、電車が突然トンネルに入り、モバイル デバイスがネットワークを失い、Web ページに次のような内容が表示されます。
これはかなりイライラする経験！幸いなことに、Web 開発者は新しい機能を使用してこの種のユーザー エクスペリエンスを向上させることができます。最近 Service Worker を使って遊んでいますが、Service Worker が Web にもたらす無限の可能性にいつも驚かされます。 Service Worker の優れた機能の 1 つは、ネットワーク リクエストのステータスを検出し、それに応じて応答できることです。
この記事では、この機能を使用してユーザーの現在のネットワーク接続ステータスを確認し、接続がない場合は非常にシンプルなオフライン ページに戻ることを計画しています。これは非常に基本的な例ですが、この機能を立ち上げて実行するのがいかに簡単であるかがわかるはずです。 Service Worker についてまだ学習していない場合は、この Github リポジトリをチェックして詳細を学ぶことをお勧めします。
ケースを開始する前に、そのワークフローを簡単に見てみましょう:
- ユーザーが初めてページにアクセスすると、Service Worker がインストールされ、オフライン HTML ページがブラウザのキャッシュに追加されます
- その後、ユーザーが別の Web ページ (同じ Web サイトの下) に移動しようとしているが、この時点で接続が切断されている場合、キャッシュされたオフライン HTML ページが返されます
- ただし、ユーザーが別の Web ページに移動するつもりの場合、ネットワークこの時点では接続されているため、通常どおりページを閲覧できます
始めましょう
次の HTML ページがあるとします。これは非常に基本的なことですが、一般的なアイデアが得られます。
<!DOCTYPE html>
次に、オブジェクトのみを作成したページに Service Worker を登録しましょう。作成した HTML に次のコードを追加します。
すごいです
次に、Service Worker ファイルを作成し、「service-worker.js」という名前を付ける必要があります。この Service Worker を使用してすべてのネットワーク リクエストをインターセプトし、ネットワーク接続をチェックし、チェック結果に基づいて最適なコンテンツをユーザーに返すことを計画しています。
<script>// Register the service worker// 注册 service workerif ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { // Registration was successful // 注册成功 console.log('ServiceWorker registration successful with scope: ', registration.scope);}).catch(function(err) { // registration failed :( // 注册失败 :( console.log('ServiceWorker registration failed: ', err); });}</script> 上記のコードでは、Service Worker のインストール時にオフライン ページをキャッシュに追加しました。コードを小さな部分に分割すると、コードの最初の数行で、オフライン ページのキャッシュされたバージョンと URL を指定していることがわかります。キャッシュに異なるバージョンがある場合は、バージョン番号を更新するだけでキャッシュをクリアできます。 12 行目あたりで、オフライン ページとそのリソース (画像など) にリクエストを作成します。成功した応答を取得した後、オフライン ページと関連リソースをキャッシュに追加します。
これで、オフライン ページがキャッシュされ、必要なときに取得できるようになります。同じ Service Worker で、ネットワークがない場合に返されるオフライン ページに対応するロジック コードを追加する必要があります。
'use strict';var cacheVersion = 1;var currentCache = { offline: 'offline-cache' + cacheVersion};const offlineUrl = 'offline-page.html';this.addEventListener('install', event => { event.waitUntil( caches.open(currentCache.offline).then(function(cache) { return cache.addAll([ './img/offline.svg', offlineUrl ]); }) );}); この機能をテストするには、Chrome の組み込み開発者ツールを使用できます。まず、ページに移動し、Service Worker がインストールされたら、[ネットワーク] タブを開いて、スロットリングをオフラインに変更します。 (翻訳者注: スロットルをオフラインに設定しても効果がない場合は、ネットワークをオフにするか、Chrome が 360 Security Guard を通じてネットワークにアクセスすることを禁止できます)
ページを更新すると、対応するものが表示されるはずです。オフラインページです！
コードを書かずにこの機能を単純にテストしたい場合は、私が作成したデモにアクセスしてください。さらに、上記のコードはすべて Github リポジトリにあります。
このケースで使用されているページはシンプルだと思いますが、オフライン ページはあなた次第です。このケースの内容をさらに詳しく知りたい場合は、このケースのようなオフライン ページのキャッシュ無効化を追加できます。
多読
さらに、優れたオフライン機能のケースがいくつかあります。例: Guardian は、クロスワード パズルを備えたオフライン Web ページを作成しました。これにより、ネットワークの再接続を待っている間 (つまり、オフラインになっているとき) にも少し楽しむことができます。また、Google Chrome Github リポジトリを参照することをお勧めします。これには、さまざまな Service Worker の例が多数含まれています。使用例の一部もここにあります。
ただし、上記のコードをスキップして、関連する操作をライブラリを通じて単純に処理したい場合は、UpUp を検討することをお勧めします。これは、オフライン機能を簡単に使用できる軽量のスクリプトです。
より良い記事を翻訳できるように翻訳者をサポートするためのヒント、ありがとう!
翻訳者にチップ
より良い記事を翻訳できるように翻訳者をサポートするためのチップ、ありがとう!
支払い方法を選択してください
著者について: Liu Jianchao-J.c
フロントエンド、オンザロード... http://jchehe.github.io 個人ホームページ · 私の記事 · 17 ·