はじめに

PWAって知っていますか？（自分は最近知りました👱）
では、実際に使ったことがある、あるいは触ってみたことがある方はどのくらいいらっしゃるでしょうか。

色々なPWAの初学者用の記事を見たのですが、どれも丁寧に書かれていてとりあえず使ってみたい私にとっては難しいとかんじてしましまいました…😵

そんな自分のような方向けに、もっと簡単にPWAを初めてみようという主旨で書きました！
今回は、自分が最近触っているvue.jsを利用して組み合わせてみました。

PWAとは

そもそもPWAとはなんでしょうか？

PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです。

Googleが取り組むWebのアプリ化プロジェクト「PWA」とは？- WPJ

この記事に詳しく書かれているので、詳細は省きますが、簡単に言うとWEBページをネイティブアプリのようなユーザー体験を提供する仕組みと、理解して頂ければいいかと思います。

上の記事でも紹介されていますが、PWAの最大の特徴は（自分が衝撃を受けたのが）、
オフラインでも動作するということです。（service workerという仕組みのおかげです。）

それ以外にも、アプリの様に動作するが、アプリの審査が不必要であったり、プッシュ通知機能が使えるようになるなどの利点があります。

簡単に解説

サンプルは以下のページにあります。（vueのチュートリアルを利用しています。）
https://poster-keisuke.github.io/

手順は以下の通りです。

必要なファイルの紹介
エントリポイントの作成
ファイルのアップロード

1. 必要なファイルの紹介

今回、利用するファイルは以下のとおりです。

index.html

エントリポイント用。アプリの表示部分

service_worker.js

ServiceWorkerの処理を書くファイルになります。
今回はキャッシュファイルのインストールとロードの部分が書いてあります。
（ファイルがキャッシュされている場合、オフラインでも動作が可能になります。）

service_worker.jsでは、主に、キャッシュファイルの設定と、インストール処理とキャッシュロード処理を記述しています。

var urlsToCacheで登録したurlをキャッシュしてくれるので、それらのファイルをオフラインでも利用可能にできます。
例えば、外部下したjsファイルや、cssファイル等もこちらに登録しておくことができます。

service_worker.js

// キャッシュファイルの指定
var CACHE_NAME = 'pwa-sample-caches';
var urlsToCache = [
	'/poster-keisuke.github.io/',
];

// インストール処理
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});

// リソースフェッチ時のキャッシュロード処理
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches
            .match(event.request)
            .then(function(response) {
                return response ? response : fetch(event.request);
            })
    );
});

manifest.json

PWAとしての設定情報を記述しておきます。
nameとstart_urlは登録必須になります。今回start_urlはindex.htmlですが、
start_url プロパティを変更してエントリポイントを index.html 以外にすることも可能です。

manifest.json

{
    "short_name": "PWA",
    "name": "PWA sample app",
    "display": "standalone",
    "start_url": "index.html",
    "icons": [
        {
            "src": "images/icon.jpg",
            "sizes": "192x192",
            "type": "image/jpg"
        }
    ]
}

その他のオプションが気になる方は、以下を確認して見てください。
ウェブアプリマニフェスト | Web | Google Developers

2.エントリポイントの作成

まずは、エントリポイント（最初に読み込まれるページ）を作成します。

今回はこのページで必要なjs等を読み込んであげます。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
　　<!-- vue.js　-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="manifest" href="manifest.json">
    <title>PWA Sample</title>
  </head>
  <body>
    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
     </div>
    <script>
    // service workerの登録関係
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service_worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });
    }
    // vue.jsの設定関係
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    });
    </script>
  </body>
</html>

ここでは、service workerの登録と、vue.jsの読み込みを行っております。

3.ファイルのアップロード

最後にファイルをサーバーにアップロードして終了です。

PWAはhttpsでないと動作しないので、サーバー選びは大切になってきますが、より簡単に利用するにはGitHubページがおすすめです（最近httpsに対応したようです。）

ページの作り方は以下の記事を参考にしてみて下さい。
GitHubを使って3分でHPを公開する。 - Qiita

そしてアップロードして、ページを開くと、
https://poster-keisuke.github.io/

（PCで開くとただの、vueサンプルです笑）

PWAの効力は、スマートフォンのホーム画面に保存して発揮します。

以下のように、webページをホーム画面に保存して下さい。（最近iPhoneのiOS11.3からPWAに対応したので、iPhoneでも利用できます）

その状態でページを開くと、以下の様にアプリ画面の様に全画面表示で表示されるのが分かるかと思います。

このページが開けるのであれば、オフラインでも開くとことができるので、試しにオフラインにして試して見て下さい。
(iPhoneであれば機内モードを利用することで、オフラインにすることができます。)

おわりに

いかがでしたでしょうか。

こうして手を動かしてみると、こんなに簡単な手順でPWAを実現することができるのがわかったかと思います。
ぜひ、一度試してみてください。

次回以降は、WebサービスをPWA適応できるような記事を書こうかと思います。