【Progressive Web Apps】(小5が)HPをアプリ化してみました。

f:id:quietplace_1:20200306072333j:plain

PWA

ブラウザとかでこんなの見たことないでしょうか?

f:id:quietplace_1:20200306052241p:plain

↑この画像をGoogleで検索したところ「うどん」が出ましたwww

f:id:quietplace_1:20200306054732p:plain

これPWA(Progressive Web Apps)っ言うらしいです。

ほぼアプリです。

30分ぐらいでできました。

PWAはGoogleが進めているプロジェクトといった感じになっています。

TwitterなどもPWAが導入されています。
https://twitter.com

f:id:quietplace_1:20200306054249p:plain
Google PlayやAppleStoreなどの審査を通さなくても簡単にアプリ化できます。

他にはインストールするとPCの場合はデスクトップに表示されたりスマホのホーム画面に追加されたりわざわざブラウザを付ける必要がなくなります。

その代わり頻繁にHPを見る人じゃないとインストールしないかもしれないですが... 

導入方法

注意

1.導入することによって何らかの不具合が起こる可能性があります。
 ですがすべて自己責任でお願いします。

2.WordPressなどの場合はプラグインなどがあるのでこの方法ではおすすめしません(というかできないかも...)

3.ここからは以下のサイトを参考・引用しています。
 詳しく見たい方は参考記事をご覧ください。

条件

  • HPをHTTPSにしていること
  • 512×512のpng画像が必要
  • レスポンシブ化(しないとデザインが崩れるのかも...)

 コードを生成

f:id:quietplace_1:20200306062810p:plain

Web App Manifest Generatorで必要な物を入力するとコードが生成されます。
右側の青いボタンを押すとエクスプローラーが開くので512×512の画像をアップロードしてください。

 入力し画像をアップロードしたらcreate .zipをクリックしDownloadして解凍します。

そしたら解凍したフォルダー内のファイルをサーバーのルートディレクトアップロードします。

次にServiceWorker.jsを作成し引用先のコードをコピペします。

ServiceWorker.js

 そのファイルをルートディレクトリにアップします。

次にheadタグにコードを追記します。
またまた引用先のコードをコピーして追記してください。

head

以上です。

まとめ

こんな感じです。
難しそうだなと思ってたんですが調べたら思ったより簡単にできました。

なにか間違いなどあればコメントなどお願いします。