PWAとガワネイティブの違い
ずっとふわふわした理解だったので、調べました。
なおこの記事はiOSDC 2022で
こちらのセッションを見たことがきっかけで書いています。
メインテーマはPWAとガワネイティブの違いがよくわかってなかったので、そこについて書きます。
ただ記事書くにあたり、他に混同しやすいワードも触れといた方がいい気がしたので、最後にネイティブアプリ、ハイブリットアプリ、クロスプラットフォームアプリについても軽くだけ触れます。
PWAとは
Progressive Web Appの略です。
概念としては、「Webサイト/Webアプリをモバイル端末のブラウザで起動したときに、モバイルアプリとして振る舞うアプリケーション」です。
「Webアプリでもあり、モバイルアプリでもある」という性質を持っています。
App StoreやGoogle Play Storeで配布するのではなく、URLさえ知っていればユーザーが利用可能になります。
歴史的には、2016年にGoogleが正式発表したもので、そこから各プラットフォームで広がっていきました。
Googleが発表した、と言っても別に規格化を主導しているわけではないようで、どうも正式規格がきっちりつくられているわけではなく、
「正式な標準ではありませんが、有用なデザインパターンです」と紹介されています。
個人的には、この辺の曖昧感が、PWAの理解を妨げていたような気がします。
Spotifyの例
対応している具体例を見るのが一番はやいと思うんですが、PWAを採用している大手サービスの代表例がSpotifyとTwitterです。
Spotifyの方を見てみましょう。
SpotifyはApp Storeにネイティブアプリも公開してて、PWAで使ってるユーザーがどのぐらい存在するのかは知りませんが、とにかくPWAを採用してます。
こちらのURLを、iPhoneのSafariで開いて、ブックマークします。
ホーム画面にアイコンが出ました。
タップしてみると……
はい。
このようにSafariではなく、まるでネイティブアプリかのように開きます。
（アドレスバーなどが表示されていません）
各OS/各ブラウザごとにPWAへの対応状況が違うので、もし本気でサービス提供しようとなると環境差異に悩まされそうな気がします。
ちなみにPWAを採用しているサービスは、MacOSでもアプリとしてインストールできるので、この記事をPCから見てる方は試してみてください。
MacOSならChromeでも落とせます（iOSだとSafari限定）。
PWAより一般的な対応
Webページのモバイル対応のメイン方法として、
スマートフォンのWebブラウザでいい感じに表示されるように、PCサイトとSPサイトをわける、というのが一般的です。
スマホ向けの小さな画面でも見やすいように、情報量を減らしたページをつくる、というものですね。
SPはSmartPhoneの意、らしいです。
最近だとレスポンシブデザインという概念が一般的になってきて、明確にモバイル向けをわけてない方が多いかもですね。
端末の横幅を見て、いい感じにデザインするのがレスポンシブデザインです。
一般的には、PWAじゃなくて、こっちで対応してるのがほとんどだと思います。
スマートフォンの普及初期は、見づらいWebサイト多かったですけど、今はそういうサイトってほとんどなくなったような気がします。
それもあって、「別にモバイル環境でもWebブラウザでよくね？」というのは、正直個人的には思うところではあります。
この辺の感覚は個人差ありそうですね。
ガワネイティブ
PWAは「Webアプリをモバイルアプリとしても動かす」という思想でした。
これと「ガワネイティブ」というワードで、僕はよく混乱していました。
ガワネイティブは、WebViewを使って、Webサイトを表示するだけのモバイルアプリです。
あくまで俗称ですので、ガワアプリなどの呼び方もあります。
ガワ（見た目）はネイティブアプリだけど、中身はただのWebサイトなので、この呼び方になってます。
モバイルアプリでも、WebViewという仕組みを使うと、Webサイトが表示できるので、実質Webブラウザ立ち上げてるのと一緒のことができます。
URLが表示されないとか、ブックマークができないとか、その辺の差ぐらいですかね。
iOS/Androidの開発コストを下げたいけど、ネイティブアプリとして提供したいときの一つの選択肢です。
飲食チェーン店のメニューと営業時間載ってるだけのアプリなんかは、正直このレベルでいいだろと個人的には思ったりはします。
App Storeだと、審査ガイドラインに4.2 Minimum Functionality という基準があるので、あまりにガワネイティブすぎると落とされると思われます。
PWAとガワネイティブの違いをまとめる
ここで一旦PWAとガワネイティブの違いをまとめます。
PWAもガワネイティブも、ネイティブアプリの工数を下げて、Webサイト/アプリを動かしたいというモチベーションは一緒です。
重要な違いをまとめると、下記の3点になるかと思います。
PWA: URLベースで提供できる / 実体はWebアプリ / 動作するかはOS・ブラウザの対応に依存
ガワネイティブ: Storeを通じて提供される / 実体はモバイルアプリ（WebView） / 審査に通るかは疑問
おまけ: その他の混同しやすそうなワード紹介
以上で書きたかったことは終わりなんですが、ついでに混同しやすいやつを軽くだけ書いていきます。
ネイティブアプリ
iOSならApple提供のSDK、AndroidならGoogle提供のSDKで開発したものをネイティブアプリと呼びます。
PWAや後述するクロスプラットフォームアプリなどの「ネイティブじゃない」存在が出てきたので、生まれた言葉ですね。
ハイブリットアプリ
これ実質的に死んでる技術のようにも見えるんですが、このラインナップだと混乱しそうなので、一応軽くだけ調べました。
Webアプリとして開発したものを、モバイル環境向けにも提供できる……というものなんですが、
後述するクロスプラットフォームと違って、ほぼWebViewベースのモバイルアプリが生成されるみたいです。
Webアプリさえつくってしまえば、ガワネイティブのアプリを生成するのは開発フレームワークの中でできる、というのがウリだったみたいです。
ApacheがOSSとして提供してる、「Cordova」というのが有名みたいです。
クロスプラットフォームアプリ
２０２２年現在、iOS開発者である僕が勢いを感じているのがこちらのクロスプラットフォームアプリです。
こちらはWebアプリではなく、その開発フレームワーク向けに開発することになります。
それをiOS/Android/Webにそれぞれ生成して、提供する形になります。
Flutter, React Native, Xamarinなどが有名どころです。
トレンドとしては明らかにFlutterがアツいので、とりあえずFlutterを検討すればいいと思います。
FlutterならDartという言語で開発することになります。
ハイブリットアプリと比べると、動作は軽量で、使えるネイティブ機能も多いです。
Flutter自体はOSSで、アップデートが頻繁にあるのも嬉しいですね。
単純に「iOS/Android両プラットフォームで開発するのめんどくさいなあ」という問題の解決策になりうると思います。
まとめ
簡単に各技術スタックの差異をまとめました。
上から順にトレンドがアツい順（完全主観）になっています。
| アプリ開発方法 | 提供方法 | 実体 | 技術スタック |
|---|---|---|---|
| ネイティブ | Store | モバイルアプリ | iOS/Android公式SDK |
| クロスプラットフォーム | Store | モバイルアプリ | フレームワーク依存 |
| PWA | URL | Webアプリ | Web技術 |
| ガワネイティブ | Store | モバイルアプリ | Web技術 + WebView |
| ハイブリット | Store | モバイルアプリ | Web技術 + フレームワーク |
この記事が何かのお役に立てば幸いです。
（了）
Discussion