Microsoft edgeがPWA(ServiceWorker)に対応 千葉県の方へ

Microsoft edgeがPWA(ServiceWoker)に対応している様子の画像

Microsoft edgeのPWA(ServiceWorker)対応

Webサイトとアプリを融合させるような技術のPWAが話題です。PWAというのはプログレッシブウェブアプリの略称で、大元にServiceWokerという技術が使われています。(ServiceWokerとPWAを分けて説明していきます。)
ServiceWokerはGoogleが先行していてChromeのみ対応しておりましたが、4月にありましたWindows10のApril Update 2018によりMicrosoft edgeもServiceWokerに対応しました。

今回はその確認です。ServiceWokerを組み込んでいるPCREPAIRのホームページとこのブログを使って確認します。

Microsoft edgeがPWA(ServiceWoker)に対応している様子の画像

Microsoft edgeを開いて右上から開発者ツールを開き、デバッカーのタブを開くとServiceWokersと出ております。中を確認するとServiceWokerが登録されていてアクティブな状態であることがわかります。

Microsoft edgeがPWA(ServiceWoker)に対応している様子の画像2

次にキャッシュの確認です。ServiceWokerを使ってオフライン対応させているので、ホームページとブログを開くと同時に、バックグラウンドでキャッシュの設定が処理されるようにしております。開いていないページのキャッシュが組み込まれるので該当するページを開いたときにものすごい速さでページを開いてくれます。(キャッシュから開くのでとても速いです。)

今回、Microsoft edgeのServiceWoker対応を確認しましたが、Google Chrome用に設定したServiceWorkerと中のコードは変えていません。Google Chromeに使用していたServiceWorkerをMicrosoft edgeが受けれいてくれたという感覚です。

Microsoft edgeのPWA対応

次にPWAへの対応の確認です。こちらはAndroidにEdgeのアプリを入れて確認しました。というのもPWAは現状モバイルがメインで厳密にはデスクトップのPWA対応はまだです。これはGoogle Chromeも同じでWindows10でAdd home screenからシェルの追加をしてもショートカットとして追加されるだけでスプラッシュ画面やテーマカラーは反映されません。(といってもWindows10の場合、UWPアプリとして追加されるのでアプリのように開きます。)

しかしAndroidのEdgeアプリは違いました。
確認するために前もってPCREPAIRのホームページとこのブログをアプリとしてAndroidにインストールしておきます。下の画像はAndroidの設定からアプリ一覧を開いたところです。PWAがアプリとして追加されています。

AndroidにPWAがアプリとして追加されている様子の画像

この状態でEdgeアプリを使いBing検索からPCREPAIRのページを検索すると、ブラウザで開くのではなく、スプラッシュ画面から開きPWAが立ち上がってくれます。PWAでアプリとしてインストールまでしておくと検索結果をタップした際、Webサイトが開くのではなくPWAが起動します。スプラッシュ画面から起動しテーマカラーも反映されているということはPWAの設定項目であるmanifestが反映されていることがわかります。
これでMicrosoft edgeがPWAに対応していることが確認できました。

Google Chromeはデスクトップ上のPWAの開発が進んでいるようです。Microsoft edgeが今後どのようになるのか気になりますね。