ホーム画面に追加して便利になる!?話題のPWA導入しました!

こんばんは優です。

当ブログもとうとうPWA導入しました!これからもコンテンツの充実をしていきますので、もしよろしければホーム画面に追加をしてみてください!

PWAについて「よく知らないよー」という人向けにPWAのメリットや使い方について説明していこうと思います。

PWAについて

PWAってなに?

PWAとは、Progressive Web Appsの略です。

私が運営しているブログをはじめとして、世の中には多くのウェブサイトがあります。みなさんがウェブサイトを閲覧するときには、chromeやsafariといったブラウザアプリを使用していると思います。

しかしPWAを導入したサイトはまるでアプリのようUIや挙動を可能にし、閲覧することができるんです。

その他にもいくつかメリットがありますので、紹介していきます。

ページの読み込みが速い

データ通信量が抑制されてページの表示速度が高速化されます。

当ブログは画像を取り扱うことが多いので少しでも高速化されるならと思い導入を決意しました。

UIの設計

ブラウザアプリを使用すると画面上部にメニューバーが表示されると思います。

ブラウザアプリ表示

PWA化してサイトを開くとメニューバーが表示されず、すっきりします。

微妙な違いですが、画面サイズの小さいスマホでは大きな違いですね!

オフラインでも動く

…らしいです!笑

これについては検証できていないのでわからないのですが、


通信が一時的に途絶えても、継続してWebサイトを閲覧することができます。
ページ遷移を伴う操作も可能です。

https://wacul-ai.com/blog/site-improvement/method/pwa/

だそうです!とてもありがたい。

プッシュ通知を送ることができる!

プッシュ通知を送ることができるようなのですが、当ブログではこの機能は使用しません!

公式のラインとかツイッターとかフォローしたほうが情報が正確ですから…笑

使い方

PWAについて説明してきましたが、「じゃあどうやって使えばいいの?」と思っていただけた方!本当にありがとうございます。

使い方としては穂無画面に追加して、アイコンをぽちっと押すだけです。

Android

chromeで右上をタップしてメニューを開きます。

下の方にある「ホーム画面に追加」をタップして完了です。

android

ホーム画面に追加されました!

あとは普通のアプリみたいにポチっとタップすれば起動します!(この画面変えたい…)

ios

私がiPadしか持っていないのでiPhoneでの挙動は確認できないのですが、safariで開いていただくとホーム画面に追加とありますのでタップしてください!

おわりに

当ブログのPWAに伴いその説明や使い方を書きました。

これからも多くのプロデューサーさんに利用していただきたいと思い導入に至ったのですが、アプリのように気軽にアクセスできるようになったはいいけど、どうすれば利用者が増えるかなーと考えていました。

そんな時に考えついたのが本日投稿した「アピール値計算機」です。

W.I.N.G編 アピール計算機

2019.04.10

アピール値計算機は私がシャニマスを始めた当初、欲しかったなーと思っていた機能の一つなので何とか実装できて良かったです。

これを機に便利機能をもっと実装できたらなと思っています。

ここ数日これらのおかげで全然シャニマスができていないという本末転倒プロデューサーですが、これからもよろしくお願いいたします!

おすすめ記事