前置き
PWA(Progressive Web Apps)という単語が周辺で囁かれ始めたので、世の中の流れに乗り遅れるわけにいかぬとPWAのサイトのサンプルを作ってみる事に。
PWAとはなんぞや
Webディレクターが知らないとマズい！Googleの注目プロジェクトPWAって何？
囁き例
・いまさら聞けないPWAとAMP
・やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性
どうやらPWAとは、Webアプリのソースをローカルに保持しておいて、オフラインでも動作するのでネイティブアプリっぽく振る舞うっぽい。(ざっくり)
確かにSPA(Single Page Application)とかをWebビューアプリで動かしたら普通にアプリっぽいものになりそうだし、そのデータをローカルに持っておけば普通にアプリっぽいな。(超ざっくり)
オチ
Web Starter KitはPWAの雛形なだけで、これを動かしただけでは全然目的のものになってなかった。
ターゲット
PWAにチャレンジした事ない人。
Web Starter Kitのビルドに手こずる人。
たすくらんなー？何それおいしいの？な人。
Web Starter Kitにトライ
上の参考サイトに、下記記述があったのでWeb Starter Kitなるものを動かしてみる事に。
Googleが提供するWeb Starter Kit を使えば、PWAに必要なファイルやテンプレートの雛形を用意してくれ、PWAにおおむね沿った簡易的なページはすぐに作れる。大規模なサイトをPWAにするのはそれなりに時間がかかる。
Web Starter Kit
ここを見ながら進めていきます。
Web Starter Kit はウェブ開発用の独自のボイラプレートです。このツールにより、パフォーマンスを優先して、多くの端末に対応した快適なエクスペリエンスを実現することができます。Google の Web Fundamentals に記載されているベスト プラクティスを順守して、生産性を維持する上でも役に立ちます。この業界のプロの方も初心者の方も、まずはご利用ください。
との事です。ちょっと何言ってるか分からないとこあるけどまずは利用させていただきます。
ソースをゲット
WEB STARTER KIT(ベータ版)のダウンロードとあるので、zipをダウンロード。
もしくはgithubからclone。
[github]google/web-starter-kit
$ git clone https://github.com/google/web-starter-kit.git
いろいろ入ってますが、下記htmlがメインのようです。
index.html - マテリアル デザイン レイアウトが含まれるデフォルトのベース。
basic.html - レイアウトはありませんが、モバイル向けの最小限のベスト プラクティスが含まれます。
ローカルでindex.htmlを開くとマテリアル感溢れるWebページ。
basic.htmlは何も表示されない…レイアウトはありませんってこういう事なのか？
ドキュメントによると
インストール ドキュメントに目を通して、自身の環境で WSK を実行する準備が整っていることを確認します。システムで WSK を実行できることを確認したら、サイトの構築に使用できるコマンドを確認してください。
とりあえずサーバ上で実行する形式にするための手順が書いてあるっぽい。
たぶんcloneしてきたものだけでも動くけど、余計なものがいっぱいあるからコマンド実行する事でスッキリなるんだろうなと推測。
上記インストールドキュメントによると、npmでgulpをグローバルインストールしてpackage.jsonに記載されたパッケージをインストールすれば準備完了との事。
改めてnpmとかpackage.jsonとか復習
npmとpackage.json
そもそもgulpがよく分からなかった件
タスクランナーというやつで、要するにビルド手順を書いておけば手順に従って実行してくれるやつらしい。
タスクランナーgulp.js最速入門
どうやらgulpfileというやつにタスクが書いてあるっぽい。
gulpをグローバルインストールしてバージョンを確認するとなんだか失敗してる…？
$ gulp -v
[13:47:49] Failed to load external module babel-register
[13:47:49] Failed to load external module babel-core/register
[13:47:49] Failed to load external module babel/register
[13:47:49] CLI version 3.9.1
(後日気づいたが、元々gulpがグローバルインストールされていた環境みたいでその影響か…？)
npm installしたら正常になった模様。
$ gulp -v
[13:53:34] Requiring external module babel-register
[13:53:34] CLI version 3.9.1
[13:53:34] Local version 3.9.1
コマンドとやらを確認すると
・gulp serve
・gulp
・gulp serve:dist
この3つがどうやら動かすために必要なコマンドで、それぞれパターンがあるらしい。
・gulp pagespeed
これはパフォーマンスを確認するためのやつっぽい。
wskのgulpfileはおそらくgulpfile.babel.jsっぽいので確認してみると
serve、default(gulpに何も指定しないとdefaultのタスクが実行される模様)、serve:distそれぞれ記述があるが、何のこっちゃさっぱり。
雰囲気から察するに、serveとserve:distはportの指定があるので、おそらくその環境でwebサーバとして実行されるのではないかと。(serveってそういう事なのか？)
そしてdistは、angular2のときにTypeScriptがトランスパイルされたものが吐き出されていたので、おそらく別環境にアップする用に必要なビルドを終えたものが吐き出されるのではないかと。(distはdistributionの略っぽくて配布物という意味らしい)
そしてdefaultはポート指定が無いので、distに配布用のブツを吐き出すだけのタスクなのではないかと推測。
いざ実行
とりあえずdefaultのタスクを実行
$ gulp
[14:38:43] Requiring external module babel-register
[14:38:44] Using gulpfile ~/wsk/gulpfile.babel.js
[14:38:44] Starting 'clean'...
[14:38:44] Finished 'clean' after 4.91 ms
[14:38:44] Starting 'default'...
[14:38:44] Starting 'styles'...
[14:38:45] styles all files 3.81 kB
[14:38:45] Finished 'styles' after 977 ms
[14:38:45] Starting 'lint'...
[14:38:45] Starting 'html'...
[14:38:45] Starting 'scripts'...
[14:38:45] Starting 'images'...
[14:38:46] Starting 'copy'...
[14:38:46] html basic.html 1.36 kB
[14:38:46] Finished 'lint' after 1.08 s
[14:38:46] html index.html 14.94 kB
[14:38:46] html all files 16.3 kB
[14:38:46] scripts all files 1.32 kB
[14:38:46] Finished 'html' after 978 ms
[14:38:46] Finished 'scripts' after 800 ms
[14:38:46] copy all files 45.8 kB
[14:38:46] Finished 'copy' after 534 ms
[14:38:46] images all files 7.39 kB
[14:38:46] Finished 'images' after 944 ms
[14:38:46] Starting 'copy-sw-scripts'...
[14:38:46] Finished 'copy-sw-scripts' after 5.13 ms
[14:38:46] Starting 'generate-service-worker'...
Total precache size is about 46.89 kB for 12 resources.
[14:38:46] Finished 'generate-service-worker' after 11 ms
[14:38:46] Finished 'default' after 2.36 s
distフォルダが出来て、その中にもろもろファイルが入ってる。
というか中身はappフォルダと一緒じゃないか…？と思ってdiffをしてみたら一応差分はあるので何かしら処理がされたのかな？
サイトを見てみると
という事で、distの中身をAWS S3にアップしてスマホから確認してみる事に。
※手頃なホスティング環境がS3だっただけで、S3にした深い意味は無い
なんの変哲もないマテリアル感溢れるWebページ(ドーン
…全然PWA感が無い…？
…はっ！Σ(･ω･ﾉ)ﾉ
そういえばWeb Starter KitはPWAのテンプレートなだけで、このままではまだ真のPWA(？)ではないに違いないと気づく。
真のPWAに足りないもの
Progressive Web Appを作ってみる
どうやら上記サイトを参考にする限りだと、下記が足りない模様。
・Service Worker(ソースをキャッシュするやつ)
・PushNotification(プッシュ通知するやつ)
・WebManifest(サイトをアプリホームにブックマークするやつ)
重要なとこほぼ全部足りねーじゃねーか…
次回
PWA御三家(Service Worker、PushNotification、WebManifest)を導入してPWAを作る。