当サイトをPWA化してみる

さて、先のエントリーで予告した当サイトのPWA化について。早速やってみました。

また、これと並行して、モバイルブラウザーのアドレスバーの色も変更してみました。

順序が逆になりますが、まずはアドレスバーの色の変更から。

変更前。Luxeritasテーマの標準の青いアドレスバーです。

変更後。当サイトのテーマカラーになりました。

次に、PWA(Progressive Web Apps)化。

当サイトにアクセスすると、ページ下部に「ホーム画面にmonozuki.clubを追加」と表示されます。

これをタッチするとホーム画面にアイコンが追加されます。

そしてアイコンをタッチすると、このようにアプリ化された形で当サイトが表示されます。

ブラウザーではアドレスバーが表示されていた箇所がサイトタイトルになっており、アプリ化されていることが分かります。

さて、これらを実現する手順については、下記を参照されたい。

アドレスバーの色の変更

サイトのPWA化

以上です。

なんつったりして!

実はどちらもLuxeritasテーマなら実に簡単なのでした。

Luxeritasカスタマイザーの「PWA」タブで、

  • モバイル用テーマの色を指定
  • PWA(Progressive Web Apps)有効化

(417)

これだけです。拍子抜けするほど簡単。素晴らしい。テーマ作者さんに感謝。