入門Webアプリケーション入門-パート1

多くのフロントエンド開発者は進歩的なWebアプリケーションについて聞いています.私たちのほとんどは、PWAは、いくつかのデバイス上で動作するWebアプリケーションを開発することを意味し、典型的にネイティブアプリのために予約機能を活用しています.しかし、それは何ですか?フレームワーク、新しいAPI、または何か他の?本稿では、この質問に答えて、PWAがフロントエンド開発者とアプリケーションのエンドユーザーに提供するものをチェックします.

PWAとは

PWAの多くの定義があります、しかし、それらの1つは言います:

“A PWA is not an API or a technology, but it is a web development approach that uses a combination of tools and technologies already available to create targeted, ideal user experiences.” ^[1]

我々が見ることができるように、我々はPWAを利用可能な技術のコンテキストで“ターゲット、理想的なユーザーエクスペリエンス”を作成するアプローチとして扱うことができます.
この原則についてもっと深く行きたいとき、別の定義を見つけることができます.

“Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.” ^[2]

上記の効果を達成するために、3つのPWA柱を区別することができる.

有能

今日、ウェブ技術は非常に有能です.我々はWebrtc、地理位置情報、およびプッシュ通知のような多くの新機能があります.これらは、例えば、私たちのモバイルデバイス上で通知を受信し、ユーザーの場所を識別するビデオチャットアプリケーションを構築するために使用することができます.WebGLとWebVRを使用すると、高品質のグラフィックスコンテンツを作成することができます.新しいAPIとテクノロジーの数は、我々がこれまでより多くの有能なアプリをつくるのを許します.

信頼できる

信頼性の高いプログレッシブWebアプリケーションは、高速動作し、“いいえインターネット”メッセージを表示することはありません.それは、PWAがネットワークアクセスなしでさえ働き続けなければならないことを意味します.ネットワーク接続が利用できないとき、コンテンツを提供するために資産とネットワーク応答をキャッシュするように、これを成し遂げるための若干のテクニックがあります.この記事の後半でこれらのアプローチを詳しく説明します.

インストール可能

Webアプリケーションマニフェスト(マニフェスト. JSON)を使用して、サービスワーカーを登録、我々はモバイルデバイスまたはスタンドアロンのデスクトップアプリケーションとしてアプリケーションをインストールすることができます.

累進的強化

PWAのコンテキストではまた、進歩的な強化のような用語を聞くことができます.
何ですか.最も簡単な用語では、常に最も現代的なブラウザのユーザーにより良いユーザーエクスペリエンスを提供する新しい機能を持つソフトウェアを更新する方法論です.コア機能は、新しい機能をサポートしていないブラウザを持つユーザーに提供する必要があります.
それはあなたのアプリケーションは、進歩的な方法でいくつかの新機能を導入することによってより多くの人々によって使用することができることを意味します.最新技術(最新のブラウザを備えた新しいスマートフォン)を備えていないユーザーのために、Webアプリケーションはまだ動作するはずです.しかし、より高度なユーザーのための最高のネイティブのような経験を提供することができます.
どのように進歩的な方法で我々のアプリケーションを準備することができますし、今日利用可能な技術を確認してみましょう.

どのように、我々はPWAユーザー経験を成し遂げることができますか？

新しい機能の完全なアプリケーションを作成することができます多くの新しいWeb技術がありますが、この記事では、一度、インストール可能な、信頼性の高い、能力のあるアプリを作成するために必要な主に焦点を当てます.

応答性Webデザイン

モバイルデバイスのためにWebアプリケーションを作る方法の1つは、敏感なウェブ設計です.それは非常に大きなトピックであり、詳細については、このテクニックについてのいくつかの基本的な情報を確認しましょう別の記事で説明することができます.

“Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.” ^[3]

