とりあえず プログレッシブウェブアプリを 体験したい方へ(Nuxt.js)

概要

プログレッシブウェブアプリ（PWA） とは

プログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと
同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。

はじめてのプログレッシブウェブアプリ より引用

PWA はまるでスマートフォンアプリのようにオフラインで動作できたり(ブラウザのようにネットワークエラーにならない)、インストールなどをすることができます。

• オフラインでの動作
  オンライン時に資源をキャッシュし、それをオフライン時に使用することでオフラインでも動作することができます。

• インストール
  

「...」をインストール などを PC やスマホみたことはないでしょうか。
　 PWA はまるでスマホのアプリケーションのように、端末にインストールが可能です。

PWA を今回は Nuxt.js で体験してみましょう。

npm インストール

以下を参考に npm をインストールしてください。

https://qiita.com/taiponrock/items/9001ae194571feb63a5e
https://qiita.com/PolarBear/items/62c0416492810b7ecf7c

npx インストール

npm install -g npx

pwa プラグインインストール

npm install -g @nuxtjs/pwa

プロジェクト作成

create-nuxt-app ツールでnuxt.jsプロジェクトを簡単に作成することができます。

npx create-nuxt-app <project-name>

入力を促されますので以下の通り入力してください。

Project name 　             　　　:任意
Project description 　      　　　:任意
Author name                 　　　:任意
Choose the package manager  　　　:npm
Choose UI framework         　　　:任意
Choose custom server framework 　:任意
Choose Nuxt.js modules 　　  　　 :Progressive Web App (PWA) Supportは必須、それ以外任意
Choose linting tools 　          :任意
Choose test framework 　         :任意
Choose rendering mode 　         :任意
Choose development tools 　      :任意

サーバ起動

cd 　<project-name>
npm run dev

アプリを確認

Chromeで以下にアクセスしてください。

http://localhost:3000

無事表示されました。しかし、この時点では PWA とは言えません。
試しにオフラインにして画面をリロードしてみましょう。

Chrome の開発者ツールからオフラインにすることができます。
Application タブ、左の Service Workers メニューを選択し、右に表示されている Offline をチェックします。

その状態でリロードしてみましょう。

よくみる恐竜が出てきました。
現在のアプリではオフライン体験ができないことがわかります。

また、インストールが可能ではないこともわかります。

static/sw.js をみてみましょう。

PWA でのキャッシュ登録やオフライン体験は、このサービスワーカー(static/sw.js)から提供されます。
このように何も記述されていないのであれば、恐竜がでるのも当然です。

PWA を体験する

手取り早くlocal環境でPWAを体験するために、nuxt.config.jsに以下を追記します。

  workbox: {
    dev: true
  }

保存をすると再ビルドされると思います。ビルド後、static/sw.js をみてみます。

サービスワーカーの処理が生成されたようです。

ページをリロードし、エラーがないこと、sw.js がサービスワーカーとして登録されたことを確認します。

オフラインでの動作確認

先ほどのようにオフライン、リロードしてみます。

恐竜は出てこなくなり、オンライン時の画面が表示されました。

ネットワークをみてみるとjs ファイルなどがサービスワーカーから返却されていることがわかります。

また、開発者ツールのApplicationタブから左メニューCache/Cache Storageにキャッシュが追加されています。
サービスワーカーはオンライン時に必要な js,html などの資源をキャッシュし、オフライン時にキャッシュを利用して、オンラインと同様の体験を提供します。

インストールの確認

Chromeのメニューに「＜project-name＞をインストール」が追加されました。

押下するとインストールするかと聞かれます。

インストールを押下すると、アプリとしてインストールされたことがわかります。

アプリを起動するとこんな風に表示されました。

参考

https://ja.nuxtjs.org/guide/installation/
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp
https://kotamat.com/post/nuxt-pwa/