Skip to content

Instantly share code, notes, and snippets.

@ginpei

ginpei/pwa.md Secret

Last active May 30, 2019 23:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ginpei/3d2374d57bf8def4ea640d39bc90576d to your computer and use it in GitHub Desktop.

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

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

普通の 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 の理解
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment