【PWA化しました】カラフルクエストをホーム画面に追加しよう!

こんにちは、柊です。

遂に当サイトでも「PWA」が使えるようになりました。

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

当サイトをスマホで見る場合、SafariやChromeなどのブラウザアプリで見ると思いますが、このPWAに対応したことによりブラウザを経由せずにサイトを見ることができるようになりました。

サイトをリニューアルした日に一度実装してみましたが、イマイチ上手く動かなかったのでしばらくOFFにしていましたが、落ち着いてきたので本日からONにしました。

PWAの機能

  • 端末にインストールできる(素早くアクセスできる)
  • 1つのアプリとして開くことができる
  • オフライン環境でも見ることができる
  • push通知が可能(iOSは未対応)

端末にインストールできる(素早くアクセスできる)

Safariの「ホーム画面に追加」で簡単にインストールすることができます。これに関してはどのサイトでもできますね。

1つのアプリとして開くことができる

左のSafariが従来のホーム画面に追加したもので右のカラフルクエストと書いてある方がPWAに対応したサイトのものです。

今まではタップするとSafariでサイトが開かれる、いわばWebサイトへのショートカットをホーム画面に追加しているわけですが、PWAに対応したサイトは1つのアプリのような扱いになります。

※できない方はiPhoneをアップデートしてみてください

オフライン環境でも見ることができる

データがキャッシュされるのでオフライン環境でもサイトを見ることができます。

個別のページも一度アクセスしてキャッシュされていれば通常時とほぼ変わらない状態で見ることが可能です。

動画では喫茶ステラと死神の蝶のページはキャッシュされているのでオフライン環境でも見ることができていますが、他の2つはキャッシュされていないので表示されない状態です。こういう場合はネットに繋がっている状態で一度2つの記事にアクセスする必要があります。

push通知が可能(iOSは未対応)

僕はiPhoneを使っているので詳しくは分かりませんが、Androidだと新しい記事が投稿されると通知がいくみたいです。早くiOSにも対応してほしいですね。

ホーム画面に追加する方法

ステップ1

Safariでサイトにアクセスして真ん中の四角に矢印がついたアイコンをタップします。

ステップ2

「ホームに追加」をタップします。

ステップ3

右上の追加をタップすればOK!

まとめ

当サイトはパソコンで見ている方が多いんですが、それでもスマホで見てくれている方もいるのでより快適に見てもらえるようにPWAを実装しました。なにか不具合が起こらない限り、PWAはONにしていこうかなと思います。

今後はサイト全体をスマホでも見やすいように工夫する必要がありそうですね。頑張ります。

ではでは。