プログレッシブウェブアプリ (PWA) の開発方法

概要

Apple が iPhone App Store を立ち上げて以来、アプリは私たちの生活に欠かせないものになりましたが、実店舗でも同じことが言えます。現在、あらゆる業界が独自のアプリをリリースしていますが、次のようなシナリオを考えたことがある人はいませんか。潜在的な顧客がまだアプリをインストールしていない場合、またはインストールしたとしても、携帯電話のストレージ容量が不足しているためにアプリをアンインストールしてしまった場合です。アプリを軽量化し、インストールしやすくする技術的な解決策はありますか?答えは「はい」です。

プログレッシブウェブアプリケーションは、この目的のために作成されます。ウェブアプリケーションの機能と、以前はネイティブアプリケーションでのみ使用可能だった機能の両方を備えています。プログレッシブウェブアプリケーションは、ホーム画面上のアイコンから、またはプッシュ通知に基づいて起動されます。読み込み時間はほとんど無視でき、オンラインでの使用に加えて、オフラインでの使用のためにパッケージ化することもできます。

何よりも、プログレッシブウェブアプリは Web サイトの拡張機能に過ぎないため、モバイルフォンで簡単に作成できます。誰かが初めて Web サイトにアクセスすると、承認後に PWA 機能が携帯電話に自動的に作成されます。

次に、独自の PWA アプリケーションを作成する方法を見ていきます。

必要とする

このチュートリアルを開始するには、次のソフトウェアがインストールされている必要があります。

