This Section Discusses PWAs in Nextjs

[Qodestackr]

I took a project where the client needed a web app and mobile app. But due to time and budget,I knew it was impossible to ship both: the Backend API, Great frontend User Experience and Mobile Application.

However, I managed to convince that PWAs could server as a "lite version" of the mobile functionality which could save me huge amount of time and effort to focus on other things.

Am feeling pressured, everytime I bring a tool,it claims to have added PWA but it doesnt behave same way when its added to home screen.

const withPWA = require("next-pwa")({
  disable: process.env.NODE_ENV === "development",
  dest: "public",
  register: true,
  skipWaiting: true,
});

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

const nextConfig = withPWA({
  images: {
    formats: [
      "image/avif",
      "image/webp",
      // "image/png",
      // "image/jpeg",
      // "image/gif",
    ],
    domains: ["utfs.io"],
    loader: "default",
    // path: "/_next/image",
    minimumCacheTTL: 60,
    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
  i18n: {
    defaultLocale: "en",
    localeDetection: false,
    locales: ["en", "sw", "fr", "de"],
    domains: [
      {
        domain: "afyamed.org",
        defaultLocale: "en",
      },
    ],
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  experimental: {
    // …
    serverComponentsExternalPackages: ["@react-pdf/renderer"],
  },
});

module.exports = nextConfig;

WHAT SHOULD I DO? IS IT BECAUSE NEXTJS IS ITERATING TOO FAST FOR OTHER ECOSYSTEMS AROUND IT TO CATCH UP?

[hyjoong]

Are you aware that in your posted code, the PWA is disabled in the development environment?

 disable: process.env.NODE_ENV === "development",

PWAs are typically disabled in the development environment. This is because service workers and caching mechanisms can interfere with reflecting file changes or make debugging difficult during development. In the production environment, the PWA should work correctly, so please test it there.

[Qodestackr]

https://www.youtube.com/watch?v=ixvaNz_XVkg

…

On Thu, May 30, 2024 at 11:24 AM henry ***@***.***> wrote: Are you aware that in your posted code, the PWA is disabled in the development environment? disable: process.env.NODE_ENV === "development", PWAs are typically disabled in the development environment. This is because service workers and caching mechanisms can interfere with reflecting file changes or make debugging difficult during development. In the production environment, the PWA should work correctly, so please test it there. — Reply to this email directly, view it on GitHub <#66366 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANEBAJ5RHCYBLJXA4AV3FF3ZE3O3JAVCNFSM6AAAAABIQHNQSCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TMMBSHE3DA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Qodestackr]

Sorry for the issues I caused, I've already fixed one.

[leerob]

Hey everyone. We now have updated documentation on building PWAs with Next.js.

https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps