mottox2 blog

GatsbyJS v2 はじめの一歩 (8) PWA対応

bloggatsby

今までの記事
GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ
GatsbyJS v2 はじめの一歩 (2) 実際にページを作る
GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる
GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ
GatsbyJS v2 はじめの一歩 (5) GraphQLによるデータ管理
GatsbyJS v2 はじめの一歩 (6) Source Pluginの利用
GatsbyJS v2 はじめの一歩 (7) 動的にページを生成する


Progressive Web Appとは

PWA(Progressive Web App)は近年よく聞かれるようになった言葉ですが、ざっくりというと「アプリのようないい体験をWebでも提供しましょう。そのために早くて信頼性が高く魅力的なものをつくりましょう」という話です。
巷では、ホーム画面における、オフラインでも動くような機能的な側面がプッシュされがちですが、全体としての体験やそのための機能群(ex. Offine、Add To HomeScreen, etc...)のことです。

GatsbyにおけるPWA対応

実はGatsbyのデフォルトテンプレートで既に対応されおり

  1. Service Workerによるオフライン対応
  2. Add to home screen (A2HS)

は動く状態になっています。

今回は自分でまっさらな状態から対応する場合の説明をします。

Service Workerとは?

一言で言うと、UIと切り離された状態で動作してくれるスクリプトです。
基本的にイベント駆動なスクリプトになっており、プロキシのような動作を実現できたり(ex. ブラウザとワーカーの間でサーバーと通信する前にブラウザ側のキャッシュを返す)、プッシュ通知を受け取るような処理を実現することが出来ます。

参考リンク: Google DevelopersのService Worker の紹介

Add to Home Screen (A2HS)とは?

Add to Home Screenは簡単に言うとホーム画面にアイコンをおける機能です。従来もアイコンをホーム画面に置くことができましたが、PWAの文脈のA2HSでは、起動画面(SplashScreen)、アプリケーションの色、ブラウザのバーの有無の設定などがカスタマイズできるようになっています。(ただし2018年iOS 11.4時点でのサポートはAndroidほど進んでいません。)

A2HSを利用するためにはWeb ManifestというWeb Appとしての振る舞いをJSONで記述するファイルを設置する必要があります。
Web Manifestはmanifest.webmanifestという名前で<link rel="manifest" href="/manifest.webmanifest"/>のようなlinkタグで呼び出されます。まずはシンプルなWeb Manifestファイルを示します。

{
  "background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

このようなWeb Manifestファイルを設置したサイトで、「ホーム画面に追加」を選択するといい感じにアプリライクになったアイコンをホーム画面に追加できます。

なおA2HSを有効にするためには次の条件を満たす必要があります

  • HTTPSになっていること
  • linkタグでWebManifestが呼ばれていること
  • 適切なアイコンが設定されていること
  • ServiceWorkerが有効になっていること

Pluginを利用したPWA対応

GatsbyJS(やNuxt.jsなどの主要フレームワーク)の文脈でのPWA対応は「オフライン対応」、「Add to Homescreen」が多いです。これはある程度やることが決まっており、プラグイン的なもので簡単に対応出来るからです。
GatsbyJSでも例に漏れずPWA対応をプラグインで行うことが可能です。使用するプラグインは次の2つです。

  • gatsby-plugin-manifest
  • gatsby-plugin-offline

gatsby-plugin-manifestではWeb Manifestを有効化、gatsby-plugin-offlineでオフライン対応を行います。それではプラグインの導入を進めていきます。
といっても簡単で、PluginのオプションにWebManifestの内容を入れるだけで終わりです。簡単ですね。

gatsby-config.js
module.exports = {
  siteMetadata: {},
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'App Name',
        short_name: 'AppName',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/logo.png, // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
  ],
}
B!
tips

Google Chromeスクショ術

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > C

chrome
event

技書博で「SlackApps開発ガイド」を頒布します

7/27に大田区産業プラザPiOで行われる技術書同人誌博覧会(技書博)に「つのぶえ出版」としてサークル参加します。 今まで「つのぶえ出版」としてはGatsbyとNetlifyの本を4冊だしていまし

event

Ginza.jsでNext.jsをNetlifyで配信するLTをしてきた

2019/5/22にPlaidさんのオフィスで行われたGinza.js #1にLT枠で参加してきました。 前から、Plaidさんの会場は一面芝というのをTwitterで観測しており、今回初めてお邪魔

ltnetlifyreactnextjs