次のようにManifest.json PWA Manifest.jsonファイルを作成します。
JSON形式
{ 「名前」：「プログレッシブ自撮り」、「short_name」：「PWA自撮り」、「アイコン」：[ { 「src」：「/src/images/icons/app-icon-192x192.png」、「タイプ」： “ Image / png”、“ sizes”：“ 192x192” }、{ “ src”：“ /src/images/icons/app-icon-512x512.png”、“ type”：“ image / png”、“ sizes” ：“ 512x512” } ]、“ start_url”：“ /index.html”、“ scope”：“。”、“ display”：“ standalone”、“ background_color”：“ #fff”、“ theme_color”：“＃3f51b5 ” } ブラウザにアプリケーションマニフェストを通知するindex.htmlファイルと同じレベルのディレクトリにManifest.jsonファイルを作成します。マニフェストファイルが作成されたら、マニフェストファイルの参照リンクをindex.htmlに追加します。
1
マニフェスト属性の紹介マニフェストには多くの構成属性があります。次に、属性について簡単に紹介しますname、short_name：Webアプリケーションの名前を指定します。Short_nameはアプリケーションの省略形です。アプリケーションの名前属性を表示するのに十分なスペースがない場合、システムはshort_nameを使用します。
l display：display属性はウェブアプリケーションの表示モードを指定します。構成には4つの値があります：フルスクリーン、スタンドアロン、最小UI、ブラウザですが、一般的に使用される属性はフルスクリーンとスタンドアロンです。
fullscreen：
スタンドアロンの全画面表示：このモードで開いたアプリケーションはブラウザーのアドレスバーに表示されないため、ネイティブアプリケーションの
mini-ui、ブラウザーのように見えます：ブラウザーを使用してアクセスする場合と大差ありません。
l方向：Webアプリケーションの表示方向を制御し、電話が画面を回すのを禁止します。
l icons、background_color：iconはアプリケーションのアイコンを指定するために使用されます、background_colorはアプリケーションがロードされる前の背景色ですこれらの2つのプロパティを設定することにより、アプリケーションのスプラッシュスクリーンに組み合わせることができます。
l theme_color：アプリケーションのデフォルトのテーマの色を定義します。
l description：アプリケーションの説明を設定します。
上記はpwaマニフェストファイルのプロパティの説明の一部ですが、完成したマニフェストファイルをindex.htmlファイルと同じレベルのディレクトリに配置することで、マニフェストファイルを追加できます。
Chromeデベロッパーツール-アプリケーション-マニフェストを開き、追加したマニフェストファイルが読み込まれているかどうかを確認します。下の図に示すような情報がない場合は、サーバーnpm startを再起動して再読み込みできます。
サービスワーカーとは何ですか？
Service Worker（SW）は、ブラウザーとWebサーバー間のプロキシーとして機能するJavaScriptの一部です。Service Workersは、ブラウザーベースのWebアプリケーションにオフラインキャッシュ、メッセージプッシュ、サイレント更新などのネイティブアプリケーションの一般的な機能を実装して、より優れた豊かなエクスペリエンスをWebアプリケーションに提供できます。
さらに、このAPIでは、キャッシュを使用してオフラインエクスペリエンスをサポートできるため、開発者はユーザーエクスペリエンスを完全に制御できます。
サービスワーカーのライフサイクル
サービスワーカーの基本的なセットアップ手順は次のとおりです。
最初にソフトウェアを登録する必要があります。ソフトウェアがすでに登録されている場合、ブラウザはインストールイベントに従って自動的にインストールを開始します。
SWをインストールすると、アクティベーションイベントを受け取ります。このアクティベーションイベントは、以前のバージョンのSWで使用されていたリソースをクリーンアップするために使用できます。
実際の操作では、最初にsw.jsという名前の空のファイルをindex.htmlと同じレベルで作成する必要があります。次に、次のように基本タグをindex.htmlファイルに追加します。
1
最後に、以下のコードを追加してSWをsrc / js / app.jsに登録します。このコードは、ページの「読み込み」プロセス中にアクティブになります。Chrome DevTools-Application-Service Workerを開いて、SWが有効になっているかどうかを確認できます。
window.addEventListener（ 'load'、（）=> { const base = document.querySelector（ 'base'）; let baseUrl = base && base.href || ''; if（！baseUrl.endsWith（ '/'）） { baseUrl = ; }
${baseUrl}/
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(`${baseUrl}sw.js`)
.then( registration => {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(err => {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
上記のコードの主な機能は、ウィンドウオブジェクトのナビゲータープロパティでSW APIが使用可能かどうかを確認することです。windowオブジェクトはブラウザウィンドウを表します。ナビゲーターでSWが使用可能な場合、ページがロードされたらすぐにSWを登録します。
SWの登録は非常に簡単ですが、Service Workerを登録できないという問題が依然として発生する場合があります。SWを登録できない理由とその解決方法を簡単に見てみましょう。
アプリケーションはHTTPSで実行できません。開発中は、localhostを介してSWを使用できます。ただし、Webサイトに展開する場合は、HTTPSを有効にする必要があります。
SWのパスが正しくありません。
リロード時の更新はチェックされません。
Service Workerイベント
インストールおよびアクティブ化イベントに加えて、他のイベントには、メッセージ、フェッチ、同期、およびプッシュイベントが含まれます。
次のコードをSWに追加して、ライフサイクルイベント（インストールとアクティベーション）を監視します。
self.addEventListener（ 'install'、event => { console.log（ '[Service Worker] Installing Service Worker…'、event）; event.waitUntil（self.skipWaiting（））; }）; self.addEventListener（ 'activate '、event => { console.log（' [Service Worker] Activating Service Worker… '、event）; return self.clients.claim（）; }）; installコールバックがskipWaiting（）関数を呼び出し、アクティブ化イベントをトリガーして通知しますService Workerは、ユーザーがページを参照または再読み込みするのを待たずに、すぐに作業を開始します。
skipWaiting（）関数は、待機中のService Workerを強制的にアクティブなService Workerにします。self.skipWaiting（）関数をself.clients.claim（）関数と共に使用して、基盤となるService Workerへの更新がすぐに有効になるようにすることもできます。
この場合、自己プロパティはウィンドウオブジェクト（つまり、ブラウザウィンドウ）を表します。
[ホーム画面に
追加]ボタン[ホーム画面に追加]ボタンを使用すると、デバイスにPWAをインストールできます。このボタンを使用してPWAを実際にインストールするには、SWでフェッチイベントハンドラーを定義する必要があります。sw.jsでこの問題を解決しましょう。
self.addEventListener（ 'fetch'、event => { console.log（ '[Service Worker] Fetching something…'、event）; //これにより、デベロッパーツールif（event.request。 ===キャッシュ 'IF-only-cached' && event.request.mode == 'Same-Origin'）{！ return; } event.respondWith（FETCH（event.request））; }）; サービスワーカーキャッシュサービスワーカーの威力は、HTTPリクエストをインターセプトする機能です。このステップでは、このオプションを使用してHTTP要求と応答をインターセプトし、ユーザーにキャッシュから直接超高速の応答を提供します。
Service Workerのインストール中の事前キャッシュ
ユーザーが初めてWebサイトにアクセスすると、SWがインストールを開始します。このインストールフェーズでは、PWAによって使用されるすべてのページ、スクリプト、およびスタイルファイルをダウンロードしてキャッシュできます。この作業を完了するためのsw.jsファイルコードを次に示します。
const CACHE_STATIC_NAME = 'static';
const URLS_TO_PRECACHE = [
'/'、
'index.html'、
'src / js / app.js'、
'src / js / feed.js'、
'src / lib / material.min.js'、
'src / css /app.css'、
'SRC / CSS / feed.css'、
'SRC /画像/メイン-image.jpg'、
'https://fonts.googleapis.com/css?family=Roboto:400,700'、
「HTTPS ：//fonts.googleapis.com/icon？family = Material + Icons '、
];
self.addEventListener（ 'install'、event => { console.log（ '[Service Worker] Installing Service Worker…'、event）; event.waitUntil（caches.open（CACHE_STATIC_NAME）.then（cache => { console.log （ '[Service Worker] Precaching App Shell'）; cache.addAll（URLS_TO_PRECACHE）;
}）.
then（（）=> { console.log（ '[ServiceWorker] Skip waiting on install'）; return self.skipWaiting（）; }））; }）; このコードはインストールイベントを使用しており、インストールフェーズにありますURLS_TO_PRECACHEの配列を追加しました。オープンキャッシュ関数（caches.open）が呼び出されたら、cache.addAll（）関数を使用してファイルを配列にキャッシュできます。event.waitUntil（）メソッドを通じてJavaScriptプロミスを使用して、インストールにかかる時間と、インストールが成功したかどうかを確認します。
インストールイベントはself.skipWaiting（）を呼び出してSWを直接アクティブ化します。すべてのファイルが正常にキャッシュされると、SWがインストールされます。ただし、いずれかのファイルをダウンロードできない場合、インストール手順は失敗します。Chromeデベロッパーツールで、キャッシュ（キャッシュストレージ内）がURLS_TO_PRECACHE配列の静的ファイルで満たされているかどうかを確認できます。
ただし、[ネットワーク]タブを見ると、ファイルは引き続きネットワーク経由で取得されます。理由は、キャッシュの準備はできていますが、キャッシュから参照リソースを読み取っていないためです。作業のこの部分を完了するには、まずアプリケーションのフェッチイベントをリッスンし、次にリソースをインターセプトしてキャッシュから取得する必要があります。次のコードを見てみましょう。
self.addEventListener（ 'fetch'、event => { console.log（ '[Service Worker] Fetching something…'、event）; event.respondWith（caches.match（event.request）.then（response => { if（ response）{ console.log（response）; return response; } return fetch（event.request）; }））; }）; caches.match（）関数を使用して、受信URLが現在のキャッシュと一致しているかどうかを確認しますリソースのマッチング。一致する場合、キャッシュされたリソースを返しますが、リソースがキャッシュに存在しない場合、要求されたリソースを通常どおり取得し続けます。
Service Workerをインストールしてアクティブ化した後、ページを更新してネットワークタブをもう一度確認します。これで、Service WorkerはHTTPリクエストをインターセプトし、サーバーにネットワークリクエストを送信する代わりに、対応するリソースをキャッシュから即座にロードします。
これで、ネットワークタブでオフラインモードを設定した場合でも、アプリケーションに通常どおりアクセスできます。
バックグラウンド転送
バックグラウンドフェッチAPIはバックオフィス機能SWであり、ユーザーがバックグラウンドで大きなファイル、ビデオ、音楽、その他のリソースをダウンロードできるようにします。取得/送信プロセス中に、ユーザーがタブを閉じた場合でも、ブラウザー全体を閉じた場合でも、送信タスクはクリアされません。ユーザーが再度ブラウザを開くと、転送プロセスが再開されます。このAPIは、転送の進行状況をユーザーに表示したり、ユーザーがプロセスをキャンセルしたり一時停止したりすることもできます。
デフォルトでは、バックグラウンド転送機能は使用できません。URL（chrome：// flags /＃enable-experimental-web-platform-features）を介してChromeの「実験的Webプラットフォーム機能」オプションを許可する必要があります
以下は、このタイプのバックグラウンド転送を実装する方法の例です。
ID "bgFetchButton"のボタンをindex.htmlファイルに追加します
1
アセットをローカルに保存する
window.addEventListener（ 'load'、（）=> { … bgFetchButton = document.querySelector（ '＃bgFetchButton'）; bgFetchButton.addEventListener（ 'click'、async event => { try { const registration = await navigator.serviceWorker.ready ; registration.backgroundFetch.fetch（ 'my-fetch'、[new Request（）]）; } catch（err）{ console.error（err）; } }）; … }）; 上記のコードは次の条件で始まりますバックグラウンド転送を実行します。
${baseUrl}src/images/main-image-lg.jpg
ユーザーがIDがbgFetchButton
SWのボタンが登録さ
れている場合、転送プロセスはユーザーインターフェイスをブロックできないため、非同期関数でバックグラウンド転送を実行する必要があります。
転送が完了した後にキャッシュに入れます
self.addEventListener（ 'backgroundfetchsuccess'、event => { console.log（ '[Service Worker]：Background Fetch Success'、event.registration）; event.waitUntil（（async function（）{ try { // Itate the records to toキャッシュにデータを入力するconst cache = await caches.open（event.registration.id）; const records = await event.registration.matchAll（）; const promises = records.map（async record => { const response = await record.responseReady; await cache.put（record.request、response）; }）; await Promise.all（promises）; } catch（err）{ console.log（ '[Service Worker]：Caching error'）; } }）（）） ; }）;
1 Longhua Avenue http://www.kinghill.cn/LongHuaDaDao1Hao/index.html