Progressive Web Apps、または略してPWAについて聞いたことがあると思います。 これが何であり、どのように機能するかについては詳しく説明しません。 私たちの目的には、PWAの簡単な定義が適しています-電話のメイン画面に追加できるサイトであり、オフラインで動作します。
私はHTML、CSS、JavaScriptに精通しており、GitHubを使用できます。 しかし、私はまだWeb開発を始めたばかりであり、この現象またはその現象の原則を深く掘り下げたいとは限りません。 ほとんどの場合、たくさんの記事を見ずに正しいことをするための理解可能な方法が必要です。 したがって、この投稿で独自のPWAを作成するために必要なすべてのものが提供されることを願っています。
したがって、PWAを作成するには、サイトが必要です。 ここでは、すべての画面とデバイスで高度にスケーラブルなサイトを作成できると想定しています。 幸いなことに、方法がわからない場合は、テンプレートを使用できます。 HTML5 UPやStart Bootstrapのものが好きです。 テーマを選択してダウンロードし、index.htmlのすべてのコンテンツを自分のコンテンツに置き換えます。 CSSに適合する勇気がある場合は、色を変更することもできます。
私のプロジェクトでは、 Web Community Leads UKとIEを上陸させました。 ほとんどのユーザーはPWA形式でそれを必要とせず、誰もそれを自分に追加することを期待していません。 小さくてシンプルなサイトの例が必要でした。
私はHacksmithsが好きで、それはオープンソースだったので 、ダウンロードして中傷しました。 また、フォークできるように、コードとコードへのリンクを保存しました。
Webサイトを作成したら、PWAに変換できます。 これに必要なものは、私がさらに伝えます。
PWAをテストする
サイトがPWAのように機能するかどうかを確認するには、 Lighthouseを使用します。 LighthouseはChromeの拡張機能であり、PWAの優れた点と改善できるかどうかを示します。
インストール後、サイトを開き、ブラウザの右上隅にあるビーコンアイコンをクリックして、「レポートを生成」をクリックします。 数秒で、サイトに関する情報を含む新しいタブが開きます。サイト全体を読むか、上記の数値に注目して残りを無視することができます。
作業を開始する前にLighthouse 36/100の結果が表示されます-サイトでまだ何も行っていないことを考えると、それほど悪くはありません
アプリのアイコンを作成
サイトは画面上に配置されるため、アイコンが必要です。 良いロゴを作るためにデザイナーである必要はありません。 ほとんどの小さなプロジェクトでは、名詞プロジェクトに行き、好きなアイコンをいくつか探します。 次に、GIMPを使用してそれらを結合し、背景を追加します。 もちろん、他の方法を使用することもできます。最も重要なことは、アイコンが正方形であることを確認することです。
私のアイコン。 後知恵私は角を曲がる必要があることを理解しています
これで、アプリケーションアイコンができました。 それをサイトに添付します。 私はこれをオンラインアイコンジェネレーターで行いました 。 彼にアイコンを与えると、彼はHTMLコードで味付けされたさまざまなサイズのバージョンを吐き出します。 次：
-ジェネレーターが提供するファイルをダウンロードし、解凍します。
-サイトの他の部分と一緒にフォルダにアイコンを配置します。
-ジェネレーターによって発行されたコードをindex.htmlファイルに追加します。
-アイコンへのパスが機能することを確認してください。 それらをすべてサブフォルダーに入れたので、各行に「アイコン/」を追加する必要がありました。
スペルマニフェスト
次に行うことは、マニフェストを作成することです。 マニフェストは、サイトに関する情報（名前、色のテーマ、アイコンに関する情報）を含むファイルです。 アイコンジェネレーターによって作成されたマニフェストは既にありますが、それを拡張します。
マニフェストジェネレーターに移動し、サイトに関する情報を入力します。 不明な点がある場合は、デフォルト値のままにします。
ページの右側にJSONデータがあります。 それらをコピーして、manifest.jsonファイルの上に貼り付けて、フォーマットが壊れないようにしてください。コンマを追加するか、ブラケットをどこかで削除する必要がある場合があります。 私のマニフェストは最終的にこのようになります 。 Lighthouseを再度起動し、マニフェストが機能するかどうかを確認します。
マニフェストとアイコンを追加した後の灯台データ
サービスワーカーを追加
サービスワーカーは、プロジェクトに追加する別のファイルであり、サイトをオフラインで動作させることができます。 サービスワーカーがいることもPWAの要件であるため、間違いなく必要です。
Service Workerはかなり複雑です。 幸いなことに、sw-toolboxを試すことをお勧めし、コードへのリンクを提供しました。 コードをコピーし、追加のJavaScriptファイルの1つを削除して、すべてをサービスワーカーに書き込むことで、コードを少し単純化しました。
Service Workerを作成するには、3つのステップがあります。
-次のコードをindex.htmlに追加して、Service Workerを登録します。
<script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then( function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script>
-sw-toolboxをプロジェクトに追加します- このファイルをルートフォルダーにドロップするだけです。
-新しいファイルを作成し、「sw.js」という名前を付けて、これに貼り付けます。
'use strict'; importScripts('sw-toolbox.js'); toolbox.precache([“index.html”,”style/style.css”]); toolbox.router.get('/images/*', toolbox.cacheFirst); toolbox.router.get('/*', toolbox.networkFirst, { networkTimeoutSeconds: 5});
すべてのファイルパスが正しいことを確認し、ソースドキュメントを編集して、オフラインにしたいすべてのファイルをリストします。 私は自分のサイトにindex.htmlとstyle.cssのみを使用していますが、他にもあるかもしれません。
次に、Lighthouseでサイトを再度テストします。
サービスワーカーを追加した後-ローカルホストでテスト
特定のページを保存するだけでなく、サービスワーカーに何かをさせたい場合、たとえば、インターネットにアクセスできないときに特定のオフラインページを表示するには、 pwabuilderを試してください。
GitHubの投稿
PWAを入手したら、今度はPWAを世界と共有します。 無料で安全にこれを行う最も簡単な方法を見つけました-GitHub Pagesを使用します。 GitHub GUIは、コードをGithubに配置し、リポジトリを作成し、そこにコードを配置するのに役立ちます。 その後、サイトでリポジトリを見つけ、設定に移動し、マスターブランチを選択してGitHubページを下にスクロールして有効にします。 PWAのライブURLを提供する必要があります。
Lighthouseの結果が改善され、サイトを友人と共有したり、電話画面にアップロードしたりできるようになりました。
GitHubページにサイトを配置した後の灯台の結果
→ コード
→ 準備完了サイト
このサイトは最初とまったく同じように見えますが、Samsung Internetで表示すると、アドレスバーがテーマの薄紫色に変わりました。 プラスアイコンが表示されます。これにより、サイトをメイン画面に追加し、全画面で開いてオフラインで使用できます。
この記事では、PWAについてすべてを説明しませんでした。たとえば、新しいコンテンツがリリースされたときにプッシュ通知を送信できます。 PWAの詳細については、 こちらをご覧ください。