next-pwa vs next-offline

[Ojay]

Hi all,

We're looking to setup our app as a PWA, mainly because we need some offline capabilities. I know this is a little vague of a question and probably comes down to project specifics, but, I wondered if anyone had any insight on how next-pwa and next-offline stack up against each other?

Is there another best practice alternative? Just wondering if there's a bit of a consensus surrounding serving content offline with Next.

Thanks so much for your help 🤙

[Ojay]

Cheeky bump 😬

[jensmeindertsma]

I went with next-offline because next-pwa also enables the service worker during development, which was getting really annoying for me. That also makes it very slow in development.

[Ojay]

Thanks for the feedback, much appreciated.

[gramsco]

next-pwa use the example below as an example of a config file here

const withPWA = require('next-pwa')
 
module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === 'development',
    register: true,
    scope: '/app',
    sw: 'service-worker.js',
    //...
  }
})

Isn't that enough to prevent this from happening?

[ankesh7]

We are using next-offline and it is working well with a custom config. Haven't used next-pwa although but the runtime strategy looks very promising that is ideal for most web applications like NetworkFirst for /api/ and staleWhileRevalidate strategy for fonts and images, etc.

Next-offline in general implements caching for every resource with https:// and high limit on entries which made us fall under trap with video segments from external origins being cached leading to storage quota errors for many of the users.

I would say at the end you should always have your own strategies and patterns to cache resources which next-pwa is great at doing. If I had to use next-pwa, I would still go about having a strategy that only caches resources from my origin because it fits well to my personal use-case and caching everything is not ideal.

[redbar0n]

next-offline vs next-pwa:

next-pwa “is more opinionated (with presets of workbox configurations) and aims to be as simple as possible for users.” according to the author himself.

next-offline is "more mature", based on having existed 2 years longer (since 2018), according to npmtrends.com.

next-offline is more popular, but both are rising, and next-pwa is rising faster:

• npm trends: https://www.npmtrends.com/next-offline-vs-next-pwa
• star history: https://star-history.t9t.io/#hanford/next-offline&shadowwalker/next-pwa

Bundle sizes (min & gzip) for both are quite large (potentially prohibitively so, imho):

• next-pwa 5.0.0 takes 787.3 kB. Update: next-pwa 5.4.0 increased to 1.4 MB! See: discussion.
• next-offline 5.0.3 takes 916.3 kB. Update: next-offline 5.0.5 increased to 1.4 MB!

If you are using Expo Web, then next-offline is the one they refer to in the expo web docs, so it seems a safer bet in that case.

[redbar0n]

Now, over 6 months later, it seems that next-offline has significantly waned in popularity, and download numbers are shrinking. While next-pwa is continuing its meteoric rise in downloads:

https://www.npmtrends.com/next-offline-vs-next-pwa

For whatever that is worth.

[milad-afkhami]

Beside all the answers, i prefer using next-pwa for this particular reason:

• Unlike next-offline it will not force us to write a custom server, which we now from next.js docs that :

A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

[lubojanski]

but does next-offline force you to write custom server?

[milad-afkhami]

Yeah i think so
based on next-offline docs

You'll want to use the next.js custom server API. The easiest way to do that is creating a server.js that looks like this:

Am i right or is it just for serving service-worker.js and nothing more?

[zacBkh]

Hello everyone,

I am trying to create a PWA using next js with offline support without any libraries
I don't like the abstraction they provide and all our app is becoming instantly dependant on someone's else code.
By the way I believe next offline and so many others are not maintained anymore.

My PWA is installable and works well however when I want to cache resources, I have an issue.
In a traditional website without framework, we would cache any page by specifying it's relative path, for example : ["/offline-page.html"] and we would add this to cache.All or something like that.
But in next js, how can we do this since our pages are served through many cryptic files bundled in chunks?

My app is working well offline if I put a "offline.html" file in my /public folder.
But then we loose the benefit of next and react because we cannot use jsx, local states etc etc.

Am I missing something here?

[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

[Yevhenns]

Hey. What's the problem? I'm getting an error in actions.ts - await webpush.sendNotification(subscription:
Argument of type 'PushSubscription' is not assignable to parameter of type 'import(".../node_modules/@types/web-push/index").PushSubscription'.
Property 'keys' is missing in type 'PushSubscription' but required in type 'import(".../node_modules/@types/web-push/index").PushSubscription'.ts(2345)
index.d.ts(209, 5): 'keys' is declared here.

[kennethhaspeel]

I'm having the same problem as @Yevhenns is having. The code works, the notification is sent in development. But on deployment to Vercel the build fails.

When i console log subscription in the sendNotification function, the keys are present. So not really sure what the problem could be

[kennethhaspeel]

i think i found the solution. You also have to import the correct type
import webPush, {PushSubscription} from 'web-push'

If you do not import this PushSubscription from web-push, it uses a default one from typescript (i think) which doesn't have the keys property.

I tried editing the doc page but not sure if i did everything correct