日本Androidの会　2018年3月定例会「クロスプラットフォーム開発最前線2018」での講演資料です。 Android版のChromeでは既に実装されていたPWA（Progressive Web Apps）ですが、 Microsoft（Windows10 - Edge）、Apple（iOS/MacOS - Safari）が相次いで対応を アナウンスしています。 大多数のプラットフォームで稼働するようになるPWAは、これまでと違った形の、Web サイトを起点とする「クロスプラットフォーム」アプリの形とも言えます。 日本Androidの会では、Web Working Group の活動として、「PWAに備える3ヶ月」 と題し、みなさんが今夏までにPWAへの準備を整えられるような集中勉強会を開催します。 本講演では、PWAについての基本的なご紹介を中心にお話しをさせていただきます。

1. PWA がたぶんくる
2018/03/14
Ryunosuke Shindo

2. 自己紹介
進藤 龍之介
エンジニア
日本Androidの会（NPO理事／コミュニティ運営委員）
しいたけ菌床販売【NEW】

3. Progressive Web Apps
Web Application
→ ブラウザで動くアプリケーション、
Webサイト
Progressive Web Apps
→ どのへんがProgressive？
・よりアプリケーションっぽく
・Service Worker の活用

4. What is a Progressive Web App?
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
App-like - Feels like an app, because the app shell model separates the application functionality from application content .
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search
engines to find it.
Re-engageable - Makes re-engagement easy through features like push notifications.
Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable - Easily share the application via URL, does not require complex installation.
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
「はじめてのプログレッシブウェブアプリ」より

5. クロスプラットフォームアプリとの違い
クロスプラットフォーム
開発資源を共通化しつつ各プラットフォーム向けにコンパイル
アプリストアから配布
PWA
ブラウザアプリ（Webアプリ）をインストールしてオフライン実行
Webサイトにアップロードして配布

6. ストアを経由しない、Webから直接インストール。
この入り口の違いはメリット？デメリット？

7. いいとこどり
Webのいいとこ
◦ Webの検索結果に載る
◦ 更新が容易
◦ 低コスト
◦ 既存のWebコンテンツ資産
アプリのいいとこ
◦ 高速な動作
◦ オフラインで動く
◦ Push通知
◦ ホーム画面にアイコン

8. PWA の構成
既存サイトを「対応」させるだけなら
ほんのひと手間加えるだけ

9. インストール発生条件
https
５分以上間隔を空けて、２回目以降のアクセス
Manifest，Service Workerが存在する

13. 動作概要
キャッシュとオンラインコンテンツをService Workerが仲立ち
Cache
Online
Service Worker

14. ファイル構成
コンテンツ/アセット
◦ HTML/CSS/JS
◦ 画像、アイコン
◦ データ
manifest
◦ json
service worker
◦ JS

15. コンテンツ / アセット
ResponsiveならWebサイトそのままでもとりあえずOK
キャッシュするもの、しないもの
アイコンはお忘れなく
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(function() { console.log('Service
Worker Registered'); });
}
※Service Workerのインストールを追記

16. Manifest
jsonで記述
各種設定項目
アイコン、スプラッシュ、背景色、テーマカラー、縦横表示、など
{
"name": "Weather",
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {

17. Service Worker
キャッシュの制御、Push通知、バックグラウンド処理
var filesToCache = [
'/',
'/index.html',
'/scripts/app.js',
'/images/sleet.png',
'/images/snow.png',
'/images/thunderstorm.png',
'/images/wind.png’
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});

18. PWA化
サイトそのまんまでも、今フルHTTPSサイトなら
Manifest
Service Worker
を追加したらとりあえずPWA化

19. Wordpressプラグインも増えてきた
汎用的なプラグインでかゆいところに手が届くかはまだなんとも・・・

20. PWA への対応状況
さくっと全ての環境が揃うかというと・・・

21. 現在PWA に対応するプラットフォーム
https://caniuse.com/#search=Service%20Worker

22. 次期 Safari の対応は
日本でのインパクト大
日本ではiOSのシェアが高いのでSafariの対応によって対応環境の割合が
飛躍的にアップ！
皆さんのサイト、Analyticsでチェックしてみましょう。

23. 75.41
43.12
12.6
37.09
11.99
19.79
GLOBAL
JAPAN
Global Japan
対応済 75.41 43.12
次期対応 12.6 37.09
未対応 11.99 19.79
SERVICE WORKER 対応状況
対応済 次期対応 未対応

24. 対応させる価値アリ！？
Japan：43.12% → 80.21%
Global：75.41% → 88.01%

25. 使えるAPIの違いには注意

26. Safari, Pushどうなる？

27. まだ未確定要素は多いけど
ひとつでもメリットの享受ができるのなら対応を検討する価値はある
表示が速いよ！
ホーム画面にアイコンが持てるよ！
オフラインでもキャッシュが使えるよ！

28. IO2016で紹介された事例

29. 各社の動向に注目
Microsoft Build
5/7～9
Apple WWDC
6/4～8
※ちなみに日本Androidの会 ABC 2018 Spring
はおそらく WWDC の直後ぐらい

30. コンテンツマイニング
既存コンテンツの見直し
埋もれた魅力的なコンテンツの発掘
発信した情報をより確実に届ける（Push）
制作者には既存サイトを対応させる新しいビジネスチャンス

31. PWA勉強会
流行るかどうかより、流行らせてしまおう

32. PWA に備える 3 か月
日本Androidの会 Web Working Group（JAGWWG）再起動。
「PWA に備える 3 か月」開催決定！
https://goo.gl/EZXq7x
参加者はもちろん、イベント協力者も熱烈募集してます！

33. https://goo.gl/EZXq7x

34. 一緒に活動しませんか？
一緒に勉強会を開催したり、リサーチしたり、仲間を募集してます。
CodeLabsの和訳
ハンズオンの開催
勉強会での講演者
イベントの企画
リサーチ（人柱）
ぜひお声がけください！

35. ちょっと予告
人柱、やります。

36. ありがとうございました。
２６日、渋谷で会いましょう！