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

by Kota Nonaka

Slide 1

Slide 1 text

Gatsbyで PWA やってみた 2018/08/29 ゆるはち.it Kota Nonaka (@uutarou10)

Slide 2

Slide 2 text

速報

Slide 3

Slide 3 text

けっこう酔ってきた

Slide 4

Slide 4 text

Gatsbyとは? • https://www.gatsbyjs.org/ • 一言で言うと静的サイトジェネレーター • Jekyll/Hugo/Hexoなどと同じジャンル w όοΫΤϯυʹ3FBDU(SBQI2-Λ࣋ͭ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Data sourceとして Markdown/外部API等を利用 GraphQLを用いてページ生成に必要な情報の抽出 Reactで作成したViewで利用 Gatsby公式サイト(https://getgatsbyjs.org)より引用

Slide 7

Slide 7 text

ここがすごいぞGatsby • Data sourceが豊富 • eg. Markdown / YAML / WordPress / Contentful / esa.io / etc... • React / GraphQL • 既存の知識やライブラリがそのまま使える • 吐き出されるのは静的なSPA (Single Page Application) • ページ遷移などが爆速 • デプロイも成果物をNetlify / GitHub Pagesなどへ配置するだけ

Slide 8

Slide 8 text

(語ると長くなりそうなので)  本題

Slide 9

Slide 9 text

作った https://mogam.in https://github.com/uutarou10/mogam.in

Slide 10

Slide 10 text

PWA化してみる • gatsby-plugin-manifest • サイトをPWAとして認識してもらうために必要なmanifestの自動生成 • アイコン画像の最適化 • gatsby-plugin-oﬄine • コンテンツのキャッシュを行うServiceWorkerを自動生成

Slide 11

Slide 11 text

/* ---------- 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-conﬁg.jsの一部抜粋です。  詳しくは先ほどのリポジトリをご覧ください…!

Slide 12

Slide 12 text

結果

Slide 13

Slide 13 text

結果ホーム画面への追加  ポップアップが表示 manifestに指定した  theme colorが反映 Android 5.1.1 / Google Chrome 68で検証

Slide 14

Slide 14 text

結果 "OESPJE(PPHMF$ISPNFͰݕূ 機内モードでもページ遷移可能

Slide 15

Slide 15 text

とっても簡単

Slide 16

Slide 16 text

しかも!

Slide 17

Slide 17 text