2018年11月14日水曜日

PWAって一体何? 実はWebサービスのアプリ化 表示も高速で安定

新たなアプリの形として、今話題のPWA(プログレッシブウェブアプリ)。日本でもPWAを採用する企業が出始めているようです。

PWAは、ブラウザで見る「Twitteer」や「Google フォト」などのWebサービスを、まるでデスクトップアプリのように扱うことができます。PWAは、ブラウザのエンジンを利用したアプリで、Googleが提唱し、Microsoftもプッシュしています。

PWAは、アドレスバーなしの単独ウィンドウで表示され、表示も高速で安定しており、、パソコン、スマホで普及しつつあります。

このPWA、サイトで調べてもチンプンカンプンでしたが、少し分かってきたので、現時点の内容で紹介します。なお、実際に使ってみると、あーなるほど、これがPWAかと分かります。今回、PWAのインストール方法を紹介しますので、ぜひ一度使ってみて下さい。

なお、実際に、「Twitter Lite」と「Google フォト」を使ってみましたが、ブラウザで使うより、表示が高速で、なかなか良いですね。



Progressive Web Apps(PWA)という用語は、2015年にGoogleのエンジニアが作りました。Chromeだけでなく、多くのWebブラウザでサポートされつつあります。

現在(2018年11月)、このPWAがサポートされているのは、「Twitter Lite」、「Google フォト」などの一部のWebサービスに限定されていますが、これから増えてくると思います。

また、ネイティブアプリはAndroidやiOSなど、OSに依存しているため、個別の対応が必要ですが、PWAはOSに依存せず、あくまでもWebサイト上で機能するので、OSごとの対応が必要なく開発の手間が省けるのも、これから普及する要因になると思います。


■■□―――――――――――――――――――□■■

PWA(Progressive Web Apps)の特徴

■■□―――――――――――――――――――□■■

①インストールが簡単
ブラウザで、PWA対応のWebページを開き、ホーム画面にインストールして、そこから起動可能。

②ネイティブアプリのように動作
アドレスバーといったWebブラウザーのUIを持たない(エンジンはWebブラウザーを利用している)。

③高速化とオフライン動作
バックグラウンド動作の仕組みを利用し、キャッシュを活用した高速化やオフライン動作、プッシュ通知を実現。

④アプリの安定性(主にネットワークが不安定なときの処理)
PWAではアプリの処理に関してきめ細かな制御ができ、その結果、アプリの動作も安定。たとえば、ネットワークが不安定な場合には状態が改善するまでリクエストを保留。

⑤常に最新
Webアプリケーションを更新すれば、PWAアプリも更新される。


■■□―――――――――――――――――――□■■

PWAのインストール方法(パソコン編)

■■□―――――――――――――――――――□■■

PWAを使う方法は、ブラウザChromeでWebサービスを開き、そこから、アプリとしてインストールして利用します。

①ChromeでPWA対応のWebページを開く

例:
 Twitter Lite https://mobile.twitter.com/home
 Google フォト https://photos.google.com/?hl=ja


②Chrome右上の[…]メニューを開き、[「***」をインストールしています]というメニューが表示されるので、これをクリック

③確認ダイアログが現れるので、[インストール]ボタンをクリック

④デスクトップにWebアプリケーションのショートカットが追加され、PWAが表示される(アドレスバーなしの単独ウィンドウで表示)




(注)[「***」をインストールしています]メニューが表示されない場合

“chrome:flags”画面で“Desktop PWA”という項目を検索し、”Desktop PWAs”の項目のオプション値を“Enabled”に切り替え、「Google Chrome」を再起動してみてください。

(注)PWAのアンインストール(Chromeのアプリ削除)

①Chromeの新しいタブで ”chrome://apps” を開きます。
②アプリを右クリックして [Chrome から削除] を選択します。
③アプリを削除するかどうかの確認メッセージが表示されます。[削除] をクリックします。


■■□―――――――――――――――――――□■■

PWAのインストール方法(スマホ:Android編)

■■□―――――――――――――――――――□■■

①ChromeでPWA対応のWebページを開き、画面下の[ホーム画面に***を追加]をタップ

②ホーム画面に追加の画面で[追加]をタップ

③ホーム画面にショートカットが追加され、PWAが利用可能



参考:

「Google Chrome 67」はデスクトップ“PWA”をサポート!……で、“PWA”って何? - やじうまの杜 - 窓の杜
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1129686.html

徹底解説!なぜ今PWA(プログレッシブウェブアプリ)が注目されているのか? | モナカプレス
https://press.monaca.io/bryan/1912

Windows 10 1803の新機能「PWA」とは? PWAのUWPアプリ化を試してみる:CodeZine(コードジン)
https://codezine.jp/article/detail/10837

アプリをインストールする、管理する - Chrome ウェブストア ヘルプ - https://support.google.com/chrome_webstore/answer/1053346?hl=ja