前回のあらすじ

Google driveをコマンド一発で呼び出せると良いのでPWAアプリのコマンド化を行いました

Google driveがPWAじゃなくない？

どうやらそのようですね？

ではPWAにしてしまいましょう！

野良PWA化

どうやって？

普通に考えると人様のサービスを勝手に変更はできません
なので自分のドメインでPWAのサイトを作ります

あとはそこからGoogle driveにリダイレクトします

ね、簡単でしょ？

コード

以下に野良PWA用のコードを用意しました
https://github.com/m-m-n/nora-pwa

使い方

以下を用意します

サーバー
ドメイン
証明書

Webサーバーの設定等は省略します

/path/to/nora-pwa に配置したとします

cd /path/to/nora-pwa/scripts
vim sites/drive.google.com.json

以下のようなJSONファイルを用意します

{
  "domain": "drive.google.com",
  "redirect_to": "https://drive.google.com/",
  "site_name": "Google ドライブ",
  "short_name": "ドライブ",
  "icons": [{
    "file_name": "icon.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "theme_color": "#1a73e8",
  "background_color": "#ffffff"
}

./generater.php sites/drive.google.com.json

これで /path/to/nora-pwa/public にGoogle driveをPWA化するためのディレクトリーが生成されます

cd /path/to/nora-pwa/public/drive.google.com
ls
index.html  manifest.json  redirect.html  sw.js

アプリのアイコンが無いので適当に生成してサーバーにアップロードします

ls
icon.png  index.html  manifest.json  redirect.html  sw.js

アクセスする

準備が整ったのでアクセスしてみましょう

https://YOUR-DOMAIN/drive.google.com/index.html を開くとPWAのインストールが促されるかと思います
促されない場合はGoogle Chromeの右上にある三点のメニューアイコンをクリックし、インストールします
インストールの項目がない場合はmanifest.json、service workerあたりが存在しているか確認します

manifest.jsonを確認するとPWAとして起動した初期URLではindex.htmlではなくredirect.htmlとなっています
redirect.htmlで本来のGoogle driveのサイトへジャンプするようになっているので、勝手に作ったPWAアプリがあたかもGoogle driveのように見えます

厳密には別ドメインに遷移してるので、遷移先のURL(この場合 https://drive.google.com )が表示されますが、それを承知でやっているので問題ないでしょう

これでPWAとしてインストールが出来たので、前回の手順でコマンド化することが出来るようになりました

嬉しい副産物

スマホでアプリがリリースされていないサービスも勝手にPWA化してインストールできる！！！！

それでは良いPWAライフを。

【野良】Google driveをPWA化する【PWA】