あなたが見ることができるように、それはPWAをつくることの我々の必要条件に合います.今日CSSは、柔軟なグリッドとレイアウト、イメージとCSSメディア質問の使用の混合のような素晴らしい特徴を提供します.
そばmedia queries 我々は、無効にするか、UIの一部を再配置を有効にするには、画面サイズのブレークポイントを定義することができます.
Flexbox or css grid 画面サイズの場合にレイアウト応答を行うことができます.

Webアプリケーションマニフェスト

これは、デバイスにWebアプリケーションをインストールするために必要なものの一つです.Webアプリケーションマニフェストは、Webアプリケーションについてブラウザに指示し、ユーザーのモバイルデバイスまたはデスクトップ上にインストールされたときにどのように動作するかを示します.
ハウツーとスタイル非常に簡単.マニフェストを作成する必要があります.JSONファイルとリンクファイル.インデックスのJSON.HTML .
基本マニフェスト.JSONファイルは次のようになります.

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

そして、マニフェストをリンクする必要があります.インデックスのJSON.HTMLによる<link rel="manifest" href="manifest.json" />すべての利用可能なパラメータはよく説明されますhere .
マニフェスト.JSONは1つだけではなく、我々のアプリケーションをインストールできるようにする必要があります.インストールプロセスはブラウザで処理されます.すべてのブラウザは、デバイス上のアプリケーションをインストールするために満たす必要がある同様の基準を持っています.ここでChromeブラウザで会う必要のある基準のリストがあります.

Webアプリケーションは既にインストールされていません

ユーザーの婚約発見ヒューリスティック

HTTPS以上提供される

含まれているWebアプリケーションマニフェストが含まれます.

ショートネームまたは名前

アイコン- 192 pxと512 pxアイコンを含める必要があります

StartRange URL

ディスプレイ-フルスクリーン、スタンドアロン、または最小のUIのいずれかでなければなりません

注意: Applied RelatedRadiumアプリケーションは存在しないでください.

サービスワーカーを関数フェッチハンドラに登録する

これらのすべての基準が満たされたら、デスクトップ上で同様の画面が表示されます.

またはモバイルデバイス

あなたはそれが“ユーザーの婚約発見ヒューリスティック”を意味する意味を疑問に思うことができます.実際には、一定の時間のためのウェブサイトを使用する必要があることを意味し、インストールプロンプトが表示されます.通常、それは数秒かかります.

労働者

基準の一つは、サービスハンドラをフェッチハンドラに登録する必要があるということです.今のところ、我々が知っている必要があるすべては、サービスワーカーがウェブアプリケーション、ブラウザーとネットワークの間に座るプロキシのようなものであるということです、そして、それはリクエストキャッシュを処理して、オフラインで働くのに用いられることができます.記事の次の部分でこの技術についてもっと説明します.
私たちは、サービスワーカーの内容とそれから我々のインデックスでJSファイルを作成する必要があります.HTMLはサービスワーカーを登録します.どうやってチェックしましょう.
swjs

self.addEventListener('fetch', (event) => {
  console.log('fetch');
});

インデックス.HTML

<html>
<head>
    <script>
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.register('./sw.js')
          .then((reg) => {
              console.log('Registration succeeded');
          }).catch((error) => {
              console.log('Registration failed with ' + error);
          });
        }
    </script>
</head>
<body>
</body>
</html>

ご覧のように、我々はSWにパスを持つパラメータを渡すことによって、サービス関数をレジスタ関数で登録します.jsファイル.サービスワーカーでは、今のところフェッチイベントを聞いているだけです.これは、我々の基本的な方法で我々のアプリをインストールできるようにする必要があります.
次のパートでは、進行中のWebアプリケーションのコンテキストでサービスワーカーについてもっと説明します.我々は、キャッシュキャッシングの技術、サーバーの応答と背景の同期の技術を検討します.

第2部

[ 1 ][ 1 ]https://developers.google.com/ ( https://developers.google.com/ )
〔2〕https://web.dev/what-are-pwas/
[ 3 ]https://en.wikipedia.org/wiki/Responsive_web_design