Chrome::PWAの作り方
ちょっと進化したショートカット=PWA
が,もっと簡単な方法があることをいまさら発見したので報告する.
PWAとは:
あまり難しく考えなくても,
「特定のweb pageをアプリみたいに起動できる工夫」
「ちょっと進化したデスクトップショートカット」
と理解しておけばよいだろう.
ChromeでサイトをPWA化する方法2つ
ChromeからPWAを作る方法は2つある.
1. 検索窓のアプリ化アイコン(あれば)をポチッとするだけ
https://gyazo.com/b7041a3ee0be9c99bfc44548fb4e82fb
https://gyazo.com/d8622e0f6e0bf82e9cdcf04388afc60b
https://gyazo.com/8c90171ef0dea027e01329f807c83f85
実行するとwebブラウザではないような単独ウィンドウで表示される.
が,アプリ化アイコンがある=PWAにできるサイトは限られている.多くのサイトはそんなの実装してない.その時の方法は――
2. アプリ化アイコンがないページの場合
ケバブメニュー>「保存して共有」>「ショートカットを作成」
https://gyazo.com/ee707bd8b9a5f4b250ac4a879157cf9a
https://gyazo.com/9fd878658533059abaa8d5b8632e7c84
これでデスクトップにショートカットが作られ,上のPWAと同じような表示になる.
★1. と2. の違いは,Chromeでchrome://apps にアクセスした時に,chromeアプリとして見えるか見えないか.
PWA対応のサイト=手順1. の場合はアプリリストに追加される.
▼トラブル▼
2.の手順で連続して複数のショートカットを作成すると,
前のショートカットが消える現象が.
これは同じドメインだとそうなってしまう可能性が.
例えば……
https://scrapbox.io/fujii-memo/
のショートカットの次に
https://scrapbox.io/ryu-ele-happyo23/
のショートカットを作成すると,前のアイコンが消える.
★消えない場合もあり,その場合は,最後に開いていたscrapboxプロジェクトのページになってしまう.
おそらく--app-idオプションに付加するアプリIDが,ドメイン毎にしか生成されないのではないか?
これは大問題.あるドメイン以下に沢山の異なるページがある場合,ショートカット作ったら全部同じか,まぜこぜになってしまう.
方法としては以上.が,ここで疑問が.
以下,比較してみた.
【考察】"--app"との違いは?
上で紹介したショートカット保存.以前紹介したchrome 起動オプション --app="..."と同じかと思ったが,違っていたというお話.
まず,chrome.exeの起動オプションでアプリ化するというのは,
デスクトップにショートカット作る> 作成したショートカットの「プロパティ」> chrome.exeのオプションに --app="https://……目的URL……"をつける
――という手順.※あきらかに上の手順のほうが簡単.
今回の手順で生成されたショートカットのプロパティを確認すると,
C:\...\chrome_proxy.exe" --profile-directory="Profile 2" --app-id=ngboffpgmgciiinnflnkgedmbalfkeeg
なるほど.exeファイルも違うし,オプションも違う.
見た目の違いは,ショートカット保存の方がメニューがでること.
https://gyazo.com/dd5314d5ce344245bb652084519af840
拡張メニューボタンとケバブメニューボタン(縦三点)が表示
https://gyazo.com/eb70f00085a63794930f0caa3b5c6c8a
↑↑ --appオプションでの起動では,上部バーには何もない
※おまけに,scrapboxの見た目も変化した.これはchromeアプリとしてscrapboxアプリが起動されるからだと思われる.
【まとめ】
Chromeから特定のWebPageをPWA化できる.
PWA可能でないpageも「ショートカットを作成」で簡単にデスクトップにアイコン生成
--app=~での起動とは少し違う.用途で使い分けをする必要がある
手順が簡単なので,気軽に利用できる.生成したリンクファイル(".lnk")もコピーすれば他のPCでも活用可能
いままでちまちまとショートカットを作ってから編集していたので,これからは愛用しそうな予感.
以上.