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

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.