Node 8.9 以上 (https://nodejs.org/en/download/)。Yarn (https://yarnpkg.com) Git。

このチュートリアルの最初のプロジェクトとして、次の Github リポジトリをクローンできます。

git クローン https://github.com/petereijgermans11/progressive-web-app

次に、次のディレクトリに移動します

cd pwa-article/pwa-app-manifest-init

次のコマンドを使用して依存関係をインストールし、プロジェクトを開始します。

npm i && npm スタート

次のアドレスでアプリケーションを開きます: http://localhost:8080

アプリケーションのURL

ローカルホストにアクセスする方法はいくつかあります。リモートでアクセスするには、マシンのポート 8080 にアドレスを投稿します。この目的には、ngrok を使用できます。参照: https://ngrok.com/

次のコマンドを使用して ngrok をインストールします。

npm インストール -g ngrok

ターミナルで次のコマンドを実行します。このコマンドは、外部からアクセスできるURLを生成します。

ngrok http 8080 です

次に、モバイルデバイスの Chrome で生成された URL を参照します。

PWA にはどのような技術コンポーネントが必要ですか?

PWA には、次の 3 つの重要な技術コンポーネントが調和して動作します。

マニフェストファイル、Service Worker、https で実行中。

マニフェストファイル

マニフェストファイルは、アプリのアイコン、Web アプリケーション名、背景色など、PWA に関する基本情報が含まれる JSON 構成ファイルです。ブラウザがウェブサイトに PWA マニフェストファイルが存在することを検出すると、Chrome は自動的に「ホーム画面に追加」ボタンを表示します。ユーザーが「同意する」をタップすると、アイコンがホーム画面に追加され、PWA がインストールされます。

Manifest.jsonを作成する

PWA の Manifest.json ファイルは次のようになります。

JSON形式

{
  "name": "プログレッシブセルフィー",
  "short_name": "PWA セルフィー",
  「アイコン」: [
    {
      "src": "/src/images/icons/app-icon-192x192.png",
      "タイプ": "image/png",
      "サイズ": "192x192"
    },
    {
      "src": "/src/images/icons/app-icon-512x512.png",
      "タイプ": "image/png",
      "サイズ": "512x512"
    }
  ]、
  "start_url": "/index.html",
  「スコープ」:「。」,
  "ディスプレイ": "スタンドアロン",
  "背景色": "#fff",
  "テーマカラー": "#3f51b5"
}

アプリケーションのマニフェストをブラウザに伝える

index.html ファイルと同じレベルのディレクトリに Manifest.json ファイルを作成します。マニフェストファイルが作成されたら、マニフェストファイル参照リンクを index.html に追加します。

<link rel=”マニフェスト” href=”/manifest.json”>

マニフェスト属性

マニフェストには多くの構成プロパティがあります。次に、プロパティについて簡単に説明します。

name、short_name: Web アプリケーションの名前を指定します。short_name はアプリケーションの略語です。アプリケーションの name 属性を表示するスペースが足りない場合は、short_name が使用されます。
display: display 属性は、Web アプリケーションの表示モードを指定します。設定する値は、fullscreen、standalone、minimal-ui、browser の 4 つですが、よく使用される属性は fullscreen と standalone です。 fullscreen: 全画面表示、standalone: このモードで開いたアプリケーションにはブラウザのアドレスバーがないため、ネイティブアプリケーションのように見えます。minimal-ui、browser: ブラウザを使用してアクセスする場合とほとんど変わりません。
方向: Web アプリケーションの表示方向を制御し、携帯電話の画面の回転を禁止します。
icons、background_color: icon はアプリケーションアイコンを指定するために使用され、background_color はアプリケーションがロードされる前の背景色です。これら 2 つのプロパティを設定することで、アプリケーションのスプラッシュスクリーンに組み合わせることができます。
theme_color: アプリケーションのデフォルトのテーマカラーを定義します。
description: アプリケーションの説明を設定します。

上記は、pwa マニフェストファイルのプロパティの説明です。マニフェストファイルを設定し、index.html ファイルと同じレベルのディレクトリに配置することで、マニフェストファイルを追加できます。

Chrome デベロッパーツール – アプリケーション – マニフェストを開き、追加したマニフェストファイルが読み込まれているかどうかを確認します。以下のように情報がない場合、npm start でサーバーを再起動することで再読み込みできます。

Service Worker とは何ですか?

Service Worker (SW) は、ブラウザと Web サーバー間のプロキシとして機能する JavaScript です。 Service Worker は、オフラインキャッシュ、メッセージプッシュ、サイレント更新などのネイティブアプリケーションの一般的な機能をブラウザーベースの Web アプリケーションに実装し、より優れた、より豊かなユーザーエクスペリエンスを Web アプリケーションに提供できます。

さらに、この API ではキャッシュを使用してオフラインエクスペリエンスをサポートできるため、開発者はユーザーエクスペリエンスを完全に制御できます。

サービスワーカーのライフサイクル

Service Worker の場合、基本的なセットアップの手順は次のとおりです。

まず、SW を登録する必要があります。SW が登録されている場合、ブラウザはインストールイベントに基づいて自動的にインストールを開始します。
SW がインストールされると、アクティベーションイベントを受信します。このアクティベーションイベントは、以前のバージョンの SW で使用されたリソースをクリーンアップするために使用できます。

実際の操作では、まずindex.htmlと同じレベルにsw.jsという名前の空のファイルを作成する必要があります。次に、次のように index.html ファイルにベースタグを追加します。

<base href="/" rel="外部nofollow" >

最後に、SW を登録するために、src/js/app.js に次のコードを追加します。このコードは、ページの「読み込み」プロセス中にアクティブ化されます。

Chrome DevTools - アプリケーション - Service Worker を開いて、SW が有効になっているかどうかを確認できます。

window.addEventListener('load', () => {
    定数 base = document.querySelector('base');
    baseUrl = base && base.href || '' とします。
    ベースURLが'/'で終わる場合
        ベースUrl = `${baseUrl}/`;
    } 
   
    if ('serviceWorker' in ナビゲータ) {
        ナビゲーターのサービスワーカーを登録します(`${baseUrl}sw.js`)
            .then( 登録 => {
            // 登録は成功しました
            console.log('ServiceWorker の登録がスコープで成功しました: ', registration.scope);
        })
        .catch(エラー => {
            //登録に失敗しました:(
            console.log('ServiceWorker の登録に失敗しました: ', err);
        });
    }
});

上記のコードの主な目的は、ウィンドウオブジェクトの navigator プロパティで SW API が使用可能かどうかを確認することです。 window オブジェクトはブラウザウィンドウを表します。ナビゲータで SW が利用可能な場合は、ページが読み込まれたらすぐに SW を登録します。

SW の登録は簡単ですが、Service Worker の登録で問題が発生する場合があります。SW を登録できない理由とその解決方法を見てみましょう。

