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


関連記事

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

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

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

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

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

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

名前しか知らなかったクリエイティブ・コモンズライセンスを調べてみる

1 はじめに2 クリエイティブ・コモンズとは3 種類3.1 表示(CC BY)3.2 表示—継承(CC BY-SA)3.3 表示—改変禁止(CC BY-ND)3.4 表示—非営利(CC BY-NC)3 ...

Lottieを使ってみたい

1 はじめに2 概要3 実例4 さいごに はじめに AirbnbDesignからAfter Effectsで作成したアニメーションをレンダリングして、iOS・Android・React Native向 ...

フォロー

follow us in feedly

page_side_300rect

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

アプリ情報

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