1. ようこそ
このラボでは、既存のウェブ アプリケーションをインストール可能にします。これは、プログレッシブ ウェブアプリ ワークショップのコンパニオン Codelab シリーズの 4 番目です。前回の Codelab は IndexedDB でした。このシリーズには、他に 4 つの Codelab があります。
学習内容
- Service Worker を手動で作成する
- 既存のウェブ アプリケーションに Service Worker を追加する
- Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする
必要な予備知識
- 基本的な HTML と JavaScript
必要なもの
2. 準備
まず、この Codelab を完了するために必要なスターター コードをクローンするかダウンロードします。
リポジトリのクローンを作成する場合は、pwa04--tab-to-taskbar ブランチにいることを確認してください。zip ファイルには、そのブランチのコードも含まれています。
このコードベースには Node.js 14 以降が必要です。コードが用意できたら、コードのフォルダのコマンドラインから npm ci を実行して、必要なすべての依存関係をインストールします。次に、npm start を実行して、Codelab の開発用サーバーを起動します。
ソースコードの README.md ファイルには、すべての配布ファイルの説明が記載されています。また、この Codelab 全体を通して使用する主な既存のファイルは次のとおりです。
キーファイル
index.html- メイン アプリケーションの HTML
3. ウェブアプリ マニフェストを作成する
ウェブアプリ マニフェスト ファイルは PWA を記述するもので、機能する Service Worker とともに、ブラウザがウェブアプリをインストール可能であることを認識し、インストール先のデバイスでどのように表現するかを認識できるようにします。ただし、まず作成する必要があります。ウェブアプリの public フォルダに manifest.json というファイルを追加し、次のコードを追加します。
{
"name": "PWA Edit",
"short_name": "PWA Edit",
"start_url": "/?source=pwa",
"display": "standalone",
"icons": [
{
"type": "image/png",
"sizes": "192x192",
"src": "/images/icons/logo-192.png"
},
{
"type": "image/png",
"sizes": "48x48",
"src": "/images/icons/logo-48.png"
},
{
"type": "image/png",
"sizes": "72x72",
"src": "/images/icons/logo-72.png"
},
{
"type": "image/png",
"sizes": "128x128",
"src": "/images/icons/logo-128.png"
},
{
"type": "image/png",
"sizes": "384x384",
"src": "/images/icons/logo-384.png"
},
{
"type": "image/png",
"sizes": "512x512",
"src": "/images/icons/logo-512.png"
},
{
"type": "image/png",
"sizes": "96x96",
"src": "/images/icons/logo-96.png"
},
{
"type": "image/png",
"sizes": "1024x1024",
"src": "/images/icons/maskable-1024.png",
"purpose": "maskable"
}
],
"theme_color": "#282c34",
"background_color": "#282c34",
"description": "A PWA markdown editor",
"categories": ["productivity", "utilities"]
}
iOS デバイス用の Apple タッチアイコンを含めることを忘れないでください。index.html の <head> の <title> タグの直後に次のコード行を追加します。
<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />
説明
このマニフェストには、必須フィールド、推奨フィールド、プロモーション フィールドが含まれているため、多くの情報が記載されています。まず、PWA の名前、スタート URL、表示モード、アイコンが定義されている必須フィールドがあります。最後のアイコンはマスク可能なアイコンであり、デバイスの UI に基づいて複数のアイコンを表示できます。次に、推奨されるテーマと背景色のフィールドがあります。最後に、プロモーション フィールド、説明、この PWA が該当するカテゴリがあります。このマニフェストが PWA に関連付けられると、これらのフィールドによって PWA のインストール済みアプリの表示方法と管理方法が制御されます。
4. マニフェストを PWA に関連付ける
マニフェスト ファイルを作成したら、PWA に関連付けるために添付する必要があります。そのためには、index.html を開き、<head> の <title> タグのすぐ下に次のコードを追加します。
<link rel="manifest" href="/manifest.json" />
説明
マニフェスト リンクは、リンクされたウェブアプリ マニフェストが現在のウェブサイトを記述していることを、それをサポートするブラウザに伝えます。有効で利用可能であり、サービス ワーカーが動作し、ウェブアプリがブラウザ固有の追加のインストール条件を満たしている場合、アプリをユーザーのデバイスに直接インストールできます。
5. ショートカットを追加する
PWA をデバイスに深く統合されたように感じさせる優れた方法の 1 つは、アプリの特定の機能へのコンテキスト メニュー ショートカットを提供することです。PWA のナイトモードの切り替えでは、mode クエリ パラメータを night または day に設定することで、モードを選択できます。manifest.json で、次の 2 つのショートカットを設定します。
nightモードまたはdayモードで PWA を起動します。- アイコンに
150x150サイズの/images/logo.svgを使用します
6. 完了
これで、ウェブアプリ マニフェスト ファイルを作成し、ウェブページに添付して、インストール時にアプリ ショートカットを追加する方法を学習しました。
このシリーズの次の Codelab は、インストールを促して測定するです。