はじめに
本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。
PWA について
PWAとは
PWAとは、「Progressive Web Apps」の略で、Webアプリをネイティブアプリのように使用するための技術です。
以下のような特徴があります。
- Push通知可能
- インストール不要
- アイコンのホーム画面への追加
- プリキャッシュ機能による表示速度の高速化
- データキャッシュによるオフライン動作が可能
- ネイティブアプリのようなUI（アドレスバー等を非表示）
等
PWA開発に使用する言語
主な言語は、JavaScriptです。
React、Vue、Angularといったライブラリやフレームワークで作成されることが多いです。
PWAのメリット
1. 開発が容易
最も少ない場合で１つのファイルを追加するだけで開発をすることができる。
また、PWAはウェブサイトの技術を基本にしたクロスプラットフォームであるため、一度開発をしてしまえば他のデバイスのために開発する必要がありません。
2. アプリ審査が不要
ネイティブアプリではないためアプリ審査が不要で、Webアプリと同じようにスムーズに公開することができます。
3. ユーザーとの接触機会増加が期待できる
ユーザーがアプリケーションをアプリストアを経由してインストールをする必要はなく、容易に利用することができます。
また、プッシュ通知も可能であるため、接触頻度が増えることが期待できます。
4. 読み込みが速い
プリキャッシュ機能により、通常のWebアプリよりも初期表示を早くすることができます。
読み込みが速いことで、ユーザーが利用しやすいだけでなく、SEO対策にも効果的です。
PWAのデメリット
1. ハードウェアベースの機能を使用することはできない
ネイティブアプリと違い、PWAはハードウェアベースの機能（ジャイロセンサー等）を使用することはできません。
2. SSL化が必要
PWAは、httpsを前提にした技術であるため、HTTPで構築されているWebアプリであれば、httpsにする必要があります。
導入事例
上記のサイトをsafariで開き、「ホーム画面に追加」をするだけです。
以下の画像はTwitterPWAの画面です。
アドレスバーが表示されていません。
