PWAに未来を感じる

Sponsored Link

blog.chromium.org

あと数週間以内にリリースされるChrome 57 beta版では、PWA(Progressive Web Apps)との親和性を強化するとのこと。
具体的には、

  • ホーム画面にPWAアプリケーションのリンクを置ける
  • app drawerにも表示される
  • 設定メニューにも表示される
  • ネイティブアプリと同じ通知をもらえる
  • ほかのアプリからのIntentを受け取れる

もちろんこの情報は今のところはAndroid端末に限る話なのですが、PWAがこのままメインストリームへ昇華した場合、開発者からしたらWebアプリケーションをPWA対応させるだけでAndroidにもiPhoneにも対応させることが出来る様になるのですから、是非盛り上げていきたいところですね。

Sponsored Link

PWA

Progressive Web Appsの頭文字を取った言葉です。

Googleの説明から引用すると、

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

つまり、

  • Webアプリケーションなのにオフライン対応
  • ネイティブアプリ並にサクサク動く
  • app storeからインストールする必要ない

という特徴があります。

Sponsored Link

各ブラウザの対応状況

PWAの実装にはブラウザのAPIを利用する必要があります。
以下はPWAが主に使用するAPIのブラウザ毎の対応表です。

Service Workers

Can I use... Support tables for HTML5, CSS3, etc

Geolocation

Can I use... Support tables for HTML5, CSS3, etc

Push API

Can I use... Support tables for HTML5, CSS3, etc

Web Storage

Can I use... Support tables for HTML5, CSS3, etc

Session history management

Can I use... Support tables for HTML5, CSS3, etc

Safariの未対応が目立ちますね。
Safariの対応していない2つのAPIは、PWAの中核とも言える機能を提供するAPIなので、app storeで囲いきれなくなるのを嫌がって対応を後回しにしているように見えます。

API 概要
Service Workers オフライン対応を実現する為のAPI。ブラウザが Web ページとは別にバックグラウンドで実行する。
Push API Service Workersとの組み合わせでよく使う、プッシュ通知を実現するためのAPI。

Sponsored Link

HTTPS

Service Workers APIはhttpsかlocalhost上でしか動作しないため、WebアプリケーションをSSL化する必要があります。

導入ガイド

Google公式のガイドが2つ見つかりました。

今回は概要の説明まで。
Front-end Developer Handbook 2017の学習も始めたことなので、PWAでのWebアプリデプロイを目標としたいと思います。 www.mojage.club

Sponsored Link