Works by

Ren's blog

@rennnosuke_rk 技術ブログです

PWAとは

ちょっと乗り遅れた感じありますが、PWAのメモ。

PWAとは

Progressive Web Applicationの略で、2016年にGoogleが提唱しました。
Webブラウザ上のアプリをあたかもネイティブのアプリのように動作させることで、
より良いユーザ体験を提供しようというものです。

twitterAndroid上のChromeで開き、メニューの「ホーム画面に追加」をタップすると、
普通のネイティブアプリのようにPWA製「Twitter Lite」がインストールされます。
このように、PWAはストアを介さず軽快にインストールできるという特徴を持ちます。

f:id:rennnosukesann:20180321235650p:plain:w250 f:id:rennnosukesann:20180321235700p:plain:w250 f:id:rennnosukesann:20180321235711p:plain:w250

なぜPWAが良いのか

PWAが推進される理由として、以下のような特徴が挙げられます。

段階的(Progressive)

プログレッシブ・エンハンスメントという考え方があります。
最先端のブラウザに合わせた高級な実装をデフォルトとしつつ、一部機能をサポートしていないブラウザなどにもコンテンツが損なわれないような実装を行い、サポートされていくに従ってよりリッチな実装にしていく・・・というものです。
PWAはこの考え方を踏襲しており、全てのユーザに利用してもらえるアプリケーション作成を意識しています。

レスポンシブ

今でこそ当たり前ですが、PWAもブラウザ・デスクトップ・モバイル等どんな環境でも最適なUI/UXを提供することを念頭においています。

ネットワーク接続状況から独立した動作

後述のService Workerがローカルで動くプロキシのような役割をすることで、オフラインやネットワーク環境の良くないところでもユーザ体験を損なうことなく動作します。

ネイティブアプリ感覚

あたかもネイティブアプリのように操作できます。
これは後述のApp Shellモデルに基づく実装によって実現します。

最新の状態を維持

後述のService Workerの更新プロセスによって、
コンテンツの状態は常に最新に保たれます。

安全

HTTPS経由の通信のみ許可します。そのため、経路上での盗聴に対して頑強です。

検索が容易

プログレッシブ・エンハンスメントに従っていること、後述のService Workerによる登録スコープによって、検索エンジン上で検索対象とすることができます。

再エンゲージメント可能

プッシュ通知のような機能を実装可能で、それを通じてユーザにアプリを使用して貰う機会を増やすことができます。

インストール可能

ストアを介さず、ユーザは気に入ったPWAをそのままローカルに保持しておくことができます。

リンク可

あくまでWeb上のアプリなので、URLで簡単に共有できます。

PWAを構成する概念

App Shellモデル

App ShellモデルはPWAを構築する手法です。
ユーザインタフェースが機能するために必要な最低限のHTML,CSS,JavaScriptをまとめて「シェル」とし、シェルをキャッシュすることでオフラインでのアプリ利用を可能にします。

シェルはコンテンツ、すなわち文章や画像を含みません。あくまでシェルはUIの骨格のみを含み、データは保持しません。従って、ネットワークでやり取りされるのはデータの部分のみとなり、高いパフォーマンスでアプリを動作させることができます。

Service Worker

PWAのバックグラウンドで実行されるスクリプトで、Webページやユーザのインタラクションを必要としない機能を提供します。 現在、Service Workerはプッシュ通知とバックグラウンド同期をサポートしています。また以下のような特徴を持ちます。

  • プレゼンテーションのDOMに直接アクセス不可能。

  • プログラム可能なネットワークプロキシである。ページからのネットワークリクエスト/レスポンスをキャッシュしたりできる。

  • Webページとは異なるライフサイクルで動作する。 アプリが終了してもバックグラウンドで動き続ける場合がある。

  • JavaScriptのPromiseを多用する。

このService Workerのお陰で、アプリがオフラインでも快適に動作することを可能になり、
コンテンツを自動更新し、プッシュ通知を実装することが可能になるようです。


後日各構成要素について掘り下げる予定。

間違っている箇所があればご指摘頂けると幸いです。

参考文献

はじめてのプログレッシブ ウェブアプリ  |  Web  |  Google Developers

App Shell モデル  |  Web  |  Google Developers

qiita.com

qiita.com