PWA Night CONFERENCE 2020 参加レポート #pwanight
参加してきたので感想や、資料などをまとめていきたいと思います
PWA Night CONFERENCE 2020
PWA Night はPWAのコミュニティで毎月? イベントをやっています
PWA NightはPWAに関わるすべての方のためのコミュニティです
僕も何回か参加したり、登壇したりしたことがあります
毎月イベント開催するのすごいなと思ってますが、更にこんな大きいイベントもするなんてすごいなと思います
基調講演 ： Edge of the web
いろいろな新しいAPIや技術の紹介で、上記にURLがまとまっています
TWA (Trusted Web Activities)
PWA をGoogle Play Storeで配信できるようにする技術（たぶん）
Google Developers Japan: Trusted Web Activity のご紹介
Project Fugu
ふぐのように毒があるか美味しい機能（まだ実験段階の機能でセキュリティリスクなどあり）という意味で、Project Fugu だったような気が🐡
Web Capabilities (Fugu) - The Chromium Projects
公開されいているスプレッドシートにリストがある
🐡 Chromium https://goo.gle/fugu-api-tracker - Google スプレッドシート
Origin Trials
まだ実験段階の機能を使って貰う代わりにフィードバックをもらうようなシステム（だと思う）
Badging API
ネイティブアプリのように通知のバッジをつけられるAPI
実装自体はメチャクチャ単純っぽい
// Set the badge const unreadCount = 24; navigator.setExperimentalAppBadge(unreadCount); // Clear the badge navigator.clearExperimentalAppBadge();
Shortcuts
ネイティブアプリにあるホーム画面のアイコンから直接アプリのいろんな画面？にいける機能
今の所 Edge だけで、Chrome は実装予定らしい
MSEdgeExplainers/explainer.md at master · MicrosoftEdge/MSEdgeExplainers · GitHub
mafifest.json に追加するだけっぽいので、これも実装は簡単そう
"shortcuts": [ { "name": "Play Later", "description": "View the list of podcasts you saved for later", "url": "/play-later", "icons": [ { "src": "/icons/play-later.svg", "type": "image/svg+xml", "purpose": "any" } ] }, { "name": "Subscriptions", "description": "View the list of podcasts you listen to", "url": "/subscriptions", "icons": [ { "src": "/icons/subscriptions.svg", "type": "image/svg+xml", "purpose": "any" } ] }, ]
Web Share
ネイティブアプリのようにシェア先の一覧を出すAPI
Share like a native app with the Web Share API
シェアするときは下記の様な実装っぽく、 share() を叩くと（たぶん）シェア先一覧のリストが出てくるんだと思う
今までは自分たちで似たようなシェア先モーダルを作っていたがそれが不要になるっぽい
if (navigator.share) { navigator.share({ title: 'web.dev', text: 'Check out web.dev.', url: 'https://web.dev/', }) .then(() => console.log('Successful share')) .catch((error) => console.log('Error sharing', error)); }
Web Share Target API
ネイティブアプリのように PWA に対してシェアが可能になるAPI
Receiving shared data with the Web Share Target API
manifest.json に追加するだけで、自動的に検知されるっぽい？
"share_target": { "action": "/share-target/", "method": "GET", "params": { "title": "title", "text": "text", "url": "url" } }
SMS Receiver API
SMS 認証のAPI
インドはほとんど電話番号で認証をするとのこと
Verify phone numbers on the web with the SMS Receiver API
こんな感じで受け取れるっぽい
const sms = await navigator.sms.receive(); const code = sms.content.match(/^[\s\S]*otp=([0-9]{6})[\s\S]*$/m)[1];
Clipboard API
テキストのコピーはもともとあったが、画像もコピーできるとのこと
Image support for the async clipboard API
テキストのコピペ
// copy await navigator.clipboard.writeText(location.href); // paste let text = await navigator.clipboard.readText();
画像のコピペ
セキュリティリスクがあるらしく権限周りの確認が必要とのこと
try { const imgURL = '/images/generic/file.png'; const data = await fetch(imgURL); const blob = await data.blob(); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]); console.log('Image copied.'); } catch(e) { console.error(e, e.message); }
Contact Picker
端末の連絡先を取得するAPI
こんな感じで取得できるらしい
ユーザーは連絡先一覧から任意の人を選択するようなフローで、全員を一気に取得ではないとのこと
const props = ['name', 'email', 'tel', 'address', 'icon']; const opts = {multiple: true}; try { const contacts = await navigator.contacts.select(props, opts); handleResults(contacts); } catch (ex) { // Handle any errors here. }
Native File System
ローカルのファイルを取得できるAPI
The Native File System API: Simplifying access to local files
chooseFileSystemEntries を呼べば、OSのファイル選択ダイアログが出てくるとのこと
let fileHandle; butOpenFile.addEventListener('click', async (e) => { fileHandle = await window.chooseFileSystemEntries(); const file = await fileHandle.getFile(); const contents = await file.text(); textArea.value = contents; });
書き込み処理
async function writeFile(fileHandle, contents) { // Create a writer (request permission if necessary). const writer = await fileHandle.createWriter(); // Write the full length of the contents await writer.write(0, contents); // Close the file and write the contents to disk await writer.close(); }
Web Authentication
FIDO Authentication | Google Identity Platform | Google Developers
なお、いらすとやにアクセストークンの絵を依頼したら書いてくれたらしいw
セキュリティキーのイラスト | かわいいフリー素材集 いらすとや
Cookie
先日話題になったCookieの話
Google Developers Japan: 新しい Cookie 設定 SameSite=None; Secure の準備を始めましょう
来週くらいには Chrome 80 が来るので準備をとのこと
MiniApp Standardization White Paper
最近中国とかで話題の MiniApp （スーパーアプリ）
MiniApp Standardization White Paper
中国で乱立してきたので標準化しようというのが中国のサービス同士で話題になっているらしい
PWA is just a branding. Believe in the "web"
最後の方のスライドに書かれていた言葉
ウェブを信じろ
スケーラブルPWA 〜こえのブログ最新事例〜
見てきました
何回かこえのブログの発表は聞いたりしたのですが、今回はスケーラブルにフォーカスをした発表でした
Single Origin を心がけ、SWのスコープやパーミッション、Cookieなどを扱いやすくしている
いろいろな端末に対応をするために polyfill で対応をしている
パフォーマンスにとても注力しており、いろいろなキャッシュ戦略で立ち向かっている
Faslty によるキャッシュ、SW によるキャッシュを効かせている
パフォーマンスはバジェットとして管理をしている
SpeedCurve などのデータと、実際のユーザーのデータを見ながら計測している
強豪より 20% ほど早くするのを目標にしている（20%の差があればユーザーは認知できるらしい）
ファイルサイズなどは PR などでチェックをして予算を突破したら、コードを減らせるか？機能を減らせるか？などフローに沿って対応していく
アクセシビリティにも色々力を入れており、キーボード操作やダークモードなどを対応している
Project Fugu も積極的に取り入れており、Web Share, Wake Lock (画面が自動で暗くなるのを制御できる), Native File System などなど
感想
パフォーマンスバジェットの容量エラーのときの対応フローがあるのは驚いた
Webでできる体験を考える会
こえのブログを見ていたので、こちらは見ていない
PWA で音ゲー？を作った人の発表
ツイッターを見ていたらどうやら音響機材？を持ってきていて、すごいことをしたらしい
また、暗号化の話やプッシュ通知の話や、ブロックチェーンみたいな話もあったらしい
こっちも聞きたかった😢
日経電子版のモバイル/PC版統合と今後の取り組み
日経電子版の高速化の話もよく聞きに行っているけど、今回はPC統合の話
SPはFastly + microservicesで作られていて、PCはモノリシックな状態
SPとPCで別の開発チームで、ドメイン知識が分散したりしてカオスな状態に
また、PCは10年以上保守をしているので結構ぼろぼろな状態
そこで、SPとPCを統合
第一弾はトップ画面
統合時に機能を色々削除
UI/UX 担当がかなり権限を持っており、ビジネスサイドと調整をして削っていった
今まで、 node.js + handlebars だったが、TS + Preact に置き換え
Pure JS だったクライアント側は web components + TS に置き換えし、 SW は workbox を利用することに
PCも Fastly を通し、トップだけSPに、他は今までのPCのアーキテクチャにルーティング
無事リリースしたが、パフォーマンススコアが70くらいで、思ったより成果が出なかった（80以上を目指していた）
リリースはゴールではなく、スタートだった
SW がSPとPCの両方を見るようになり、カオスに
パフォーマンスモニタリングを強化（SpeedCurve に加えて、Lighthouse CI）
開発時の push などで Lighthouse CI を回し、本番は今まで通り SpeedCurve を利用
チューニングは泥臭く、Resource hints や使われてないJS・CSSの削除などを行った
トップにある記事を SW でキャッシュしていが、ユーザーがキャッシュした記事を見ないことが多く、無駄にキャッシュをしていた
CTRに基づきキャッシュする記事を変えるようにして、キャッシュヒット率を高めた
ユーザー体験を高めるために、ユーザーは何が嬉しいかを一番に考え常に動く
ScrapboxでのServiceWorkerとCacheの活用
日経電子版の発表を見ていたので見れていない😢
キャッシュ戦略の話がメインで、CacheStorage の話も
CacheStorage は自分もよく調べていたりしたり、発表をしたこともあったのでとても気になる 👀
Why PWA should be on strategy map for eCommerce companies in 2020.
事前に収録されたビデオを放送するというスタイル
日本語字幕があって、英語がわからなくても大丈夫だった
Vue Storefront というEコマースのオープンソース
名前にある Vue は Vue.js で作られているからっぽい
Eコマースの75%はモバイルで、速さにとても注力している
デスクトップをしらないモバイルを使う子供も増えてきた
端末が大きくなってきたので、親指で使えるところに一番大事なボタンを置くようにした
ヘッダーのハンバーガーメニューとかは遠すぎて使いづらい
アニメーションを多用して、楽しい・面白いサイトとの認識してもらって滞在時間を長くする
バーコードリーダーを搭載しており、店舗で見て、バーコードを読み取り、サイトで買うという流れを作っているっぽい
Eコマースではチャットボットがより流行り、CSはどんどん減っていくと予想している
購入時も簡単にアニメーションで楽しませる
しかし購入時のクレジットカード入力はモバイルで難しいので、Payment Request API で解決する
AMPも利用している
オフライン状態でもカートに商品を入れて、決済までいける（決済はオンライン状態で処理される
アレクサやグーグルホームにも対応している
サイトに対するエンゲージメントをPWAで高めるという考え
ランコムはPWAでCVを17%あげた
OLXは最エンゲージメントが250%アップ、離脱率を80%改善
アリババはCVが76％上がり、インストールしたユーザーは4倍CVした
UIライブラリも存在する
本も出しているらしい
PWA x PlayCanvasについて
Vue Storefront を見ていたので見れていない😢
本日発表させていただく、PlayCanvas x PWAについてという発表で公開させていただきます！
— はが (@Mxcn3) 2020年2月1日
その中で紹介させていただくデモがこちらになります！https://t.co/bXAW1IXhaZ#pwanight
スライドにつきましては、後日公開いたします！ pic.twitter.com/DpxitYfVfJ
ゲームと PWA
AMP + PWAで実現するストレスのないページロード
AMPキャッシュは別で考えたほうがとっつきやすい
Bento AMP で普通のサイトでも AMP Components が利用可能に
amp-script で JS を書いていく
amp-script は Web Worker で動き、DOMを触れるAPIを用意しているのでそれを利用する
AMP 用の SW もあるので PWA と親和性は高い
進化するHTTP
AMP の話を聞いていたので聞けていない😢
PWAに取り組む前に知っておきたいSPAとSEO
SEOの土台
・グーグルボットにクロールされること ・HTMLが適切に解釈されること
クロールされるのは sitemap とか内部リンクで頑張ろう
OGPがSEOの文脈で語られることが多い（関係ない）
Fetch as Google とグーグルのインデックスで検証した人がいる
Fetch as Google は５秒、グーグルのインデックスは２０秒待った
Google 的には5秒位らしい
Googleはサイトにアクセスをして、サイトをRender Queueに登録する
Render Queueは数時間から数週間かかる可能性がある
これはGoogleも課題に感じていおり、現在改善中とのこと
OGP取得の際はJSが動かないので、レンダリングされたものを返す必要がある
BOTとユーザーに別のコンテンツを返すのは本来アウトだが、ダイナミックレンダリングをGoogleが推奨している
自分たちのサイトの性質やエンジニアをみて、SSRするかSSGするかを考えるのがベスト
まもなくやってくるVue.js 3
SEOを聞いていたので見れていない😢
最近 Vue Composition API を使っているので聞きたかった！
Taking your web app offline (in a good sense)
workbox の話
地球で最大規模？のPWAのSLACKグループ
ここらへんでMACの電源が死んだ😭
Unlocking new capabilities for PWA
NFCが web にくる
デモ
コード
エンディング講演 ： PWA on Windows
www.slideshare.net
Edge の話
Windows は SW のキャッシュ上限なしらしいw
Microsoft Store ? からインストールする PWA はラップされており、Chromium ベースじゃないので要注意とのこと
PWA じゃなくても Edge は無理やりインストールができるらしい
まだまだ Edge にはバグが多いので気をつけようとのこと
LT
懇親会は参加していないのですが、LTがあったそうなので資料を貼っていきます
感想
PWAが話題になった当初はSWによる高速化、ホームスクリーン追加、プッシュ通知が話題になってたが、最近は Project Fugu をベースにいろいろなAPIがあり、本格的に Progressive に web を作ることができる気がしてきて、今後がとても楽しみです
最後に
PWA Night CONFERENCE 2020 お疲れ様でした！
とても楽しかったです！
