技術系

PWAなアプリを作成するヨ

技術系
2023.11.16

こんにちは、なかにしです。

今回はWebアプリをPWA化していこうと思います！

PWAとは

Progressive Web Appsの略です。
ざっくり言うと、Webアプリをネイティブ（スマホ）アプリみたいに動かせちゃうぜ！な技術です。

ネイティブアプリと違って審査もいらないですし、
いくつかのファイルを作成して配置するくらいなので、手間もあまりかかりません。

ネイティブに届かない部分としては、
・Bluetoothや近接センサーなどへのアクセスが制限される場合がある（フルアクセスが難しい）
・パフォーマンスがネイティブに劣る
・ユーザーがインストール方法に慣れていない
あたりです。

これらの機能が必須要件の場合はネイティブアプリを作成した方が良いと思いますが、
必須要件でなければpwaの選択は有効です。

ネイティブのエンジニアは少ないですしね。

個人的には「ユーザーがインストール方法に慣れていない」がネックになってくるかと思います。

アプリが「ストアからのインストール」に対し、
PWAはWebアプリなのでブラウザでアプリを開いて、「ホームに追加」をする必要があります。

スマホの扱いに慣れていない方を対象とするアプリならば、
チュートリアル的な画面を作成したり、ポップアップで教えてあげたりする必要がありそうです。

やり方

PWAに必要な構成要素は以下です。
①httpsのサーバー
②Single Page Application
③Service Worker（JSライブラリ）
④App Manifest（manifest.json）

バニラJSのサイトだと全て用意する必要がありますが、
Next, Vue, Angularは全てpwa用のライブラリやプラグインがありますので、
そちらを使用してサクッと実装します。

今回はNext.jsを使用します。
バージョンは13.5.6にしました。

作ったアプリは以下です。
超適当なカウンターアプリです。

vercelにデプロイしたので、
①httpsのサーバー
②Single Page Application
はクリアです。

後は、
③Service Worker（JSライブラリ）
④App Manifest（manifest.json）
の実装をしていきます。

まず ③Service Worker をやっていきます。
Nextで、pwa用のライブラリをインポート

npm i next-pwa

next.config.jsをpwa用の設定に書き換えます。

/** @type {import('next').NextConfig} */

const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  skipWaiting: true,
});

module.exports = withPWA({
  //next.js config
  reactStrictMode: true,
});

これで ③Service Worker はクリアです。

最後に、④App Manifestをやっていきます。
これは、manifest.jsonというファイルを作成し、配置する必要があります。

1から作成するのは億劫なので、簡単に作成できるサイトを使用します。

manifest.jsonの作成は こちら
何を書くか、というのは こちら を参照しました。
※ネイティブアプリっぽくする為には「Display」を「standalone」にしてください。

上記でmanifest.webmanifestとアプリ用のアイコンが出来たと思うので、
それらをすべてpublic配下に配置します。

manifest.webmifestは、manifest.jsonにリネームします。

あとは、pwa化したいアプリの<head>タグに、
pwa用の設定ファイルを読み込ませるコードを追記すれば完了です。

今回はlayout.tsxに追記しました。

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      // 追記ここから
      <head>  
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon.png"></link>
        <meta name="theme-color" content="#b8e986" />
      </head>
      // 追記ここまで
      <body className={inter.className}>{children}</body>
    </html>
  )
}

これで完了です！
お疲れ様でした！

動作確認

▽ PWA前

▽ PWA後

さいごに

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

既存のWebアプリにいくつかファイルを追加するだけで手軽に出来るので、
ぜひお試しあれ！

今回はここまで！
Enjoy Hacking!!

スポンサーリンク