PWAを設定してみた

こんにちは♪
今回が初めての執筆なので頑張ろうと思います。

PWAとは？

PWAというのはProgressive Web Appの略で、Webサイトを“アプリのように”使えるようにする最新技術で、ネイティブアプリに近い体験ができるやつだそうです。
つまり普通のアプリと同じようにWebサイトを閲覧できると言うことです。

下準備

まずWebサイトを作りましょう。
次にhttpsにしましょう。
↑httpsは必須だとAIが言っていたけどそんなことない気がします。
でもとりあえずやったほうがいいです。

作ろう

ファイル構造を下の方に書いたので先に見るといいです。

まずはサイトの好きな場所(staticというファイルがおすすめ)にmanifest.jsonをおきます。
nameのとこには好きな名前を、short_nameのとこには好きな省略した名前を…のように設定していきます。iconsのところは好きなサイズのPNGなどのファイルを自分のサーバーなどに用意してリンク、サイズ、MIMEタイプを記述してください。1つ以上あればいいです。displayのとこは他にも種類があるらしいです。

設定値	説明
fullscreen	ブラウザUIを完全に隠し、画面全体をアプリに使用。ゲームや動画視聴など没入型に最適。
standalone	ネイティブアプリのような外観で起動。ブラウザのアドレスバーやUIは非表示。一般的なPWAでよく使われる。ちなみに今回はこれです。
minimal-ui	アプリ風の見た目だが、戻る/進むなど最低限のブラウザUIを表示。ユーザーに多少の操作補助を残す。
browser	通常のWebサイトとしてブラウザで開く。デフォルト値。

Copilotによる

manifest.json

{
  "name": "example",
  "short_name": "ex",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/static/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

ここまでできたら次です。次のservice-worker.jsもstaticなどにおきます。コード上の//ここって書いてあるところをあらかじめオフラインでも使えるようにダウンロードさせる部分を設定できます。

service-worker.js

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open("v1").then(cache => {
      return cache.addAll([
        "/",
        "/index.html",
        "/static/css/style.css",
        "/static/js/app.js" //ここ
      ]);
    })
  );
});

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

次にサーバーにあるすべてのhtmlに出来るだけ次のコードを入れてください。

index.html

<link rel="manifest" href="/static/manifest.json">
<script>
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/static/service-worker.js")
    .then(() => console.log("Service Worker registered"));
}
</script>

つまりこんな感じです。

ファイル構造

/static
  service-worker.js
  manifest.json
  
/templatesなど
  index.htmlなど

ちなみに自分みたいにPythonのFlaskでサーバーを動かしている人はPython側をいじる必要は特にありません。

こんな感じでセット完了です。

登録

PWA設定をしたら次は利用者が登録する必要があります。と言ってもやることはとても簡単です。

iPhone

Safariなどで該当のサイトを開く。
下らへんにある共有を押す(Safariの場合)。
ホーム画面に追加を押す。

Android

Chromeなどで該当のサイトを開く。
右上らへんにある縦に点が3つあるやつ押す(メニュー？)(Chromeの場合)。
ホーム画面に追加を押す。
インストールを選択。
再度確認が出てきたらインストールを押す。

どちらもこの手順を踏めばホーム画面に追加されます。これらを消したくなれば普通のアプリのように長押しで消せます。ただしiPhoneの場合はスクリーンタイムで何かしら設定が必要だったような…？
また端末やバージョンによって多少異なる可能性があります。

見た感じiPhoneではややブラウザ操作の要素は残りますが履歴も残らずに使うことができそうです。
対してAndroidではブラウザ操作よりは完全にアプリ感が強いがChromeに履歴が残りました。

終わりに

今回はPWAの設定の方法について紹介していきました。もしわからないところがあれば遠慮なく生成AIにお聞きください()
特にiPhoneのアプリの公式ストアであるApp storeにアプリを投稿するのは年間でも10000円は超えてくるのでアプリを作るのは諦めていたのですが擬似的に同じようなことができてとても良かったです。
それに設定にも10分くらいしかかからなかったので素晴らしいと思いました。

追記

QiitaはPWA対応サイトっぽいです。

もし誤字があったらマジですいません。
ご連絡いただければ早急に直します。