pwa.md

PWA で 4 界を制覇するハンズオン

ウェブアプリなのにスマホとかにインストールしても使える PWA のハンズオンです。

• 例: PWA Note

普通の HTML, CSS, JS で構成されたウェブアプリにもうひと手間ふた手間かけて、まるでネイティブアプリのような使い勝手を持つものが Progressive Web App です。最近はデスクトップでもインストールできるようになったので、PWA は iOS、Android、macOS、Windows といった全ての主要環境で動くようになります。

また PWA で利用する技術は、インストール部分以外は標準ウェブ API であり汎用的な知識です。通常のウェブアプリへ導入することで、例えば高速化やオフライン動作を可能にします。

対象者

• ウェブアプリ開発者
• PWA に興味のあるひと

やること

• ウェブアプリをインストールできるようにする (Web App Manifest)
• DevTools で PWA を管理、調査する
• オフラインで動くようにする (Service Worker, Cache API)
• ローカルに情報を持つ (IndexedDB 他)
• 関連 API の紹介
• GitHub Pages で公開

やらないこと

• JavaScript 入門
• サーバーやサーバーレス云々
• 見た目をネイティブアプリに近づける方法やライブラリーの紹介

必要なもの

• Google Chrome
• ウェブアプリ開発環境、NPM
• ウェブ全般、特に JavaScript に関する知識
• HTTP/HTTPS の理解（表面的な程度で十分）
• GitHub アカウント、GitHub Pages の理解