Hexo で作ったブログに PWA を導入

ブログ制作

PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みらしいです。

詳しく知りたい方はこちらを読んでみて下さい。

初めに

なぜ導入したかと言うと、今後、Webアプリを作るに当たって必要になりそうな機能だからです。

Webアプリは、ブラウザからじゃないとアクセス出来ないため、どうしても手間に思えてしまいます。

ホーム画面にボタンを設置できるようになれば、利便性が向上するので、利用してもらいやすくなるのです。

その先駆けとして、のい太ろぐに導入してみました。

アイコン画像をサイズ別で用意

まず初めに、ホーム画面に追加した際に表示されるアイコン画像を用意しました。

うちのサイトのアイコンは、こちらの無料サイトから使わせてもらっているので簡単に集めることが出来ました。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

Hexo に PWA プラグイン を導入

先人の方が作ってくれた PWA プラグイン を Hexo に導入しました。

大変ありがとうございます。

npm install --save hexo-pwa

プラグインのサイトはこちらです。

lavas-project/hexo-pwa
Hexo PWA plugin. Contribute to lavas-project/hexo-pwa development by creating an account on GitHub.

コンフィグに PWA の設定を書く

サイトに乗っているコンフィグ設定を、自分のサイト用に書き換えました。

pwa:
  manifest:
    path: /manifest.json
    body:
      name: のい太ろぐ
      short_name: のい太ろぐ
      icons:
        - src: /images/favicon_16.png
          sizes: 16x16
          type: image/png
        - src: /images/favicon_32.png
          sizes: 32x32
          type: image/png
        - src: /images/favicon_48.png
          sizes: 48x48
          type: image/png
        - src: /images/favicon_64.png
          sizes: 64x64
          type: image/png
        - src: /images/favicon_128.png
          sizes: 128x128
          type: image/png
        - src: /images/favicon_256.png
          sizes: 256x256
          type: image/png
        - src: /images/favicon_512.png
          sizes: 512x512
          type: image/png
      start_url: /
      theme_color: '#d35'
      background_color: '#26272b'
      display: standalone

これだけです。

serviceWorker はよく分からなかったので消しました。

サイト名と、アイコンサイズとそのサイズのパス、初期URLと、テーマカラーとバックカラーと、表示モードを設定しました。

表示モードは、standalone にしたので、アドレスバーが非表示となっています。

実際に確認してみる

Android の場合

Android の場合は、Chrome からホーム画面に追加出来ます。

まず、Chrome で普通に開きます。

Chrome の右上のメニューを開き、ホーム画面に追加を選択します。

追加を押せば、ホーム画面に追加されます。

ホーム画面の左上に追加されました。

タップして開くと、 PWA 化されたのい太ろぐが表示されます。

アドレスバーが非表示になっていたり、ステータスバーの色が設定したテーマカラーになっていたりします。

iOS の場合

iOS の場合は、Safari からホーム画面に追加出来ます。

まず、Safari で普通に開きます。

Safari の右上の共有ボタンを押して、ホーム画面に追加を選択します。

追加を押せば、ホーム画面に追加されます。

ホーム画面の左上に追加されました。

タップして開くと、 PWA 化されたのい太ろぐが表示されます。

つまずいた点

iOS でアイコンが表示されない

iOS の Safari でホーム画面に追加をしても、設定したアイコンが表示されずに、サイトのサムネイルが表示されました。

ダサいよね。ありえないわって思いました。

Safari は headタグ内に PWA情報が無いといけないみたいです。

こちらのサイトを参考に対策しました。

GoogleChromeLabs/pwacompat
PWACompat to bring Web App Manifest to older browsers - GoogleChromeLabs/pwacompat

このスクリプトは、headタグ内に manifest.json の内容を書き換えてくれます。

私のサイトは Hexo で作ってあるので、headタグ内をいじるには、layout\common\head.ejs のファイルを修正する必要がありました。

headタグが終了する直前にスクリプトを埋め込みました。

<!-- PWACompat -->
<link rel="manifest" href="manifest.webmanifest" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js" integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc" crossorigin="anonymous"></script>

これだけで、iOS の Safari でもちゃんとアイコンが出るようになります。

終わりに

見た目や速度は何も変わらず、現段階で実装する意味は無いです。

まあ、勉強になったかな。

参考にしたサイト

Hexoで作ったブログにPWAプラグイン入た時のメモ - Qiita
個人的なブログを「ホームに追加」してみたくなり、 PWA対応を入れたのでそのメモです。 ※PWA初心者です 構成 Hexo A fast, simple & powerful blog framework ...
iOSで「ホーム画面に追加」はPWACompatを使うのが良さそうだよ(2018/10時点) - Qiita
はじめに Reactのチュートリアルでいろいろ遊んでいたのですが、iOS(iPhone)のSafariでは「ホーム画面に追加」を押してもAndroidのようにアイコンとかうまく設定してくれないようです。 PWACompatを使う...
manifest.jsonでホーム画面へのアプリ追加(Android編)【これからはじめるPWA】 - bagelee(ベーグリー)
PWAの解説シリーズ第2弾!今回はmanifest.jsonを作成し、Android用のホームスクリーンにPWAを追加していきます。
タイトルとURLをコピーしました