アプリケーションは HTTPS では実行できません。開発中は、 localhost経由で SW を使用できます。ただし、Web サイトに展開する場合は、HTTPS を有効にする必要があります。
SWへのパスが正しくありません。

リロード時の更新はチェックされません。

サービスワーカーイベント

インストールイベントとアクティブ化イベントに加えて、メッセージ、フェッチ、同期、プッシュイベントなどのイベントもあります。

ライフサイクルイベント (インストールとアクティブ化) をリッスンするには、次のコードを SW に追加します。

self.addEventListener('インストール', イベント => {
    console.log('[Service Worker] Service Workerをインストールしています...', event);
    イベントを待機するまで待機します。
});
self.addEventListener('activate', イベント => {
    console.log('[Service Worker] Service Worker をアクティブ化しています...', event);
    self.clients.claim() を返します。
});

インストールコールバックは skipWaiting() 関数を呼び出して activate イベントをトリガーし、ユーザーが別のページに移動したりページを再読み込みしたりするのを待たずに、すぐに作業を開始するように Service Worker に指示します。

skipWaiting() 関数は、待機中の Service Worker を強制的にアクティブな Service Worker にします。 self.skipWaiting() 関数を self.clients.claim() 関数と一緒に使用して、基盤となる Service Worker への更新がすぐに有効になるようにすることもできます。

この場合、self プロパティはウィンドウオブジェクト (つまり、ブラウザーウィンドウ) を表します。

ホームボタンに追加

「ホーム画面に追加ボタン」を使用すると、ユーザーはデバイスに PWA をインストールできます。このボタンを使用して PWA を実際にインストールするには、SW でフェッチイベントハンドラーを定義する必要があります。 sw.js でこれを修正しましょう。

self.addEventListener('fetch', イベント => {
    console.log('[Service Worker] 何かを取得しています....', event);
    // これは、開発者ツールを開いたときにChromeで発生する奇妙なバグを修正します
    event.request.cache === 'キャッシュされた場合のみ' && event.request.mode !== '同じオリジン' の場合 {
        戻る;
    }
    イベントを応答します。
});

サービスワーカーキャッシュ

Service Worker の強みは、HTTP リクエストをインターセプトする機能にあります。このステップでは、このオプションを使用して HTTP リクエストと応答をインターセプトし、キャッシュから直接ユーザーに超高速の応答を提供します。

Service Worker のインストール中に事前キャッシュする

ユーザーが初めて Web サイトにアクセスすると、SW が自動的にインストールを開始します。このインストールフェーズでは、PWA で使用されるすべてのページ、スクリプト、およびスタイルファイルをダウンロードしてキャッシュできます。これを行う sw.js ファイルコードは次のとおりです。

const CACHE_STATIC_NAME = 'static';
定数 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/images/main-image.jpg',
    'https://fonts.googleapis.com/css?family=Roboto:400,700',
    'https://fonts.googleapis.com/icon?family=Material+Icons',
];
self.addEventListener('インストール', イベント => {
    console.log('[Service Worker] Service Workerをインストールしています...', event);
    イベント.waitUntil()
        キャッシュを開く(CACHE_STATIC_NAME)
            .then(キャッシュ => {
                console.log('[Service Worker] App Shell を事前キャッシュしています');
                キャッシュにURLをすべて追加します。
            })
            .then(() => {
                console.log('[ServiceWorker] インストールの待機をスキップ');
                self.skipWaiting() を返します。
            })
    );
});

このコードはインストールイベントを使用し、インストールフェーズ中に URLS_TO_PRECACHE の配列を追加します。 caches.open 関数を呼び出したら、cache.addAll() 関数を使用して配列内のファイルをキャッシュできます。インストールにかかる時間とインストールが成功したかどうかを知るには、event.waitUntil() メソッドで JavaScript Promise を使用します。

インストールイベントは self.skipWaiting() を呼び出して、SW を直接アクティブ化します。すべてのファイルが正常にキャッシュされると、SW がインストールされます。ただし、いずれかのファイルのダウンロードに失敗すると、インストール手順は失敗します。 Chrome デベロッパーツールでは、キャッシュ (キャッシュストレージ内) が URLS_TO_PRECACHE 配列内の静的ファイルで埋められているかどうかを確認できます。

