当サイトをPWA化してみる

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

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

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

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

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

次に、PWA(Progressive Web Apps)化。

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

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

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

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

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

アドレスバーの色の変更

Luxeritas 3.1.3 リリース | Luxeritas Theme
Luxeritas 3.1.3 をリリースしました。 2018年7月の Google 大型アップデート向けの内容を少し盛り込んでるのでアップデート推奨。 ちなみに、今回のアップデ...

サイトのPWA化

サンプルあり!Googleが推進するPWAに既存サイトを対応させる方法 - WPJ
Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA(Progressive Web Apps」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。

以上です。

なんつったりして!

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

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

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

(417)

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

PWA(Progressive Web Apps)対応 Luxeritas 3.2.0 | Thought is free
Luxeritas が PWA(Progressive Web Apps)に対応しました。 これで Google が推進する二大プロジェクト AMP と PWA 両方に対応できる...

コメント

タイトルとURLをコピーしました