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

2018.09.27

今までの記事 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のデフォルトテンプレートで既に対応されおり

Service Workerによるオフライン対応
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の内容を入れるだけで終わりです。簡単ですね。

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',
  ],
}

Xでシェア