当サイトをPWA化してみる

2018年12月16日

この記事を読むのに必要な時間は約 3 分です。

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

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

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

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

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

次に、PWA（Progressive Web Apps）化。

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

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

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

 

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

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

アドレスバーの色の変更

サイトのPWA化

以上です。

↓

なんつったりして！

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

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

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

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