Nuxt.jsとFirebaseを 使って簡単にPWA開発をする

2019年5月26日に行われたABC 2019 Springで使用したスライドです。

スライド内のリンク
Nuxt.js：https://nuxtjs.org/
PWA Night：https://pwanight.connpass.com/
タムテブ：https://tamutebu-arabaki2019.firebaseapp.com/
タップ10サイト： https://tap10s.web.app/
タップ10GitHub：https://github.com/KanDai/tap10

Transcript

1. 2019.05.26　ABC 2019 Spring Nuxt.jsとFirebaseを使って
 簡単にPWA開発をする TAM.inc / PWA Night 菅家大地
2. TAM.inc フロントエンドエンジニア 
 菅家 大地 / Daichi Kanke 自己紹介 • 元デザイナーのフロントエンドエンジニア
 普段はWebサイトやWebアプリのフロント全般
 • 福島→宮城→東京と埼玉→宮城(New!)
 • v-sendai 運営メンバー
 • PWA Night 運営メンバー
 @kan_dai @kan_dai @kan_dai @KanDai
3. • PWAをテーマにした勉強会
 • 2019年2月より毎月開催
 • PWAを技術やビジネス面から捉 えてコミュニケーション
 • エンジニアだけでなく、
 PWAに興味がある方大歓迎！
 PWA Night?
4. イメージキャラクターの
 pwan(ぷわん)です

5. ちょっと似てる…？？

7. 今日のテーマ
 Nuxt.jsを使った簡単PWA構築

8. Nuxt.js? Vue.js アプリケーション開発するうえで 便利な機能がたくさん入っているフレームワーク
9. 実際に作ったもの紹介

10. • 社内向けを想定したアプリで技術書典のサン プルアプリとして制作
 • 社内の業務用アプリなどの場合は
 デスクトップPWAが相性良いかも
 • Nuxt.js + Firebaseで作成
 • 実装期間は5日間程度
 社内向け書籍管理アプリ
11. • 4月にあったイベントのアプリとして作成
 • 気軽に開発してリリースができるので
 個人開発には嬉しい
 • Nuxt.js + Firebaseで作成
 • 実装・リリースまで2日間
 フェスのマイタイムテーブル作成
 https://tamutebu-arabaki2019.firebaseapp.com/

12. 
 とはいえPWAって色々めんどくさいのでは？
 

13. Nuxt.js の PWAモジュールで簡単にPWA化ができる • Nuxt.jsにはNuxt PWAというモジュールが 用意されていて、これを有効化するだけで 良い感じにPWA化してくれる • 紹介したアプリも有効化してアプリ名など の設定をしただけです
14. Workbox • 簡単な記述で最適なServiceWorkerのコードを生成してくれるGoogle 製のライブラリ • オプションで色々と指定できますが特に設定しなくてもOK • すごく雑に言うとNuxtで有効化しておくと、良い感じにキャッシュしてく れる
15. Manifest / Meta / Icon • PWAに必要なマニフェストファイルを自動生成 • metaもプロジェクト情報から自動で設定してくれる • 大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成 してくれる • 地味にめんどくさいこれらの作業も自動でやってくれる。 必要であれば「nuxt.config.js」で上書き可能
16. OneSignal • 無料で利用可能なプッシュ通知サービス • OneSignalのサービスに登録し、PWA Moduleと別途でonesignalのライブラリを追加 することで使用できるようになる
17. 
 実際に試してみる
 

19. // インストール ※nodeはインストールしている想定 // Progressive Web App (PWA) Supportを選択する $ npx create-nuxt-app <project-name> // ディレクトリ移動 $ cd <project-name> // ローカルサーバーを起動 $ npm run dev
20. /pages/index.vue
21. /pages/index.vue
22. /pages/index.vue
23. // ビルド $ npm run build // firebaseのプロジェクト作成 ※firebase toolsはインストールしている想定 $ firebase init // firebaseにデプロイ $ firebase deploy
24. 完成 
 サイト https://tap10s.web.app/ GitHub https://github.com/KanDai/tap10
25. 気軽にPWA楽しみましょう！
 ご静聴ありがとうございました！