Skip to content

Instantly share code, notes, and snippets.

@ginpei ginpei/pwa.md Secret
Last active May 30, 2019

Embed
What would you like to do?

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
You can’t perform that action at this time.