LoginSignup
1

More than 5 years have passed since last update.

Progressive Web Apps (Google Developers Summit Tokyo 2016 Day 2)

Last updated at Posted at 2016-04-27

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)

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

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 の活用事例

下準備

これまで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開催

Android (Google Developers Summit Tokyo 2016 Day 1)

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1