省エネエンジニア

Flutter、vue.js修行中。

【Web】PWAにしてみた

こんにちは。
先日、Flutter for webでwebアプリをリリースしたのですが、そのページをPWAにしてみました。

qkuronekop.hatenablog.jp

やり方は簡単。

manifest.jsonというファイルを作成します。

{
    "name": "qkuronekop.dev",
    "short_name": "qkuronekop",
    "background_color": "#ffffff",
    "icons": [{
        "src": "./icon-256.png",
        "sizes": "256x256",
        "type": "image/png"
      },{
        "src": "./icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
      }],
    "start_url": "./?utm_source=homescreen",
    "display": "standalone"
  } 

name,short_name,background_color,icons,start_urlは自分のサイトに合わせて変更してください。

アイコンは最低、256×256と192×192の2種類のサイズが必要みたいです。

service-worker.jsというファイルを用意します。

self.addEventListener('install', function(e) {
    console.log('[ServiceWorker] Install');
  });
  
  self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate');
  });
  
  self.addEventListener('fetch', function(event) {});

こんな感じ。

index.html

  <link rel="manifest" href="./manifest.json">
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }
  </script>

これを追加。

諸々パスに気をつけてくださいね。
私は全てindex.htmlがある階層においてます。

https://qkuronekop.dev/#/

PCブラウザで開いてもなんの変哲もないのですが、スマホで開くと

f:id:qkuroneko:20190607095636p:plain:w320

こんな感じになります。
ただし、アプリを追加しますか?と出てくるのは2回目以降の訪問の時で前回の訪問から5分以上経過している場合だそうです。

f:id:qkuroneko:20190607095904p:plain:w320

「追加」をタップすると、

f:id:qkuroneko:20190607100026p:plain:w320

こんな感じでホームにアイコンが追加されます。
アイコンをロングタップすると「アプリの情報」というモーダルが出てこのアイコンがただのブックマークではなくアプリであることがわかります。

f:id:qkuroneko:20190607100335p:plain:w320

さらに、ホームのアイコンからアプリを開くと上部にあったURLが消えていてネイティブアプリっぽい表示になります。

また、画像はないのですが、manifest.jsonにname、background_color、iconsを設定すると画面が開く直前にスプラッシュスクリーンを表示してくれるようになります。
qkuronekop.devもスプラッシュスクリーンが表示されているので、ぜひお手元のスマホでみてみてください。

iOSだとうまく表示されてないかもしれないです。

iOSでの対処法はこちらの方が紹介してくれていますのでご参考にどうぞ。

qiita.com