PWAはhttp://localhost/からも作成できることが確認できましたので、昨日のサンプルよりも、より実用的なサンプルを作成しました。
ソース
起動
edgeで「localhost:8080」を開きます。
サーバ停止後
コマンドラインの画面で「Ctrl + C」を入力してサーバを停止します。
この状態ではブラウザがhttpリクエストを送っても対応する相手が居ないので、edgeの更新ボタンを押すと
通常は以下のような表示になりますが
ServiceWorkerを使うとキャッシュが読み込まれるため、以下のようになります。
キャッシュを無視して強制的に更新したい場合
ServiceWorkerを使うとサーバが応答できない場合でもキャッシュから起動できる、というメリットがある反面、サーバ側に新しいファイルが用意してあるのにキャッシュが優先されてしまい最新の表示状態が確認できなくて困る、という場合もあります。
強制的に更新をかけたい場合は以下の操作で、できます。
- ショートカットキーを使う場合： Ctrl + Shift + R
- GUI操作で行う場合：F12を押して開発者ツールの画面を開いた状態で、更新ボタンを長押しして「ハード リフレッシュ」をクリック
ServiceWorkerを解除したい場合
ServiceWorkerを使っているとソースファイルを更新したりするタイミングで新旧が混在してしまう場合があります。
複数のServiceWorkerが混在している状態では、どの時点のキャッシュが有効になっているのか怪しくなってしまいますので、そのような時は一旦ServiceWorkerの登録を解除するのが良いです。
まず、「アプリケーション」タブを開きます。
アプリケーションカテゴリ内の「Service Workers」を開くと、localhost:8080に紐づけられているService Workerの一覧が表示されます。
その一覧の中にある「登録解除」というリンクをクリックします。
全てのService Workerの登録を解除すると以下のようになります。
お世話になったサイト
- Service Worker の紹介 | Web Fundamentals | Google Developers
- 進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) | HTML5Experts.jp
欲を言えば
PWAは権限がかなり強いので、使い方を誤るとセキュリティリスクは大きそうです。
だから、仕方がないことだとは思いますが、現状では「Webブラウザで対象ページを開いて、PWAとしてインストールする」という操作がどうしても必要なようです。
その操作をコマンドラインとかPowerShellなどで自動化できるば、もう最高なのですが…。
MicrosoftStoreにアプリとして公開すれば、手段はあるのかもしれませんが、公開したくないアプリの方が多いので…。
0 件のコメント:
コメントを投稿