NativeAppに近付ける
manifest.json
@kaa_a_zu
2021.12.15 | PWA Night
名前: かーず(@kaa_a_zu)
所属: 株式会社Gaudiy
得意: パフォーマンス改善
趣味: パスタ作り
manifest.jsonについて話します
(PWA化に必要な同じみなファイル
)
“今すぐに”
利用者にWebAppを
NativeAppだと勘違いさせたいエンジニアさん
こういう人に聞いていただきたい
利用者にWebAppを
NativeAppだと勘違いさせたいエンジニアさん
こういう人に聞いていただきたい
PWAとProject Fugu
PWA
①ユーザーが気に入るウェブ体験を提供するユ
ニークな機会を提供する
②最新のWeb機能を使用して機能と信頼性を強
化し、構築する
③単一のコードベースを使用して、誰でも、どこで
も、どのデバイスにでもインストールできるように
する
Fugu
①ウェブアプリケーションがネイティブアプリケーションにできることは何でもできるようにする
②ネイティブ・プラットフォームが持つ機能をユーザーのセキュリティを維持したまま、ウェブプラッ
トフォームを実現
③Web の基本的な考え方である、プライバシー、信頼、その他に配慮する
PWAとProject Fugu
コンセプトはかなり近しい
紹介すること
Project Fugu からShipされた(される) PWA API に
ついて3つの機能を紹介します
これを見て、WebAppだとわかるユーザーは(きっと)いません
ここから
よりProgressiveしていきます
機能①Rich Installer
● アプリのようなInstaller を表示
○ スクリーンショットが掲載できる
○ アプリの説明が掲載できる
参照: https://developer.chrome.com/en/blog/richer-pwa-installation
機能①Rich Installer
"description": "おっす!おら「run dino」の主人公の
「dinosaur」だ!nrun dinoとは?nndinosaur が ジャンプでサ
ボテンを避けるゲームゲームだ! サボテンに当たらずに進めたスコアを
競うことができるぞ!nn遊び方n1.クリックしてスタートn2.クリッ
クでジャンプn3.終了時にスコアを見る",
"screenshots": [
{
"src": "./screenshots/dino-start.jpg",
"sizes": "1125x2300",
"type": "image/jpg"
},
{
"src": "./screenshots/dino-run.jpg",
"sizes": "1125x2306",
"type": "image/jpg"
}
],
機能②App Shortcut
● アプリのようなショートカットが使える
参照: https://web.dev/app-shortcuts/
機能②App Shortcut
"shortcuts" : [
{
"name": "ホーム",
"short_name" : "home",
"description" : "ゲームをします ",
"url": "/",
"icons": [{ "src": "./shortcuts/home-256.png" , "sizes":
"256x256" }]
},
{
"name": "ランキング ",
"short_name" : "rank",
"description" : "ランキングを見ます ",
"url": "/setting.html" ,
"icons": [{ "src": "./shortcuts/ranking-256.png" ,
"sizes": "256x256" }]
},
{
"name": "設定",
"short_name" : "setting" ,
"description" : "設定をします ",
"url": "/ranking.html" ,
"icons": [{ "src": "./shortcuts/settings-250.png" ,
"sizes": "250x250" }]
機能③URL protocol handler
● AppのDeepLinkのような機能
● PWAを明示的に開くことができる
参照: https://web.dev/url-protocol-handler/
機能③URL protocol handler
"protocol_handlers": [
{
"protocol": "web+dino",
"url": "/?type=%s"
}
]
manifest.json “だけ” で実現
- すぐに
- 簡単に
- NativeAppぽくなる
今後Ship予定の(個人的に注目中)機能
①Block and/or Detect Screenshots
https://bugs.chromium.org/p/chromium/issues/detail?id=967360
②PWA: Install-Time Permissions
https://bugs.chromium.org/p/chromium/issues/detail?id=1146063
その他にも色々な機能の計画がされています
https://fugu-tracker.web.app/
まとめ
Nativeに近づけていきましょ!
(一緒に働いてくれる人も募集しています....)
Github: https://github.com/sudokzt/pwa-dinosaur
Twitter: @kaa_a_zu

NativeAppに近付ける manifest.json