はじめに Google I/O 2017の動画を確認し、そろそろPWAについて真面目に把握していかなければと思い至り、GitHubからいくつかサンプルプログラムを探してきて触ってみたので基本的な技術情報と合わせてまとめました。なのでPWA初心者向けです。 特定のJSフレームワークを扱う専門のエンジニアでない限り（私自身がそうなので）、それぞれのJSフレームワークの対応状況なども気になるところだと思いますので、 React.js , Angular , Vue.js の3つにおけるPWAのサンプルについても調べました。 確認した手順などを含めて要点だけまとめていますが、詳細はそれぞれのGitHubページを参照しつつcloneして触ってみて頂ければと思います。 シンプル構成 まずはJSフレームワークなどが入っていないシンプルな構成で、PWAの仕組みについてざっくりまとめました。 PWA ret

はじめに 5/17（米国時間）〜3日間、Google I/O 2017が開催されました 今年も盛況だったようです いつものように 全てのセッションの動画 が公開されています 去年のセッションの中で話題になっていたAMP・PWAについて今年のセッション動画から動向を確認してみました AMP・PWAとは？（おさらい） AMP(Accelerated Mobile Pages) GoogleとTwitterが合同で開発 モバイルでページを高速表示する 必要な技術 AMP HTML…専用のhtml/CSS/JSコーディング AMP JS…専用のJSライブラリ Google AMP Cache…キャッシングのためのCDN 参考 Accelerated Mobile Pages Project（公式） Googleの AMPデモ AMP Start …AMP＋Material Designのコンポーネ