新しいMicrosoft EdgeはレンダリングエンジンにChromiumを採用することにより他のブラウザーとの相互運用性を高めるとともにPWAにおいても差異のない機能や体験を提供します。 このセッションではPWAがWindows 10からどのような機能が提供されるのか、Microsoftストアでの取り扱い、また、より機能が強化されたPWA builderについて紹介します。

1. PWA on Windows

2. 日本マイクロソフト株式会社
パートナー事業本部 パートナー技術統括本部
ISV ビジネス技術本部
クラウドソリューションアーキテクト
物江 修
自己紹介

3. Agenda
• 新しい Microsoft Edge について
• Windows における PWA
• PWA への取り組み

4. 新しい Microsoft Edge について

5. 現在の Microsoft Edge の種類
～ PC とモバイルむけに提供 ～
PC モバイル

6. 入手とインストール
～2020年 1 月 15 日リリース～
• 日本では令和２年４月１日以降、
順次開始(確定申告等を考慮)
• 以下のエディションは自動更新されない
Enterprise
Education
Workstation
Pro
microsoft.com/edge
6週間ごと

7. レガシー Edge との違い
UWP Win32

8. 相互運用性のさらなる向上

9. Windows におけるPWA の取り組み

10. PWA の Windows への配布とインストール
UWP
PWA
以前 : Microsoft Store から UWP でラップされたものをインストール
UWP
現在 : 従来の方法と、Edge のメニューから Web サイトを直接インストール
macOS
+

11. ❌
Web Applications: これまでの歩み
Windows Web
Applications
Hosted Web
Applications
Progressive Web
Applications
WinRT による機能
1
2
3
✔

12. Web standards
Web applications: これから
Windows web
applications
Hosted web
applications
Progressive web
applications
WinRT による機能
1
2
3

13. PWA のインタラクション
タスクバーへのピン留め
/スタートメニュー
ブラウザーから PWA を
“インストール”可能
簡単なインストール
/アンインストール
アプリ管理は、Windows 上の
最新のアプリケーションと同じ
タスクマネージャー
/タスクスイッチャー
PWA は動作も見え方も
他のアプリケーションと同じ

14. PWA のインタラクション
データ上限なし
Windows 10 上の Edgeの
PWAはデータ上限を
引き上げられる
ミニマル UI
戻るボタン、検索、印刷に
簡単にアクセス
継承された認証
Windows 10 または
ブラウザーにログインして
いるユーザーは自動的に
認証

15. PWA の開発者向け機能
通知
アプリが閉じている場合でも
ユーザーにエンゲージ
タスクバーへの
バッジのピン留め
変更をユーザーに
すばやく通知する
ジャンプリスト
アプリケーションフローに
すぐにジャンプする

16. PWA の開発者向け機能
強化された
インストール体験
インストールをより意味の
あるものにする
新しいコンポーネント
PWA 用の
ロード画面
PWA を悩ませる白い画面を
取り除く
認証を活用する
MS Graph API を介して
Windows の他の部分と対話
する

17. Microsoft Edge からの PWA のインストールと
アンインストール
DEMO

18. Project Fugu
フグのミッション : 開発者が Web の優れた機能をすべて維持しなが
ら、新しいエクスペリエンスをWeb 上で構築できるように、ネイ
ティブとの機能のギャップを埋めること

19. PWA への取り組み

20. Microsoft Store からの配布とBing のクロール
• セルフパブリッシング
～ PWA を Microsoft Store で公開する 2 の方法 ～
• 自動インデックス

21. Microsoft Store からの配布とBing のクロール
• セルフパブリッシング
～ PWA を Microsoft Store で公開する 2 の方法 ～
• 自動インデックス
UWP
PWA
EdgeHTML のみ
"If you'd like to turn your PWA into a Microsoft Store
application, head to the Progressive Web Apps (EdgeHTML)
documentation."

22. Microsoft Store App の価値
• デベロッパーセンターの分析
• アプリ内課金
• プロモーションの機会
• データストレージの上限がない
• WinRT API へのアクセス
Progressive Web App をさらに Progressive

23. Pinterest:
Code reuse with PWA
as store app and near
perfect rating!
pinterest.com

24. Tinder:
Core experience
with 90% less code
aka.ms/tinder-pwa-2017

25. Trivago:
97% increase in
click-outs to
hotel offers
aka.ms/trivago-pwa-2017

26. PWA builder

27. PWA Builder
DEMO

28. Windows と未来にむけたビルド
タスクバー /スタートメニューへの
ピン留め
簡単なインストール /アンインストール タスクマネージャー /タスクスイッチャー
データの上限なし ミニマル UI 継承された認証
通知
タスクバーへのバッジの固定 Web 共有 API
強化されたインストール エクスペリエンス PWA用のローディング画面 認証を活用する

29. 参考
https://myignite.techcommunity.microsoft.com/sessions/81324
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-store
https://blogs.windows.com/msedgedev/2020/01/15/upgrading-new-microsoft-edge-79-
chromium/