2018/04/25更新

[フロントエンド] PWA勉強会で使ったスライドを公開します

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
先日にPWA Beginners 勉強会 #2で話してきたので、そのスライドをブログで公開します。
PWAについてざっくりまとめてみた
https://www.dropbox.com/s/z8hkuzg9egush6u/1803_PWA%E5%8B%89%E5%BC%B7%E4%BC%9A.pdf



PWAへの理解に苦しんだ

PWAとはProgressive Web Appsの略ですが、最初にそれに触れた時にはしっくり理解できませんでした。Service Worker や Web App Manifest といった技術要素があったり、Progressive、Engaging、Fast、Reliable、といった用語があったりと、それらを概念的に理解するための枠組みが頭の中に作れずに、四苦八苦していたと思います。その考えをまとめるためにも、Web上の資料などを読み漁ってLTにまとめました。

まとめて見るとすんなりと理解することができました。PWAは今のWebから1歩進んだ(=便利になった)ものを作ろうよ、という枠組みであり、便利なこととは具体的には、「オフライン対応」や「ホーム画面からの起動」といった要素があることがわかりました。

もう少しPWAの文脈に沿っていえば、最上位概念にPWAというものがあり、PWAは、Engaging(=ユーザー満足度の向上)、Fast(=サクサク使える)、Reliable(=信頼のおけるアプリ)、という3つの要素から構成されるということが分かりました。

そしてその3つの要素の具体的な手段として、オフライン対応やPush通知、ホーム画面の獲得、といった要素があり、それらを実現する技術要素として、Service Worker や Web App Manifest があるのだと理解しました。

今考えれば当たり前のところですが、目的と手段を区別しながらPWAを捉えると、すんなり理解できたということです。



PWAを学ぶには

Udacityの無料動画がおすすめです(英語です)。目的の説明が最初の動画にあり、そのあとにPWAの構成要素の説明や具体的な技術の説明が続きます。

https://www.udacity.com/progressive-web-apps



PWAと世間

僕の周りの反応に限った話ですが、Web界隈の非エンジニアの人たちも口にする機会が増えて来たと思います。他の業界の人たちと話すと知らない人がほとんどですが、認知が広がれば沢山のビジネスチャンスが増えて楽しそうです。PWAはユーザーのエンゲージメントを劇的に改善できる可能性があり、それが社会を変えていく要素になるかなと思います。



最後に

iOSのSafariでもService Workerが利用可能になったり、Windows10のストアでPWAアプリが配布可能になったりと、PWAはかなり盛り上がっています。2018年をPWA元年と言っている人たちもいます。また、ChromeのディベロッパーツールでApplicationタブの中でServiceWorkerの内容を確認することができます。自分がよく使うサイトで、どこがService Workerを使っているのかなをチェックできるので、面白いです。

最後になりますが本ブログでは、フロントエンド、サーバー、Swift、PHP、Node.js、Python、Java、Linux、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。