Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Web アプリの進歩

Microsoft Edge Developer Blog で Progressive Web Apps についての記事が掲載されました。
今回もかなりざっくり解説です。

いつもの参照元
https://blogs.windows.com/msedgedev/2016/07/08/the-progress-of-web-apps/

 

今回の内容

  • Manifold.js 使用したHosted Web Apps
  • Edge での Progressive Web Apps

 

その前に Progressive Web Apps とは?

Google Developers の Web Fundamentals によると以下の説明になります。

プログレッシブ ウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。
ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。
不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。
また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

 

Manifold.js 使用した Hosted Web Apps

英語ですが解説動画。
Manifold.js を使用して UWP の Web アプリを Mac で作成しています。

youtu.be

 

Windows 8, 10 (Phone , 10 Mobile) ではウェブサイトのショートカットを スタートのタイルとして置きアプリの様な振る舞いをさせることができました。

一応、XML を書いてライブタイルやアイコン等を設定することができ、アプリな振る舞いですね。

Hosted Web Apps では以前の紹介したように公開されている Web サイトをアプリ上に表示して ハイブリットアプリとして動作させる技術です。

Google Chrome の場合、アプリ(拡張機能) では chrome.* で内部命令を使うことができますが、
Hosted Web Apps の場合は Windows.* からネイティブの機能である Windows Runtime をほぼ使用することができます。

 

Edge での Progressive Web Apps

Hosted Web Apps はネットワーク上にあるデータを取得しアプリを表示しますが、 通信回線が途切れると表示されなくなってしまいます。

Progressive Web Apps では画像ファイルや JavaScript などリソースをキャッシュできる機構があるため、 ウェブアプリでありながらネイティブアプリのような振る舞いをします。

 

残念ながら、現状の Edge で Progressive Web Apps を使用することはできません。

ですが、開発中でありそのうち実装されるとのことです。

 

主要技術は以下のものです

Insider Preview でプレビュー実装済み

  • Fetch API

 

開発中

  • Service Worker
  • Cache API
  • Push API
  • Web Application Manifest

 

また、Store の方での公開できるよう考えているようで、今後の展開が楽しみです。

スポンサーリンク