GatsbyでPWAやってみた / Tried PWA using Gatsby

2018/08/29 ゆるはち.it Vol.1 でのLT資料です。
https://yuruhachi-it.connpass.com/event/96878/

Transcript

1. Gatsbyで PWA やってみた 2018/08/29 ゆるはち.it Kota Nonaka (@uutarou10)
2. 速報
3. けっこう酔ってきた
4. Gatsbyとは? • https://www.gatsbyjs.org/ • 一言で言うと静的サイトジェネレーター • Jekyll/Hugo/Hexoなどと同じジャンル w όοΫΤϯυʹ3FBDU
   
   (SBQI2-Λ࣋ͭ
6. Data sourceとして Markdown/外部API等を利用 GraphQLを用いてページ生成に 必要な情報の抽出 Reactで作成したViewで利用 Gatsby公式サイト(https://getgatsbyjs.org)より引用
7. ここがすごいぞGatsby • Data sourceが豊富 • eg. Markdown / YAML / WordPress / Contentful / esa.io / etc... • React / GraphQL • 既存の知識やライブラリがそのまま使える • 吐き出されるのは静的なSPA (Single Page Application) • ページ遷移などが爆速 • デプロイも成果物をNetlify / GitHub Pagesなどへ配置するだけ
8. (語ると長くなりそうなので)
 本題
9. 作った https://mogam.in https://github.com/uutarou10/mogam.in
10. PWA化してみる • gatsby-plugin-manifest • サイトをPWAとして認識してもらうために必要なmanifestの自動生成 • アイコン画像の最適化 • gatsby-plugin-offline • コンテンツのキャッシュを行うServiceWorkerを自動生成
11. /* ---------- PWA ---------- */ { resolve: `gatsby-plugin-manifest`, options: { name: `Mogami#Log`, short_name: `Mogami#Log`, start_url: `/`, background_color: `#f7f0eb`, theme_color: `#00D1B2`, display: `minimal-ui`, icon: `src/images/icon.png`, } }, `gatsby-plugin-offline`, manifestの内容を定義 iconは解像度の大きいものを
 作成することで最適な解像度の
 画像をビルドプロセスで
 用意してくれる 上記はgatsby-config.jsの一部抜粋です。
 詳しくは先ほどのリポジトリをご覧ください…!
12. 結果
13. 結果 ホーム画面への追加
 ポップアップが表示 manifestに指定した
 theme colorが反映 Android 5.1.1 / Google Chrome 68で検証
14. 結果 "OESPJE
    
    
    (PPHMF
    $ISPNF
    Ͱݕূ 機内モードでもページ遷移可能
15. とっても簡単
16. しかも!
18. Progressive Web App 満点!!
19. ところで…
20. PWA化のメリットは…? (ブログという観点で見ると…) • Lighthouseのスコアが上がって嬉しい(マジで) • (ユーザーがたくさんいるサイトではないので
 離脱率/直帰率等への影響は不明) • 今後リファレンス的に使える情報が増えたときに
 手元に置いておく用途には最適 • WebPushなどを組み合わせると離脱防止に効果があるかもしれない • ブログをPWA化するメリットはさほど大きくない…?
21. まとめ・感想 • Gatsbyを使ったサイトをPWA化するのは本当にかんたん • config書く時間 < アイコン作る時間 • 静的サイトをPWA化することでメリットが得られるサイトは限定的? • ライブラリのドキュメントとか? • PWAとして使うか否かはユーザーが選べばいい/導入は一瞬
 やっておいて損はない(と思う)
22. GatsbyでLet's PWA✌
23. Thanks✨