プログレッシブウェブアプリを学ぶにあたっての学習メモです。
PWA (progressive web apps)とは
- google製。直訳で「先進的なwebアプリケーション」
- webの技術を用いて開発可能。
- webアプリ(SPA等)とネイティブアプリのイイトコドリな形で構築可能。
- ブラウザとアプリの中間
- アプリのような挙動をするWebページ
★Service Worker を活用すれば、オフラインやネットワーク環境が悪い時でも動作可能でプッシュ通知を送る事なども出来る。
App Shell モデルとは
- PWAを構築する１つの方法論。
- webアプリのUIが機能するために必要な最小限の HTML、CSS、JavaScript のセットの事。
- データや値は持っていない、骨組みのようなイメージ。
- この最低限のソースをオフラインで使用できるようにキャッシュさせ(Service Worker)れば、より高速なパフォーマンスが可能になる。
- ユーザーインターフェースが機能する最低限のhtml、css、jsをキャッシュしておき、ページにアクセスするときに必要なコンテンツだけを読み込む
ついでに
- Accelerated Mobile Pages
- はやい、はやいぞ！
- 新聞など静的なものを出すのに向いています
参考資料
PWAの勉強をするにあたり、勉強になるリンク集
- はじめてのプログレッシブ ウェブアプリ
- プログレッシブウェブアプリについて~デモアプリで効果を検証~
- App Shell モデルの素振り（前編）webpack と Workbox を利用した構築
- Web App Manifest
- Service Workers