- 最近時間ができたので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っぽい機能、ローカル通知やオフラインストレージを試したいと思います。