FrontEnd UI / UX

ざっとPWAの概要を調べてみる

投稿日:

はじめに

ここ最近、Android関連の勉強会の情報を眺めていると、PWA(ProgressiveWebApps)なる単語が目につくようになりました。
恥ずかしながら名前すら全く知らないものでしたので、少し調べてみました。

ProgressiveWebAppsとは

ネイティブアプリと同様の機能をブラウザでも実現し、モバイルのUXを向上させる仕組みで、2015年10月にChrome Dev Summitで初めて提唱されたものです。
オフラインでも動作する、プッシュ通知可能、webアプリなのでインストール不要、ホーム画面にアイコン設置可能、等々の特徴があります(もちろん他にも)。
単体の技術の名称ではなく、既存の技術の組み合わせによるコンセプトという解釈を私はしています。

iOSのSafariでは未対応の状態が続いていましたが、今年の3月29日にリリースされたiOS11.3でPWAへの対応が発表されました。
PWAが世に出て2年以上が経った今のタイミングで、PWAがにわかに取り沙汰されるようになったのは、iOSとAndroidの両方でPWAを使う下地が整ってきたことが一因かなと思います。

PWAに必要な技術

フロント側で実行されるスクリプトであり、サーバサイドのアーキテクチャは何でもよく、SPAかどうかも問われません。
なお前述の「iOSがPWAに対応した」というのは、正確には「iOS11.3に含まれるSafari11.1から、Service Workerが利用可能になった」ということのようです。
また、早くから対応していたAndroidに比べると、iOSではバグや未対応の機能があるようで、まだまだ今後に期待という段階でしょうか。

PWAとセットでよく出てくる「AMP」とは

AcceleratedMobilePagesの略で、モバイル環境でウェブページを高速化する仕組みです。
キャッシングの技術も含まれており、電波環境がまだ整っていない環境(2G・3G回線が主流の国もまだまだ多い)で特に威力を発揮します。
もちろん4Gが主流の日本でも大きな効果が見込め、2017年のGoogle I/OでPWAとAMPを導入した楽天レシピの成功事例が紹介されていました。

ネイティブアプリ vs PWA

PWAはブラウザで利用するものですので、例えばコンテンツをシェアするならURL共有で済み、導線としても検索エンジンからインストール無しでコンテンツにアクセスできます。
一方で、画像の加工や音声の出入力などを伴うサービスであれば、現状のブラウザでできることには限界があります。
このように、PWAとネイティブアプリはどちらが上位でどちらが下位というものではなく、提供するサービスやコンテンツの設計次第で、どちらの方法で提供するかを選択することになるのではないでしょうか。

さいごに

参考にさせていただいた記事のリンク一覧です。
今回の記事を書くにあたり「まずはWikipediaでも読んでざっくりと」と思い検索しましたが、2018年5月14日の時点で、日本語版にはPWAのページがありませんでした(英語版はもちろん存在)。
Wikipediaにページがあればメジャーだというわけではないですが、iOSが主流の日本では、これから本格的に浸透していく技術なのだろうなという印象です。

blog-page_footer_336




blog-page_footer_336




-FrontEnd, UI / UX

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

[Rails + Materialize] パンくずリスト用のヘルパーを作成した

1 はじめに2 パンくずリストを上書き2.1 サンプルのHTML2.2 CSSの上書き3 ヘルパーにする4 さいごに はじめに またまたMaterialize関連の記事になります。 Materiali ...

フォロー

blog-page_side_responsive

2018年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。