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


関連記事

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

サービスを作る時、最低限必要になりそうな利用規約の考え方

1 はじめに2 3大よくあるドキュメント2.1 利用規約2.2 プライバシーポリシー2.3 特定商取引法に基づく表記3 実装と絡めて考える4 ダメ利用規約の典型4.1 実効性4.2 違法性4.3 同意 ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

js

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

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

フォロー

blog-page_side_responsive

2018年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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