📱
PWAでネイティブアプリ風にしたい
PWAというものの存在を知ったので、この技術を使った開発をしてみたいと思い、調べた結果のまとめです。
こんな人に読んで欲しい
- PWAについて知りたい人
- ネイティブアプリっぽいものを作ってみたい人
PWAとは？
PWA(プログレッシブウェブアプリ)とは、Webサイトをまるでネイティブアプリのように使えるようにする技術のことです。
ネイティブアプリのようにスマホの画面に追加してプッシュ通知等ができたらいいな、でもアプリ開発って何だか難しそうだし、ダウンロード数を競うわけでもないし、複雑な機能もいらないんだよな～といった場合の選択肢となる技術なのです。
PWAでできること
PWAの特徴として、以下が挙げられていました。
- プッシュ通知（機種によっては制限があるようです）
- オフライン動作（キャッシュ機能）
- 常に最新（アプリではないのでアップデートの必要がない）
PWAのメリット
ネイティブアプリではなくPWAを選択した場合、以下のようなメリットがあると考えられます。
- アプリストアの審査不要
ネイティブアプリの場合審査を受ける必要がありますが、PWAはWebサイトなので審査不要です。このため、登録費用や審査準備の手間を省くことができます。 - iOSとAndroid両方のデバイスで使える
ネイティブアプリの場合、iOS、Androidそれぞれのアプリストアからインストールしてもらう必要がありますが、PWAの場合、Webサイトからスマホのホーム画面にアイコンを追加するので、デバイスに依存しません。 - 学習コストの削減
WebアプリにPWAの機能を追加するだけなので、アプリ開発言語やFlutterなどを学習する必要はありません。 - デバイスのストレージの節約
ネイティブアプリに比べてストレージをあまり消費しないので、ストレージに余裕がないユーザーにも使ってもらえる可能性が高まるのではないかと思います。（私はそれでアプリのインストールをためらうことがあるので）
PWAのデメリット
PWAを選択した場合、以下のようなデメリットも考えられます。
- 機能の制限
GPSなどデバイス固有の高度な機能へのアクセスは制限される可能性があります。 - iOSとAndroidで差異が生じる可能性がある
iOSの方がどちらかというと制約があるようで、差異を把握してユーザーに設定を促す必要が出てくる可能性があります。 - ユーザーが慣れていない
アプリストアからインストールが一般的なので、導入に戸惑うユーザーも想定されます。 - 収益化の制限
アプリストアを通さないため、アプリのプラットフォームが提供する広告ネットワークや決済システムに依存するビジネスモデルと相性が悪い場合があるそうです。アプリストアからの集客も見込めないため、収益化は難しくなるかもしれません。
こんな人にはおすすめ
上記のようなメリット・デメリットがありますが、「ひとまずネイティブアプリ風のものを作ってみたい」という人にはとてもいい技術なのではないでしょうか。
PWA対応サイトからスマホにアイコン追加してみる
せっかくZennで記事を書いているので、Zennを追加できるか試してみました。自分のiPhone（Safari）でZennのアイコンを追加してみます。
- 下のアイコンをタップ
- ホーム画面に追加
- 「追加」をタップ
上記の手順で追加することができました！
どうやってPWAを始めるか
私は普段Nuxt.jsを使うことが多いのですが、NuxtだとPWAモジュールがあるので導入しやすいと思われます。NuxtではなくてもVue.js、React、Next.jsなどで導入は可能なようです。
まとめ
PWAについて調べてみて、ネイティブアプリ風にするには手軽でいいなと思いました。ホーム画面に追加もとても簡単でした。この技術を使って開発をやってみようと思います。
Discussion