【Laravel】超簡単！ウェブサイトをPWA化する方法

この記事では、当サイト（Laravel）をGoogleの推進するPWA（プログレッシブウェブアプリ）へ対応させる手順を解説していきます。
PWA対応をすると、PCならGoogleChromeからインストール可能に、スマホならホーム画面に追加することでPWAとして起動することができるようになります。 PWAはインストールと言っても普通のアプリとは違い、ブックマークと同じようなものです。 PWAとして起動するとブラウザのUIが消えてアプリと同じようなUI・UXで使用することができます。
また、キャッシュを利用してさくさくページ遷移できたり、オフラインでもページが表示できたり、push通知も可能になります。

当サイトもPWAにしており、さらにこの記事はオフライン対応もしておりますので是非オフラインにしてリロードしてみてください。 このページのみオフラインでも表示されるはずです。しかもサーバー間の通信を挟まないので高速で表示されます。
それでは、LaravelのサイトをPWAにする手順を以下に解説していきます。

1. workboxの導入

PWAにおいて重要な役割となるのが Service Worker です。
Service Worker はバックグラウンドで動き、上で述べたようなオフライン操作やpush通知などのネイティブアプリでしか実現できなかった機能をWebでも可能にします。 そして、Workboxを使用することで Service Worker のソースコードが自動生成されたり、設定が簡単になります。

• workboxのインストール

$ npm install --save-dev workbox-sw
$ npm install --save-dev workbox-webpack-plugin

• webpack.mix.js

const mix = require('laravel-mix');
const workboxPlugin = require('workbox-webpack-plugin');

mix.webpackConfig({
    plugins: [
        new workboxPlugin.InjectManifest({
            swSrc: 'public/sw-offline.js',
            swDest: 'sw.js',
            importsDirectory: 'service-worker'
        })
    ]
});

• sw-offline.js（sw.jsが自動生成される）
  ルートディレクトリに配置（public直下）

workbox.core.skipWaiting();
workbox.core.clientsClaim();

// fonts
workbox.routing.registerRoute(
    new RegExp('https://fonts.*'),
    workbox.strategies.cacheFirst({
        cacheName: 'fonts',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200]
            })
        ]
    })
);

// google stuff
workbox.routing.registerRoute(
    new RegExp('.*(?:googleapis|gstatic).com.*$'),
    workbox.strategies.networkFirst({
        cacheName: 'google'
    })
);

// static
workbox.routing.registerRoute(
    new RegExp('.(?:js|css|ico)$'),
    workbox.strategies.networkFirst({
        cacheName: 'static'
    }),
);

// images
workbox.routing.registerRoute(
    new RegExp('.(?:jpg|png|gif|svg)$'),
    workbox.strategies.cacheFirst({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                purgeOnQuotaError: true,
            })
        ]
    })
);

// offline pages
workbox.routing.registerRoute(
    new RegExp('/(article/3)$'), // ← このページ「/article/3」をキャッシュする
    workbox.strategies.staleWhileRevalidate({
        cacheName: 'pages',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                purgeOnQuotaError: true,
            })
        ]
    })
);

2. manifest.jsonの設定

続いてPWAとして起動する際の設定を行います。

• manifest.json

{
  "short_name": "App short name",
  "name": "App name",
  "background_color": "#fff",
  "theme_color": "#fff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/?source=pwa",
  "icons": [
    {
      "src": "images/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "images/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "images/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

• manifest.jsonを全てのページのheadに読み込む

<link rel="manifest" href="/manifest.json">

まとめ

以上で完了です！非常に簡単ですね。
PWAは近年Googleが急速に推進している技術で、今後どんどん機能が充実してくると思われます。
今後、Webやスマホアプリなどの在り方に非常に大きな影響を与える技術となるだろうと私は考えてます。