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

Uncategorized
1.1k words

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

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

初めに

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

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

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

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

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

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

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

https://icooon-mono.com/

Hexo に PWA プラグイン を導入

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

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

1
npm install --save hexo-pwa

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

https://github.com/lavas-project/hexo-pwa

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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情報が無いといけないみたいです。

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

https://github.com/GoogleChromeLabs/pwacompat

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

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

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

1
2
3
<!-- PWACompat -->
<link rel="manifest" href="manifest.webmanifest" />
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js" integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc" crossorigin="anonymous"></script>

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

終わりに

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

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

参考にしたサイト

https://qiita.com/DaikiNakamura/items/dabe1dec52a642b4e33f

https://qiita.com/uzresk/items/6e20f846c48738718d40

https://bagelee.com/programming/pwa/manifest-json-pwa/