pwaとは?仕組みや使い方、ブログ運営に必要か考えてみる

pwaとは?仕組みや使い方、ブログ運営に必要か考えてみる

こんばんはtaisonです!

今週末は天野嘉孝展が静岡で開催するということで、久しぶりに週末外出でございます。
今からワクワクが止まらない!
ffでお馴染みの絵が間近で見られるかと思うと、テンションが上がってしまいます。

あ、ffってファイナルファンタジーの略です。って、皆知ってるか。

さて、今日の話は全くffと関係のないpwaについて記事にしていきたいと思います。

あ、pwaってプログレッシブウェブアプリの略です。

しつこいか

最近話題のpwaとは?

少し前にtwitter社がpwaを使用して、モバイル用にアプリ構築し直したことが話題になりましたね。

私はかなり簡単に説明することしかできないので、pwaについて詳しく知りたい方はこちら↓をご一読。

はじめてのプログレッシブウェブアプリ

pwaを要約すると、

ダウンロードの必要がないどんな端末でも見られるアプリ

といった感じでしょうか。

使用感はまさにアプリそのもので、
ホーム画面にアイコン置けるし、
プッシュ通知使えるし、
表示速度早いし、と3拍子揃った素晴らしい仕組みなのです。

そしてなによりこのpwa。

サイト制作で使うhtmlやcssを使って制作もできちゃうんですよ。すごいですねぇ。

ひと昔前ならオブジェクト指向がぁ。環境構築がぁ。なんて、手の出しにくいアプリ開発が、擬似的とはいえ手軽に作成できちゃうワケなんです。

(スタイルなどはservice-worker(後述)経由なので、環境構築は必要です)

ただ、扱えるからといって考えも無しに導入しても全くメリットなかったー!ってなる気もするので、一応自分にとって必要になるか考えてみました。

webデザイナーやブロガーがpwaを導入するメリットはあるか?

自分が関連しそうな分野といえば、webデザイン関連とweb関連のブログ運営になります。
なのでこの二つを軸にしてカンタンに考察。

まずはブログ運営者

これは確実に恩恵を受ける人はいます。

速度が速いのは他の対応策(ampなど)もあるのでひとまず置いておくとしても、プッシュ通知が使えるのは大きい。(wordpressだったらプッシュ通知用のプラグインもありますが)

再訪問してもらえる確率も増えますし。

逆に言えば再訪問してもらえる話題やノウハウを提供することが大前提となるワケですが、それに当てはまる記事を出してるブログ運営者は検討の余地がありそうです。
例にあげると、日本語で手に入りにくい最新情報を和訳して提供してるとか、継続性のある連載記事なんかを書いている人達でしょうか。自作のツールとか配布してる人もいいかも。

(残念ながら自分はそのタイプではないのでpwa導入は見送り 泣)

訪問者数がある程度まとまっている人も、導入してみるのはいいかもしれませんね。
再訪問のきっかけづくりとして。

次にwebデザイナー

自社サイトに導入するかは別としても、こういった案件を取り扱えるようになるのは、一つの強みになりそうですね。

アプリ化したいけど予算がなぁ、、、って会社は結構ありそうですし、シンプルな設計を求めている企業には速度のメリットも併せて提供できます。

(amp?知りません)

うーん。メリットあるなぁ 笑

少なからず導入技術は持っておいた方がよさそうだ。

ちなみに今メリットばっか話してますけど、一応注意点もあるので下記のセクションに掲載します。

pwaの最大の恩恵はserviceworkerを経由して提供される

このプログレッシブウェブアプリというものは、単独で表示できるものではなく、多くのメリット部分が、serviceworkerという基盤技術をとおして提供されます。

詳しくはserviceworker和訳の公式ページに載ってますので、ご一読。

ざっくり言うとserviceworkerの機能はjavascriptベースのキャッシュ機能
むしろクラウド同期なイメージに近いかもしれません。

必要がある時にキャッシュさせておいたjsやらcssのデータをリクエストして取り出すようにすることで、速度改善やオフライン表示に役立てているんです。
要はserviceworker使わずブログやwebサイトを作ったら、単なるhtml,cssの構成になってしまうのです。

で、肝心の注意点。
このserviceworkerは、導入しているブラウザの対応状況がマチマチという所です。
以下のとおりです。

sercviceworker対応状況

SafariとEdgeの対応が完全ではないんですね。(一応2つとも採用方向で動いているようです。IEは知らん)

ただ、自分もiphoneのsafariでpwa対応したサイトを閲覧してみましたが、表示などは特に問題ありませんでした。
プッシュ通知の機能などで不都合があるんでしょうか?

このあたりはもう少し詳しく調べてみることにします。

pwa導入で再エンゲージメントを向上させたいもんですね

以上、ざっくりとpwa導入のメリットや注意点を説明しましたが、使えるようなら使ってみたいもんです。
実際スターターキットのようなファイルもweb上にあったりしますので、複雑な構成など考えなければノンプログラマーでも十分構築できるような気がしますね。

なので自分もまずテスト環境で制作をしてみて、導入技術を身に付けてみようと思ってます。
なんか、、、

使えたらかっこよさそうだしね!

制作内容はまた記事にしてみようと思ってますのでよろしくお願いします。

それではまた!

こちらの記事も読まれています

ノンプログラマーがjavascript promiseを勉強してみた 前編... こんばんわ、taisonです。 先日pwa(プログレッシブウェブアプリ)を使ってみようと思って、pwaのチュートリアル記事を見て勉強していたんですが、自分自身プログラマーではない(webサイトとかwordpressに関わる言語を編集できるくらいの知識しかない)ので、色々とハマる部分がありました...
ノンプログラマーがjavascript promiseを勉強してみた 後編... こんばんわ、taisonです。 さて、本日は前回の記事の続きであるjavascript promiseのコードを実際に書いていこうと思います。 Promiseコードを書いてみる 手始めにMDNのサンプルコードを紐解いてみます。 リンク先のページではコードを動かすスペースが記事の先頭にある...
moment.jsで日付自動更新するプログラム作ったらIEにやられた... IE、、、、 本名 インターネットエクスプローラー そう、製作者ならば誰もが悩まされるであろう悪魔のブラウザですね。 今回も私は魔の手に捕らえられ苦汁をなめさせられた次第でございます。 日付自動更新させようと思ったのよ とあるクライアントから 「キャンペーンの期限を1週間ごとに自動更...
pwaとは?仕組みや使い方、ブログ運営に必要か考えてみる... こんばんはtaisonです! 今週末は天野嘉孝展が静岡で開催するということで、久しぶりに週末外出でございます。 今からワクワクが止まらない! ffでお馴染みの絵が間近で見られるかと思うと、テンションが上がってしまいます。 あ、ffってファイナルファンタジーの略です。って、皆知ってるか。 さて、...

javascriptカテゴリの最新記事