【PWA】実装方法とインストールボタンの作り方

簡単にPWAを導入する方法を伝えていきたいと思います。結構jsの入れる順番など間違えたら動作しないことが多いので、今回は超わかりやすく、コピペして、書き換えるだけでできる方法を伝えていきます。!!

-----目次-----

PWAとは？
実際にPWAを入れてみる
アプリのインストールボタンを作る

PWAとは？

PWA（Progressive Web Apps）とは、簡単に言うと、(Webサイトを簡単にアプリ化する)という事です。

でも、アプリかしてなんのメリットがあるの？と思うかもしれませんが、結構便利です。

左が、普通のブラウザです。右が、インストールしたアプリです。結構差があります。URLの部分が無いことに気づきましたか？これ、アプリにしたら、URL入力欄が無いです。

このように、アプリのインストールも簡単で、インストールを押すだけでインストールできます。ただこれは、PWAに対応したブラウザだけです。

PWA対応ブラウザService Workerをサポートしているかでわかります対応してるのはこのようになっています↓

ブラウザ	対応状況	説明
Chrome (デスクトップ版)	◯	対応可能
Chrome (Android 版)	◯	対応可能
Chrome (iOS版)	◯	対応可能
Firefox (デスクトップ版)	◯	対応可能
Firefox (Android 版)	◯	対応可能
Firefox (iOS版)	◯	対応可能
Safari (デスクトップ版)	◯	対応可能
Safari (iOS版)	◯	対応可能
Internet Explorer	×	対応不可
Edge	◯	対応可能
Opera	◯	対応可能

参考:MDN:ServiceWorker

実際にPWAを入れてみる

HTMLと同じフォルダに〇〇.jsonを作成してください。(HTMLと同じファイルじゃなくてもできます) その〇〇.jsonを書き込んで行きます。〇〇.jsonをテキストエディタで開きます。

〇〇.jsonの書き込む例を見せます。

 ${
  "name": "pkkiのブログ!!",
  "short_name": "pkkiのブログ!!",
  "theme_color": "#36E1F1",
  "background_color": "#36E1F1",
  "display": "standalone",
  "Scope": "https://pkki.online",
  "start_url": "https://pkki.online",
  "icons": [
   {
    "src": "/M/logo/logo1.png",
    "sizes": "192x192",
    "type": "image/png"
   },
   {
    "src": "/M/logo/logo5.png",
    "sizes": "512x512",
    "type": "image/png"
   }
  ],
  "splash_pages": null
}$

これが例です。説明すると。

name: ウェブアプリの正式な名前。

short_name: ホーム画面に表示する省略した名前。

description: アプリが何をするのかを説明する一つ二つの文章。

icons: 一連のアイコン情報 — ソース URL、サイズ、種類。ユーザーの端末に最適なものが選択されるように、少なくともいくつか含めるようにしてください。

start_url: アプリの起動時に起動する index 文書。

display: アプリの表示方法 — fullscreen (全画面), standalone (スタンドアロン), minimal-ui , browser (ブラウザー) のいずれかです。

theme_color: テーマカラー — オペレーティングシステムで使用される UI の基本色です。

background_color: アプリの既定の背景色、インストール中およびスプラッシュ画面で使用します。

引用:MDN

僕が書くより↑の方がわかりやすいので、引用しました。このように設定できます。上の例ではdescriptionなど無いですが、無くても正常に動きます!!これで、jsonを作成できました!!

次は(〇〇.js)の作成です。これはコピペするだけでできます。〇〇.jsを作るときには絶対にPWAを実装したい〇〇.htmlと同じフォルダに設置してください。そうしないと、動きません。

〇〇.jsを作ったら

 $self.addEventListener('fetch', function(e) {
  })$

↑をコピペしてください。これだけで、〇〇.jsは完成です。

次は早速、PWAを実装したいHTMLに、書くだけです。これは、コピペしてURLだけ変えればOKです。

 $<link rel="manifest" href="〇〇.json">
  <script>
  window.addEventListener('load', function() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("〇〇.js");
  }
  });
  </script>$

↑をコピペして、〇〇のところを、自分で付けた名前にしてください。これで、インストールができるようになりました。携帯でPWAを実装したhtmlを見てみると、携帯だと、下に(〇〇〇をインストール)と出てくるかと思います。パソコン版chromeだと、右上の星マークの左にパソコンに↓のマークがついていたら、インストールできます。

ただ、自分でインストールボタンとか作りたいですよね。ていうことで、目次の３番目のアプリのインストールボタンを作るに進みましょう!

アプリのインストールボタンを作る

これも、とても簡単です。コピペでできます。

同じフォルダに、〇〇.jsを作成します。

 $registerInstallAppEvent(document.getElementById("InstallBtn"));
  function registerInstallAppEvent(elem){
    window.addEventListener('beforeinstallprompt', function(event){
      console.log("beforeinstallprompt: ", event);
      event.preventDefault();
      elem.promptEvent = event;
      elem.style.display = "block";
      return false;
    });
    function installApp() {
      if(elem.promptEvent){
        elem.promptEvent.prompt();
        elem.promptEvent.userChoice.then(function(choice){
          elem.style.display = "none";
          elem.promptEvent = null;
        });
      }
    }
    elem.addEventListener("click", installApp);
  }$

これを、コピペしてください。コピペしたら、

 $<button id="InstallBtn" class="installbotton" style="display:none;">
 アプリをインストールする
 </button>
 </div>
 <script src="〇〇.js"></script>$

これを入力してください。そして、〇〇.jsを自分で付けた名前に変更してください。これで、完成です。あとは自分でスタイルなどを付けて上げれば、完璧です。

注意:scriptの位置をbuttonの上にしないでください。したら、エラーで動きません。

これは、完全に読み込んでからじゃないとインストールできないようになっているのでそこだけ注意してください。インストールしたら、インストールボタンが消えるようになっています。消えて欲しく無かったら、ここから上に２番目の9行目の( elem.style.display = "block";)を消してください。

実際に、インストールボタンを押して見ましょう!

押したら、こうなります。buttonだと、クリックするときに、カーソルをポインターにすると、いいかもしれません

【PWA】実装方法とインストールボタンの作り方

-----目次-----

PWAとは？

実際にPWAを入れてみる

アプリのインストールボタンを作る

終わり