のんラボ

自分のサイトをサクッとPWA化!PWA解説編①

2019/05/31 2019/05/31 自分のサイトをサクッとPWA化!PWA解説編①

PWAとは?

皆さんPWAご存知でしょうか?去年くらいから流行りだしたあの技術をですね!

PWA(Progressive Web Apps)とは技術やライブラリではなくただのWEBサイトです。

Googleが定める要素を備えたWebサイトをPWAと呼びます。私個人の感覚ではありますが、この辺を勘違いしている人が多いと思います。

PWAで何ができるの?

これ気になるなる人多いと思います。
簡単に言ってしまうと、ネイティブ環境(OSのカードリーダー機能の読み込みなど)デバイスにアクセスする機能以外ならネイティブアプリと遜色ありません
javascriptには位置情報を取得する機能や、カメラにアクセスする機能、カードリーダーのライブラリまで揃っています。セキュリティ的にはともかく、そういったライブラリ群など使用すればネイティブアプリには近づけるといって遜色無いでしょう。

代表例はこちら

  • プッシュ通知機能
  • 位置情報取得機能
  • オフライン機能
  • SPAによるネイティブライクな画面実装
  • ゲーム用javascriptライブラリを使用したゲーム実装

などなど。
これらを踏まえて、特徴とメリット、デメリットを見ていきましょう。

特徴

  • スマートフォン上でモバイルアプリのような振る舞いを見せる
  • Service Worker機能(今度別記事で解説するとしましょう)の一つ「サイトのキャッシュ化」でオフラインでも使用することができる。
  • キャッシュ化されるの、表示が高速。
  • WEBプッシュ通知機能をService Workerなどが吸収してくれる。

メリット

  • Google PlayやApp Storeの認証を待つ必要がない。
  • キャッシュの利用により、WEBアプリでは困難とされてきたオフライン対応が簡単。
  • WEBの技術で可能なため、ネイティブアプリを作成するための勉強コストが0。

デメリット

  • Google PlayやApp Storeの強力なランキング機能や、あなたにおすすめ機能を使用できないため、新規ユーザーを獲得することが比較的困難。
  • 現在、iOSでは機能制限されているため、普及しているとは言い難い。

使ってみた所感

PWAハマりますねこれは。上の画像については別記事で触れるとしましょう。

Monacaはご存知でしょうか。

3年位前に私も使用してアプリをリリースしたことがあるんですが、これに似た感じですかね。

HTMLとjavascriptでネイティブアプリを作成できるだけでもすごかったのに、今ではそのように振る舞うことができるわけです。

特性上、フロント言語によるSPAやSSRとも相性が非常によく、これからの主流になっていくのではないでしょうか。

また、審査をクリアする必要がないので、早急なアップデートが可能だったり、時間を無駄にしなくて済むなど他にもメリットがたくさんあります。

以外に知らない人が多い印象

知人にこの話をすると割と「なにそれ?」と帰ってきます。一般人以外にもエンジニアに聞いても3分の2くらいはこの反応。フロントエンジニアの知人に聞いてようやく90%くらいの反応でした。

Google PlayやApp Storeが強すぎて「アプリ=OSのStoreからダウンロード」という印象になっていますね。
ゲームを探すときも、まずそこを開くイメージです。

対して、ソシャゲであるグランブルーファンタジーはWEB上で動作するゲームです。
これはPWA移行夢じゃないハズですね。こういったWEB上で動作しているゲームには美味しい話ではないでしょうか。

だんだん実用的になってきている

  • Firebase
    • FireStore(NoSQL化とも言い換えられます)
    • FCM(Firebase Cloud Messaging)
  • フロント言語の普及
    • Angular
    • React
    • Vue
      以上の技術が発展してきて、実用化に移っている起業も多数存在します

例えば??

  • Qiita
    エンジニアで見たこと無いって人はいるのでしょうか?組み込み言語の記事は少ないですが、緑色のあの画面を見たことがあるって人は多いではないでしょうか。
    こもPWAですね。
  • 日経新聞社
    正直かなり驚きました。新聞社などはこういう技術に疎いものだとおもっていたので、ネットの電子版記事を読もうとしたとき、「ホーム画面に追加」ボタンが出てきたときは感動しましたね。
  • Twitter Lite
    Twitterはアプリが有名過ぎてPWA側のアプリを知らない人は多いのでは無いでしょうか?

けど個人アプリ以外に活躍の場少なくない?

そういう風に考えることも昔はありました。 
大きい規模のWEBサービスだったりすると、オフライン化の対応だけでデスマになりそうです。

しかし最近その考えは無くなってきました。
オフライン対応はアプリチームがやっているようなものですし、大きい規模のWEBサービスでもドメイン管理をしていれば、PWAはすぐに可能です。PWAに規模は関係ありませんしね。SPAやSSRが必須というわけでもないので、普通にページ遷移してやればいいです。
オフライン対応も必須ではないので、できるところからコツコツとすることができます。

つまり、大きさや規模など考えなくても「導入するだけ」ならすぐにできます。
この敷居の低さが最大のメリットでもいいましょうか。

もちろんSPAやSSRを利用して、最大限のPWAのメリットを引き出すことができれば、ユーザーの皆様のためになるでしょう。
でもその一歩として、「とりあえず入れちゃう」のも悪くはないかもしれませんね。