Progressive Web Apps (PWA) are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen and loads as a top-level, full screen experience.

Progressive Web Apps (PWA) はウェブとネイティブアプリのよいところを組み合わせたユーザエクスペリエンスを提供する概念である。ユーザにアプリをインストールさせなくとも、スマホにインストールされているブラウザのみで、ユーザとパブリッシャのリレーションを提供する。不安定なネットワークでも表示が高速になり、プッシュ通知やホームスクリーンへの追加機能も可能でフルスクリーンでのエクスペリエンスを実現できる。

Introduction to Progressive Web Apps (Robert Nyman)

https://developers.google.com/web/progressive-web-apps?hl=en

SLICE (cf. https://medium.com/google-developers/slice-the-web-c3edcc482598)

Secure : All domains are sand-boxed from each other and sites are sand-boxed away from the users machine. The user can go to any site and know they are safe.
Linkable : You can point to any page or piece of content just by sharing a URL
Indexable : Because you can link to anything, if public it can be discovered by any person or machine that can index it to make it universally discoverable to everyone.
Composable : Iframes and JavaScript allow us to quickly compose and embed new sites, apps and services just by dropping in some JS and hooking things together.
Ephemeral : There is nothing to install, you go to the page and interact with it, leave the page and when you do it stops taking up resources.

Chrome, Firefox, Edgeで対応。Safariの対応が普及への鍵。

Security for all (田中洋一郎)

PWAのSecurityに必要なHTTPS化の基礎的な話。

Instant loading (矢倉眞隆)

App Shell

https://developers.google.com/web/updates/2015/11/app-shell

Offline first experiences (北村英志)

Service Worker

Make it installable and engaging (Paul Kinlan)

TODO

Hey, look at me, I’m a notification (Pete LePage)

ウェブプッシュ通知を使った通知の方法。

効果的なプッシュに必要なこと:

timely (タイミング)
precise (正確性)
relevant (関連性/具体性)

プッシュ通知の許可を取るタイミングのハンドリング実装。

Putting the Progressive in Progressive Web Apps (Sam Thorogood)

事例: SUUMO における Progressive Web Apps の活用事例

SUUMO

下準備

これまでHTTPで提供していたようで、HTTPS対応が大変だった。HTTPS化するだけで1年かかった。

プッシュ通知

HSTS対応はこれから

HTTP/2もこれから

確かに大変そう

$ curl -sv https://smp.suumo.jp/ -o /dev/null
*   Trying 54.248.247.239...
* Connected to smp.suumo.jp (54.248.247.239) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256
* Server certificate: smp.suumo.jp
* Server certificate: Symantec Class 3 Secure Server CA - G4
* Server certificate: VeriSign Class 3 Public Primary Certification Authority - G5
> GET / HTTP/1.1
> Host: smp.suumo.jp
> Accept: */*
>
< HTTP/1.1 200 OK
< Cache-control: max-age=0, no-cache, no-store
< Content-Type: text/html; charset=UTF-8
< Date: Wed, 27 Apr 2016 xx:xx:xx GMT
< Pragma: no-cache
< Server: Apache
< Set-Cookie: PHPSESSID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx; expires=Wed, 27-Apr-2016 xx:xx:xx GMT; Max-Age=1800; path=/
< Set-Cookie: smp_rd=https%3A%2F%2Fsmp.suumo.jp%2F; expires=Sat, 25-Apr-2026 xx:xx:xx GMT; Max-Age=315360000; path=/
< Set-Cookie: bannerTopAppFlg=1; expires=Wed, 27-Apr-2016 xx:xx:xx GMT; Max-Age=1800; path=/
< Vary: Accept-Encoding
< X-Mod-Pagespeed: 1.9.32.14-0
< Content-Length: xxxx
< Connection: keep-alive
<
{ [XXXX bytes data]
* Connection #0 to host smp.suumo.jp left intact

manifest.json

https://smp.suumo.jp/manifest.json は実装済み:

{
	"lang": "ja",
	"name": "SUUMO",
	"short_name": "SUUMO",
	"icons": [{
		"src": "/launcher-icon-3x.png",
		"sizes": "144x144",
		"type": "image/png"
	}, {
		"src": "/splashscreen-icon-192x192.png",
		"sizes": "192x192",
		"type": "image/png"
	}, {
		"src": "/splashscreen-icon-256x256.png",
		"sizes": "256x256",
		"type": "image/png"
	}, {
		"src": "/splashscreen-icon-384x384.png",
		"sizes": "384x384",
		"type": "image/png"
	}, {
		"src": "/splashscreen-icon-512x512.png",
		"sizes": "512x512",
		"type": "image/png"
	}],
	"background_color": "#ffffff",
	"theme_color": "#ffffff",
	"start_url": "/apps/homescreen/",
	"display": "standalone",
	"gcm_sender_id": "926788163944"
}

Better mobile experience with AMP

AMP, Accelerated Mobile Pages Project 対応について。

ref.

ハッシュタグ

#GDSTokyo (Twitter#GDSTokyo)

過去のGDSTokyo開催

Google Developers Summit Tokyo April 9th
- https://events.withgoogle.com/gdstokyo-201501/

Android (Google Developers Summit Tokyo 2016 Day 1)

Android Nを含むAndroidセッションについては、以下の記事などが参考になりそう。