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/

Kota Nonaka

August 29, 2018
Tweet

More Decks by Kota Nonaka

Other Decks in Programming

Transcript

  1. ここがすごいぞGatsby • Data sourceが豊富 • eg. Markdown / YAML /

    WordPress / Contentful / esa.io / etc... • React / GraphQL • 既存の知識やライブラリがそのまま使える • 吐き出されるのは静的なSPA (Single Page Application) • ページ遷移などが爆速 • デプロイも成果物をNetlify / GitHub Pagesなどへ配置するだけ
  2. /* ---------- 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の一部抜粋です。
 詳しくは先ほどのリポジトリをご覧ください…!
  3. まとめ・感想 • Gatsbyを使ったサイトをPWA化するのは本当にかんたん • config書く時間 < アイコン作る時間 • 静的サイトをPWA化することでメリットが得られるサイトは限定的? •

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