Web Starter Kit をマスターするぞ！… その1 #PWA

最近時間ができたのでPWA(Progressive Web Apps)を習得する手始めとしてGoogleが提供しているWeb Starter Kitを始めたいと思います。

PWAでできること／できないこと。

ネイティブアプリにできなかったことがいくつかPWAとしてWebアプリ（紛らわしい...）としてできるようになってきました、モバイルSafariにも対応が始まりましたね。
できることできないこと一覧は、https://whatwebcando.today で確認できます。

まずは、Web Starter Kit

Web Starter KitはPWAのひな形なのでそれだけではだからなに？って感じのようですがまずはここから始めてみます。
Web Starter Kitの紹介ページ最初は日本語の説明もあって安心(?)ですねw

とにかくまず動かしてみます！

まずは動かしてからですよね。私の環境は、macOS 10.13.5です。

1. Web Starter Kitのダウンロード

git clone でサンプルをダウンロードします。
ダウンロード後にweb-starter-kitのディレクトリに移動します。

sh-3.2$ cd wsk
sh-3.2$ git clone https://github.com/google/web-starter-kit
Cloning into 'web-starter-kit'...
remote: Counting objects: 10577, done.
remote: Total 10577 (delta 0), reused 0 (delta 0), pack-reused 10577
Receiving objects: 100% (10577/10577), 9.86 MiB | 3.79 MiB/s, done.
Resolving deltas: 100% (5624/5624), done.
sh-3.2$ cd web-starter-kit/

2. もろもろツールのインストール

古いバージョンが入ってたりしたので消したりしてます。

sh-3.2$ brew install ruby
sh-3.2$ nodebrew install-binary stable
sh-3.2$ nodebrew use v10.4.1
sh-3.2$ npm update -g npm
sh-3.2$ npm uninstall gulp-sass
sh-3.2$ npm install gulp-sass --save-dev
sh-3.2$ npm install --global gulp-cli

3. 起動！！

appディレクトリに入ってgulpコマンドを実行します。

sh-3.2$ cd app
sh-3.2$ gulp serve
[21:45:09] Failed to load external module @babel/register
[21:45:09] Requiring external module babel-register
[21:45:09] Working directory changed to ~/Desktop/wsk/web-starter-kit
[21:45:10] Using gulpfile ~/Desktop/wsk/web-starter-kit/gulpfile.babel.js
[21:45:10] Starting 'scripts'...
[21:45:10] Starting 'styles'...
[21:45:11] Finished 'scripts' after 382 ms
[21:45:11] Finished 'styles' after 297 ms
[21:45:11] Starting 'serve'...
[21:45:11] Finished 'serve' after 41 ms
[WSK] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.16:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.16:3001
 -------------------------------------
[WSK] Serving files from: .tmp
[WSK] Serving files from: app

4. ブラウザが立ち上がりました。

PC画面

モバイル画面

まずはここから

とりあえず、サービスは立ち上げられたので、PWAっぽい機能、ローカル通知やオフラインストレージを試したいと思います。