ただし、[ネットワーク] タブを見ると、ファイルは引き続きネットワーク経由で取得されています。その理由は、キャッシュは準備ができているにもかかわらず、参照されたリソースをキャッシュから読み取っていないためです。したがって、この作業部分を完了するには、まずアプリケーションのフェッチイベントをリッスンし、次にキャッシュからリソースをインターセプトして取得する必要があります。次のコードを見てみましょう。

self.addEventListener('fetch', イベント => {
    console.log('[Service Worker] 何かを取得しています....', event);
    イベント.respondWith()
        キャッシュ.match(イベント.リクエスト)
            .then(応答 => {
                if (応答) {
                    console.log(応答);
                    応答を返します。
                }
                fetch(event.request) を返します。
            })
    );
});

caches.match() 関数を使用して、受信 URL が現在のキャッシュ内にある可能性のあるリソースと一致するかどうかを確認します。一致する場合はキャッシュされたリソースを返しますが、リソースがキャッシュ内に存在しない場合は、通常どおり要求されたリソースの取得を続行します。

Service Worker がインストールされアクティブ化されたら、ページを更新して [ネットワーク] タブを再度確認します。これで、Service Worker は、サーバーにネットワークリクエストを送信する代わりに、HTTP リクエストをインターセプトし、対応するリソースをキャッシュからオンザフライでロードするようになります。

ここで、[ネットワーク] タブでオフラインモードを設定しても、アプリは正常に動作します。

バックグラウンド転送

バックグラウンドフェッチ API は、SW のバックグラウンド機能であり、ユーザーはこれを使用して、大きなファイル、ビデオ、音楽、その他のリソースをバックグラウンドでダウンロードできます。取得/転送プロセス中、ユーザーは転送タスクをクリアせずにタブを閉じたり、ブラウザ全体を閉じたりすることができます。ユーザーがブラウザを再度開くと、転送プロセスが再開されます。この API は転送の進行状況をユーザーに表示することもでき、ユーザーはプロセスをキャンセルまたは一時停止できます。

デフォルトではバックグラウンド転送は利用できません。URL (chrome://flags/#enable-experimental-web-platform-features) から Chrome の「試験運用版ウェブプラットフォーム機能」オプションを有効にする必要があります。

以下は、このようなバックグラウンド転送を実装する方法の例です。

index.htmlファイルにID「bgFetchButton」のボタンを追加します。

<button id="bgFetchButton">アセットをローカルに保存する</button>

次に、app.jsのロードイベントハンドラに、バックグラウンド転送を実行するコードを追加します。

window.addEventListener('load', () => {
...
       bgFetchButton = document.querySelector('#bgFetchButton');
       bgFetchButton.addEventListener('click', 非同期イベント => {
         試す {
            const 登録 = navigator.serviceWorker.ready を待機します。
            registration.backgroundFetch.fetch('my-fetch', [新しいリクエスト(`${baseUrl}src/images/main-image-lg.jpg`)]);
         } キャッチ (エラー) {
            コンソールエラー(err);
         }
     });
...
});

上記のコードは、次の条件下でバックグラウンド転送を開始します。

ユーザーはIDがbgFetchButtonのボタンをクリックする
SWが登録されました

転送プロセスはユーザーインターフェイスをブロックできないため、バックグラウンド転送は非同期関数で実行する必要があります。

転送が完了するとキャッシュに保存されます

self.addEventListener('backgroundfetchsuccess', イベント => {
  console.log('[Service Worker]: バックグラウンドフェッチ成功', event.registration); event.waitUntil(
   (非同期関数() {
     試す {
     // レコードを反復処理してキャッシュにデータを追加します
       const cache = await caches.open(event.registration.id); const records = await event.registration.matchAll(); const promises = records.map(async record => {
         const 応答 = record.responseReady を待機します。
         cache.put(record.request, response) を待機します。
       });
       Promise.all(promises) を待機します。
     } キャッチ (エラー) {
       console.log('[Service Worker]: キャッシュエラー');
     }
   })()
  );
});

このコードは次の手順で構成されています。