Help us understand the problem. What is going on with this article?

PWAとは何かまとめる

概要

PWAを実装する上で必要となる基礎的な知識についてまとめました。
PWAについては他のブログや記事にもたくさんまとまっていると思うので、分かりづらい等あればそちらを見るのが良いかと思います。
また、何か間違っている等あればご指摘いただければと思います。

PWAとは

Progressive Web Appsの略で、ネイティブアプリのように提供可能なWebアプリのこと。
Googleのデベロッパーページには以下の3つの特徴があると書かれています。

  • Reliable
  • Fast
  • Engaging

Reliable

ネットワークの状態に依存しないようにすることでユーザに信頼できるexperienceを届けます。
例えばService Worker(JavaScriptで書かれたバックグラウンドで動作するproxyのようなもの)という機能がキャッシュの保持を行うことで、オフライン環境でもコンテンツを取得することが可能になります。

Fast

一度読み込んだものは高速に表示し、スムーズな描画とスクロールを可能にします。

Engaging

ネイティブアプリのように使用でき、没入感のあるexperienceを届けます。
具体的にはアプリストアを使わずにホームスクリーンにインストールして使用することができたり、Push通知を受信することができます。

まとめると

PWAは

  • ネットワーク状態に依存せず
  • 高速に表示でき
  • ネイティブアプリのように使用できる

Webアプリのことです。
ただ上記のような特徴を持つといっても具体的にどういった機能やUXを提供できていればいいか、その要素はたくさんあります。
GoogleのデベロッパーページにPWAチェックリストがまとめられているので、困ったらここを見てみるのが良いかと思います。

PWAを構成する技術

PWAを構成する重要な技術として主に以下の2つがあると思っています。

  • Service Worker
  • Web App Manifest

Service Worker

先程も出てきましたが、Service Workerとはブラウザのバックグラウンドで動作するJavaScriptのProxyです。
このProxyが本当に色々な機能を提供してくれています。

Service Workerが担う役割

代表的なものとして以下の3つがあります。

  • キャッシュ
  • プッシュ通知
  • バックグラウンド同期

キャッシュ

その名の通り静的ファイルやAPIレスポンスの結果などをキャッシュすることができます。
これによりオフラインでの利用や、表示の高速化を可能にします。

プッシュ通知(Web Push)

こちらもその名の通りPCやスマートフォン上でWebアプリに対して通知を行うことができます。
細分化するとWeb PushはPush APINotifications APIによって実現されます。
Push APIはWebアプリがサーバから通知を受信するためのAPIで、Notifications APIは受信した通知をページ外部の画面に表示するAPIです。
ただし2019/09現在、Push APIやNotifications APIは利用できるブラウザが限られています。
詳しくは以下を参照してください。

参考

バックグラウンド同期

Service Workerがバックグラウンドでキャッシュを更新したり、オフライン時に送れなかったリクエストをオンラインになったタイミングでリクエストしたりすることができます。
これによってリクエストによる待ち時間を減らし、UXを損なわずにアプリを提供できます。
ただし2019/09現在、こちらも対応ブラウザは限られています。

参考

Service Workerを使うための前提条件

Service Workerを利用するためには以下の2つの条件を満たす必要があります。

  • サポートしているブラウザを使うこと
  • HTTPSを使うこと
    • ただしlocalhostであればHTTPでも利用できる

また、サポートしているブラウザかどうかは以下を参照すると分かります。
https://caniuse.com/#feat=serviceworkers

Web App Manifest

これはWebアプリをPWAとしてPCやスマートフォンにインストール可能にするためのJSONファイルです。
通常manifest.jsonという名前で配置し、ブラウザから読み込ませます。
このManifestファイルには

  • アプリ名
  • ホームスクリーンのアイコン
  • 起動時に読み込むページ
  • 背景色
  • 表示モード

などを設定します。

参考

まとめ

PWAとそれを構成する技術について紹介しました。
これを踏まえてVue.jsでPWAを実装するフェーズを「Vue.jsをPWA化してService WorkerにRuntime Cacheを実装、そして公開するまで - Qiita」で紹介していますので、良かったらご覧ください。

その他参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした