UI / UX FrontEnd

ざっと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_responsive




-UI / UX, FrontEnd

執筆者:


comment

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

CAPTCHA


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

フォロー

blog-page_side_responsive

2018年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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