- ※適用バージョン：Windows 10 version 1803（build 17134）以降
はじめに
PWAは、Googleが提唱し、Microsoftもプッシュしています。先日開催されたBuild 2018で「Progressive Web Apps」または「PWA」のタグが付けられたセッションは10件もありました（ちなみに、前回・前々回で紹介した「timeline」を検索すると2件しかありません）。
GoogleもMicrosoftも推すPWAですが、デスクトップアプリやスマホアプリの開発者にとっては耳慣れない言葉だと思います。TwitterアプリがPWA化したという最近のニュースで知った人も多いのではないでしょうか。そして、MirosoftのWebサイト「開発者向けの最新の Windows 10 機能」でPWAの解説を読んでみても（次の画像）、ちょっとピンと来ないだろうと思います。なぜなら、PWAとはWebサイトの作り方の話だからです。
そのWebサイトの話が、なぜUWPアプリに関係するのでしょうか？ それは、PWAのWebサイトを表示するUWPアプリを作れるから、です。それも、ただ表示するだけではありません。UWPアプリですからMicrosoftの「ストア」で配布できるのはもちろんのこと、PWAのJavaScriptからUWPのAPIを利用できるのです。
今回の記事は、前半でPWAについて解説し、後半では実際にPWAをUWPアプリ化してみて、そのメリットを確かめます。
対象読者
- PWAに興味のある人
- Webアプリを作っている開発者
- UWPアプリを作っている開発者
必要な環境
サンプルコード（GitHub）を試してみるには以下の環境が必要です。
- Windows 10 1803以降
- Visual Studio 2017 Version 15.7以降（無償のCommunity Editionで可）
- UWP用Windows 10 SDK：10.0.17134以降
PWAとは？
Progressive Web Apps（PWA）という用語は、2015年にGoogleのエンジニアが作りました。Chromeだけでなく、多くのWebブラウザでサポートされつつあります。
すでにPWAは幾つも登場しています。後ほどUWPアプリ化を試してみる「モバイル版Twitter」のサイトもPWAです。
PWAのコンセプト
Googleの開発者向けWebサイトのProgressive Web Appsのページでは、3つの特徴が述べられています（次の画像）。このような特徴を持ったWebサイト（Webアプリ）をPWAと呼ぼう、というわけです。
- Reliable（信頼性）：不安定なネットワーク状況であっても、即座にロードし、接続エラーを表示しません
- Fast（高速）：なめらかなアニメーションや引っ掛かりのないスクロールで、ユーザーとのやりとりに迅速に対応します
- Engaging（エンゲージメント）：没入型ユーザーエクスペリエンスを備え、デバイス上のネイティブなアプリのように感じられます
ざっくり言ってしまえば、「Webアプリをネイティブアプリみたいにしよう！」というイメージですね。
PWAの要件
いくらコンセプトを力説されても、ピンと来ないかもしれません。やはり開発者としては、「具体的にWebサイトをどうするとPWAになるのか？」を説明してもらわないと分かりにくいものです。Googleのチェックリストもありますが、それよりも短いMicrosoftのPWA要件を紹介しておきます。
必須の要件
次の3項目は必須です。HTTPSは、個人開発者にとってはちょっとハードルが高いかもしれません。例えば、AzureのWebサイトでは本稿執筆時点で年額8千円弱です（無料の認証局「Let's Encrypt」もあります）。
- HTTPS：PWAを公開するWebサーバーはHTTPSでなければなりません。サービスワーカーやその他のPWAテクノロジは、安全な接続でのみ動作します（開発時のローカルホスト接続を除く）
- Service workers（サービスワーカー）：オフラインサポートなどを行うJavaScriptのコードです
- Web app manifest（Webアプリマニフェスト）：Webサイトに置くJSONファイルです。Webアプリの情報（アイコンやURLエントリポイントなど）を記述します
サービスワーカーとWebアプリマニフェストがどのようなものかは、後ほど改めて紹介します。
追加の要件
必須ではありませんが満たすことが望ましい要件として、次の4項目が挙げられています。
- Cross-browser compatibility（ブラウザ間の互換性）：さまざまなブラウザと環境でテストしてください
- Responsive design（レスポンシブデザイン）：UXをユーザーのデバイスに適合させてください。画面のサイズ、マウスかタッチかなど。
- Deep linking（ディープリンク）：サイトの各ページを一意のURLに結び付けます。Windowsでいえば、「共有」や「タイムライン」でその画面が復元できるように
- Best practices（ベストプラクティス）：Sonarwhal linterのようなコード品質ツールを使用して、アプリの効率、堅牢性、安全性、アクセシビリティを最適化してください
