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

2019/05/31 2019/05/31 #javascript #PWA #モバイルアプリ #Android

PWAとは?

皆さんPWAご存知でしょうか?去年くらいから流行りだしたあの技術をですね!
実はこのサイトもPWA対応しています。
PWA(Progressive Web Apps)とは技術やライブラリではなくただのWEBサイトです。
Googleが定める要素を備えたWebサイトをPWAと呼びます。私個人の感覚ではありますが、この辺を勘違いしている人が多いと思います。

です。

まだお試し機能しか実装していませんが、だいたいこんなイメージで動作します。
Screenshot_20190713-095112.png

PWAで何ができるの?

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

代表例はこちら

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

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

特徴

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

メリット

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

デメリット

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

使ってみた所感

スクリーンショット 2019-07-14 16.51.06.png

スクリーンショット 2019-07-14 16.51.14.png

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

はご存知でしょうか。
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のメリットを引き出すことができれば、ユーザーの皆様のためになるでしょう。
でもその一歩として、「とりあえず入れちゃう」のも悪くはないかもしれませんね。

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm