Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Ec91dbebf34c42103d810a6861b567a2?s=128

Kota Nonaka

August 29, 2018
Tweet

More Decks by Kota Nonaka

Other Decks in Programming

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-Λ࣋ͭ

  5. None
  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. しかも!

  17. None
  18. Progressive Web App 満点!!

  19. ところで…

  20. PWA化のメリットは…? (ブログという観点で見ると…) • Lighthouseのスコアが上がって嬉しい(マジで) • (ユーザーがたくさんいるサイトではないので
 離脱率/直帰率等への影響は不明) • 今後リファレンス的に使える情報が増えたときに
 手元に置いておく用途には最適

    • WebPushなどを組み合わせると離脱防止に効果があるかもしれない • ブログをPWA化するメリットはさほど大きくない…?
  21. まとめ・感想 • Gatsbyを使ったサイトをPWA化するのは本当にかんたん • config書く時間 < アイコン作る時間 • 静的サイトをPWA化することでメリットが得られるサイトは限定的? •

    ライブラリのドキュメントとか? • PWAとして使うか否かはユーザーが選べばいい/導入は一瞬
 やっておいて損はない(と思う)
  22. GatsbyでLet's PWA✌

  23. Thanks✨