More than 3 years have passed since last update.

PWAをもっと簡単に初めてみる

Last updated at 2021-02-21Posted at 2018-05-13

はじめに

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>