PWAをUWPアプリ化してみよう
Visual Studioを使うと、PWAを簡単にUWPアプリにできます。JavaScriptのデバッグも、もちろん可能です。また、UWPのAPIもJavaScriptから呼び出せます。
UWPアプリ化する手順
プロジェクトを作る
Visual Studio 2017でプロジェクトを作るとき、［JavaScript］－［Windows ユニバーサル］の中から次のプロジェクトを選びます。名前が変わっただけで、プロジェクトテンプレートとしては同じものです。
- Visual Studio 2017 15.7以降：［プログレッシブ Web アプリ］（次の画像）
- それ以前のVisual Studio 2017：［ホストされた Web アプリ］
すると、次の画像のようなターゲットプラットフォームのバージョンを指定するダイアログが出てきます。上側は、PWAがサポートされた17134（以上）にします。下側（最小バージョン）は、10586（Windows 10 1511）以上であれば構いません。ただし、Windows 10 1803（17134）未満では、「ホストされた Web アプリ」として動作するだけで、PWAの機能は働きません。
PWAを指定する
プロジェクトが作成されると、アプリマニフェストの編集画面が表示されます（表示されないときは、ソリューションエクスプローラーで［package.appxmanifest］をダブルクリックして開いてください）。その［アプリケーション］タブに［スタート ページ］欄があります（次の画像）。ここにPWAのURLを入力します。
ここでは「ストア」に提出するわけではないので、TwitterのPWAを使わせてもらって試してみましょう。［スタート ページ］欄を「https://mobile.twitter.com」に書き換えてください。なお、PWAの開発時には「http://localhost:……」として、ローカルでテスト／デバッグすることも可能です。
次に、マニフェストの［コンテンツ URI］タブを開きます（次の画像）。1行目に「https://example.com」とあり、その右端の「WinRT アクセス」ドロップダウンが［すべて］になっています。これは、表示しているコンテンツ（Webページ）からUWPのAPIを利用できる（あるいは、利用を禁止する）指定です。1行目のURI欄を「https://*.twitter.com」に書き換えてください。これでTwitterのPWAがUWPのAPIを利用できるようになりました。
以上の2つの作業だけで、PWAがUWPアプリとして動作するようになります。
タイル画像を追加する
「ストア」で公開するのであれば、最低限やっておくべき作業がもう1つあります。スタートメニューのタイルやタスクバーのアイコンです。400ピクセル×400ピクセル程度のサイズで正方形の画像を用意してください。
そうしたら、ソリューションエクスプローラーでimagesフォルダー（環境によってはAssetsフォルダーになっているかもしれません）の中にある画像ファイルを全て削除してしまいます。次に、マニフェストの［ビジュアル資産］タブで、［ソース］欄に用意しておいた正方形の画像ファイルを指定し、［生成］ボタンをクリックします（次の画像）。これで、imagesフォルダーの中に必要な画像ファイルが自動生成されました。
※画像出典：Community-introduced and widely adopted PWA logo
Twitterの場合：共有ターゲットを宣言する
以上でPWAの一般的なUWPアプリ化の作業は完了ですが、Twitterの場合は共有ターゲットの宣言も行います。
マニフェストの［宣言］タブを開き、［使用可能な宣言］ドロップダウンで［共有ターゲット］を選び、その右の［追加］ボタンをクリックします。次に、［データ形式］セクションと［サポートされるファイルの種類］セクションに、それぞれの［新規追加］ボタンを使って以下のデータを入力していきます（次の画像も参照）。
- データ形式：
Text
Bitmap
WebLink - サポートされるファイルの種類：
.jpg
.jpeg
.png
.gif
その他、PWAによっては、UWP APIを使って例えばユーザーのピクチャフォルダーにアクセスするようなものもあるでしょう。そのような場合は、さらにマニフェストの［機能］タブでの指定が必要になります。
