PWAについて興味を持ちつつ、実際いろんな見解を目にしたり、事例がよくわからなかったりしたので、調べてまとめました。
(追記)
一部更新を行いましたが、もともと2018年の4月に書いた内容です。
そのため新しい情報が反映されていないこともあります。
PWAとは
Progressive Web Appsの略で、Googleのはじめてのプログレッシブ ウェブアプリによると下記の説明がされています。
ウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。
ざっとこんな感じの特徴があります。
- モバイルアプリの様なUI
- プッシュ通知
- オフラインで動作する
詳細に関しては先ほどのgoogleの記事か、いまさら聞けないPWAとAMPがとてもわかりやすいです。
PWAに関する記事は多く見つかったのですが、実際にはこれまた先ほどのgoogleのページに実践的な内容がまとまっているため、ここら辺を参考にするのがよいかと思います。
ウェブアプリへの Service Worker とオフラインの追加
ウェブアプリへのプッシュ通知の追加
英語ですがこちらも
Progressive Web App Checklist
(追記)
2019年のDroidkaigiの登壇資料で、PWAの説明とPWAでTikTokっぽいアプリを作ってGoogle Play Storeで公開をするところまでを説明してくれています。
PWAでここまでできる
なぜ今PWAなのか
2016年5月のGoogle I/Oの際には話題の中心だったそうです。
この時にはsafariが未対応であったため、Appleの動きが重要になるということはよく目にしてきました。
しかし最近の動向を見ると
2018/2/14の記事
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装
Appleが、iOSとmacOSの次バージョンにバンドルされるSafari 11.1で、Progressive Web Apps（PWA）の重要な構成要素であるService Workerをサポートすることが分かりました。
2018/4/7の記事
First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store
Microsoft is publishing new web-apps to its Store under its name. This is the first wave of PWAs for Windows 10.
このように徐々にPWAをサポートする動きが広まっていることから、今まさに注目を浴びているのではないかと思います。
また、勉強会の資料で東南アジアでのPWAの可能性という内容を読んだのですが、海外のニーズということも大きく影響があるのかもしれません。
こちらも東南アジアの現在の状況からPWAが東南アジアではニーズが高まるのではないかということが書いてあるので、海外にサービスを展開していく(している)場合には検討の余地があると思います。
さらにさらに追記です。
2019/1/31の記事
Google Play Store now open for Progressive Web Apps
Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store!
上記の記事は英語ですが、下記の記事は日本語でまとめてくれています。
Google Play StoreでPWAを配信できるらしい
いろいろな見解についても調べてみた
PWAが来るって言っているエンジニアは今すぐ辞めろ
グーグルのエバンジェリスト?のツイートに対する意見ですね。
結局PWAは来るの？来ないの？
そのグーグルの人が上の記事を読んでいろいろと説明をしてくれている。
PWAの将来性についての考察
PWAの課題とかWebへの影響とか。
事例
実際に導入してるところってどんなところがあるんだろうって思って調べてみたら、このサイトがよくまとまってました。
モバイルWebの高速表示＆アプリライクな操作性を実現する、AMP＆PWA導入サイト事例8選
もう少し中の人の話よりの事例だとここら辺がおすすめです。
pixiv chatstoryのPWA採用事例
リニューアルで表示を高速化させた「日経電子版のページ高速化とPWA対応」プロジェクトの舞台裏
とりあえず動かしてみたい人は
paizaのブログで紹介されていた、スプレッドシートのデータを読み込んでPWAとして公開ができるサービスをやってみたり
簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！
vuejsでもpwa用のテンプレートを用意してくれているので触ってみてはどうでしょうか(reactもあると思うけど使ったことないので知らないです)
vuejs-templates/pwa
ついでに
最近勉強会も活発になってきたイメージです。
connpassのPWA for beginnersやJapan Android GroupでもWeb Working Group 「PWAに備える３ヶ月」などをやってますね。
上記の勉強会は継続されていないようですが、新しく下記のシリーズもやっているようです。(勉強会で使った資料は参考になるかもしれないので残しておきます)
PWA Night vol.1 ～PWAのミライや活用方法をみんなで考えよう～
2019年2月定例会「CES報告会&SDL&最新PWA」