ISSUE CODE:[ Maple_syrup_cookie_038] How to do PWA with Nuxt3 /Nuxt3でPWAする方法

ISSUE:Request: I can't Execute PWA with Nuxt3

Hello, good evening. I'm Karen Itonaka from the Support Station.

こんにちわ、こんばんわ、支援局の井戸中　花蓮です。操作をまちがえました？（バグ？）

成り行きで更新します。

مرحبًا ، هذا Karen Itonaka من محطة الدعم.

Status/Feedback

Survey completed / Solved
調査完了 / FIX

Ticket

(*********)

Environment

・Windows10 Pro(22H2)

・Node (v18.16.0)

・Vue3 (cli 5.0.8)

・Nuxt3 (3.5.3)

Incident

I'm trying to run PWA on nuxt3, but ServiceWorkers don't start and PWA doesn't work.
How do I solve this?

Nuxt3でPWAを実行しようとしていますが、サービスワーカーが起動せず、PWAがうごきません。どうすればよいですか？

Probable cause

In the past, it seems that PWA was selected and operated with vue create without using Nuxt.

従来はNuxtを使用せず、vue create で PWAを選択して動作させていたそうです。

In using Nuxt3 this time, it seems that PWA is installed after creating a project with Nuxt3 (npx nuxi init).

今回Nuxt3を使うにあたり、Nuxt3でプロジェクトを作り(npx nuxi init)そのあとでPWAをいれているそうです。

Answer

I will explain on the premise that I am using Nuxt3 (nuxt@3.5.3) and @vite-pwa (@vite-pwa/nuxt@0.1.0) + Chrome browser (forTest).

Nuxt3 (nuxt@3.5.3) と @vite-pwa (@vite-pwa/nuxt@0.1.0) + Chrome ブラウザ (Test用) を使用している前提で説明します。

First, as you probably know, to work as a PWA you need to
1. have a manifest,
2. have a service worker, and
3. have access to the necessary icon information.

まず、ご存知と思いますが、PWA として機能するには、次のことが必要です。
1. マニフェストがある、
2. サービスワーカーがある、そして
3. 必要なアイコン情報にアクセスできる。

Since we are trying a new PWA with Nuxt3 this time, it is probably due to lack of definition in the manifest or omission of settings.

今回は Nuxt3 で新しい PWA を試しているため、おそらくマニフェストの定義不足か設定漏れが原因と考えられます。

I will show you the steps to create a new development environment.

新しい開発環境を作成する手順を説明します。

1. > npx nuxi init nuxt3-pwa

2. > cd nuxt3-pwa
3. > npm install

4. > npm run dev

5.(Chrome) check http://localhost:3000 & F12:DevTools[Application] & Check [Manifest]and[Service Worker]

Chromeでhttp://localhost:3000をチェックして、F12のDevToolsのアプリケーションメニューのマニフェストとサービスワーカーを確認します。

At this point, No manifest, no service is right!

この時点ではマニフェストもサービスも「ない」のが正しいです！
6.> Stop Nitro(CTRL+C at "npm run dev" Window)

開発サーバをCTRL＋Cで停止します。

7. > npm add @vite-pwa/nuxt -D

and see document

8. Edit nuxt.config.ts File (Add molules & pwa & workbox & devOptions entry)

nuxt.config.tsファイルを編集します（molulesとpwaとworkboxとdevOptions のエントリを追加します）

nuxt.config.ts

from　変更前

to this 変更後はこうします

// https://nuxt.com/docs/api/configuration/nuxt-config
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ["@vite-pwa/nuxt",
  ],
  pwa: {
    registerType: "autoUpdate",
    includeAssets: ["favicon.ico"],
    client: {
      installPrompt: true,
    },
    manifest: {
      name: "pwa-sample",
      short_name: "pwa-sample",
      theme_color: "#4DBA87",
      icons:[
        {
          src: "./icons/android-chrome-192x192.png",
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: "./icons/android-chrome-512x512.png",
          sizes: "512x512",
          type: "image/png"
        },
        {
          src: "./icons/android-chrome-maskable-192x192.png",
          sizes: "192x192",
          type: "image/png",
          purpose: "maskable"
        },
        {
          src: "./icons/android-chrome-maskable-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable"
        }
      ],
      start_url: ".",
      display: "standalone",
      background_color: "#000000"
    },
    workbox: {
      navigateFallback: '/',
    },
    devOptions: {
      enabled: true,
      type: "module"
    },
 },
  devtools: { enabled: true },
})