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が主流の日本では、これから本格的に浸透していく技術なのだろうなという印象です。

page_footer_300rect




page_footer_300rect




-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 ...

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

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

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

フォロー

follow us in feedly

page_side_300rect

2018年5月
« 4月 6月 »
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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