WebApp を PWA化するために必要な manifest.json ですが、より NativeApp に近付けるための機能が様々出ています。#PWANight の LT の時間をいただいて、簡単にではありますが「すぐにNativeAppのようなWebAppにさせる」ためにやっておくと良いことを紹介させていただきました。

1. NativeAppに近付ける
manifest.json
@kaa_a_zu
2021.12.15 | PWA Night

2. 名前: かーず(@kaa_a_zu)
所属: 株式会社Gaudiy
得意: パフォーマンス改善
趣味: パスタ作り

3. manifest.jsonについて話します
(PWA化に必要な同じみなファイル
)

4. “今すぐに”
利用者にWebAppを
NativeAppだと勘違いさせたいエンジニアさん
こういう人に聞いていただきたい

5. 利用者にWebAppを
NativeAppだと勘違いさせたいエンジニアさん
こういう人に聞いていただきたい

6. PWAとProject Fugu

7. PWA
①ユーザーが気に入るウェブ体験を提供するユ
ニークな機会を提供する
②最新のWeb機能を使用して機能と信頼性を強
化し、構築する
③単一のコードベースを使用して、誰でも、どこで
も、どのデバイスにでもインストールできるように
する

8. Fugu
①ウェブアプリケーションがネイティブアプリケーションにできることは何でもできるようにする
②ネイティブ・プラットフォームが持つ機能をユーザーのセキュリティを維持したまま、ウェブプラッ
トフォームを実現
③Web の基本的な考え方である、プライバシー、信頼、その他に配慮する

9. PWAとProject Fugu
コンセプトはかなり近しい

10. 紹介すること
Project Fugu からShipされた（される） PWA API に
ついて3つの機能を紹介します

12. これを見て、WebAppだとわかるユーザーは(きっと)いません

13. ここから
よりProgressiveしていきます

14. 機能①Rich Installer
● アプリのようなInstaller を表示
○ スクリーンショットが掲載できる
○ アプリの説明が掲載できる
参照: https://developer.chrome.com/en/blog/richer-pwa-installation

15. 機能①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"
}
],

16. 機能②App Shortcut
● アプリのようなショートカットが使える
参照: https://web.dev/app-shortcuts/

17. 機能②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" }]

18. 機能③URL protocol handler
● AppのDeepLinkのような機能
● PWAを明示的に開くことができる
参照: https://web.dev/url-protocol-handler/

19. 機能③URL protocol handler
"protocol_handlers": [
{
"protocol": "web+dino",
"url": "/?type=%s"
}
]

20. manifest.json “だけ” で実現
- すぐに
- 簡単に
- NativeAppぽくなる

21. 今後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/

22. まとめ
Nativeに近づけていきましょ！
(一緒に働いてくれる人も募集しています....)
Github: https://github.com/sudokzt/pwa-dinosaur
Twitter: @kaa_a_zu