Potential to make it a PWA out of the box

[dan-gamble]

I know it's very early days, and tbh i'm not even fully sure what a PWA is, but since this does SSR so from the start i wondered if the same was achievable with PWA's.

I've no idea what this entails was just an idea that popped into my head that would make nuxt sites even speedier 👍

_{This feature request is available on Nuxt.js community (#c18)}

[Atinux]

I was also thinking about it, I will try to make the documentation a PWA, I'm actually using lighthouse to check the most "tasks" I can.

If some tasks can be achieved trough Nuxt.js, the feature will be added to it.

I keep this issue open to let people add their knowledge about PWA and in which way Nuxt.js can help to create easily progressive web applications to make the web faster 🔥

Thank you @dan-gamble for you implication 👍

[dan-gamble]

Awesome, looking forward to seeing what comes of this 👍

[vladejs]

I think this feature would put nuxt to another whole level, since a lot of developers will use PWA to fill the gap of missing native apps for their products.

This article explains what a PWA is and shows a detailed example on building one:

https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/#top

[ryandeussing]

Here's a recent PWA talk that may be of interest:
https://www.youtube.com/watch?v=By-iWxp_3vA&list=UU_DH6Z_K_3JRgOdDnwHLrLw

Slides:
Part 1 (Background): https://drive.google.com/open?id=0ByaMoD6mi690TWJPVndpNF9hbG8
Part 2 (Tools): https://drive.google.com/open?id=0ByaMoD6mi690TVhiWmdDcEdWV28

[WinstonFassett]

I did a little experiment where I got the offline-plugin (https://github.com/NekR/offline-plugin) working with Nuxt, but I had to make a couple of changes to Nuxt.

My biggest problem was that the OfflinePlugin was generating the service worker sw.js file in the "_nuxt" folder. While I was able to get it to cache my index route ('/'), it was unable to load it when offline. It seems that scoping problems prevented the browser from using the cache for anything outside the _nuxt folder (everything else).

I couldn't find a way around this, so I forked Nuxt and removed the usage of "_nuxt/". Everything seemed to work fine, but I would rather have found another way to dynamically generate the sw.js file at the root of the site.

The other problem was that the OfflinePlugin should not be included in the server build because it will overwrite the sw.js generated by the client build. I couldn't find a good way to enable it for just the client build, so I added a config option, build.clientPlugins, so that in my nuxt.config.js, I have:

  build: {
    clientPlugins: [
      new OfflinePlugin({
        caches: {
          main: [':rest:', ':externals:']
        },
        externals: ['/', '/offline', '/about', '/help']
      })
    ]
  }

This will generate a service worker that will precache all the webpack build outputs along with any paths specified in externals. With the above config, it caches a few server-rendered pages listed in externals. It can also cache stuff made available via static/.

With those items cached, the user can load any of those URLs in the browser while offline. The cached "/about" page still says "This page is loaded from the server", which is kinda cool, but doing that kicks off a load of server rendering as it starts pre-caching those pages. It probably makes more sense to only cache the shell/index route and provide an "entry" handler to OfflinePlugin which would just intercept every request and handle routes client-side.

i.e. while offline with the service worker installed, going to /about should be handled by the service worker 1) returning a cached root shell (i.e. "/") and then 2) dynamically loading the remainder of the route. In that case, loading /about while offline would always say "this page is loaded from the client" regardless of how you browse to it. This would be nice because the server would only need to do server rendering for first-time visitors who have never installed the service worker. All return visitors could get 100% client rendering. Theoretically. I haven't tried that bit and am not sure how much further I will go with it.

That was my experience with https://github.com/NekR/offline-plugin. Again, I had to hack on Nuxt itself in order to get it generate the sw.js in the right place and to exclude the plugin from the server build, but maybe there's another way.

[Atinux]

Thank you a lot @WinstonFassett for sharing your experience with Nuxt and offline-plugin.

We will take a look with my brother when the 1.0 of nuxt.js will be out and our focus will be on the PWA, thanks to you guys we have already some direction to make nuxt create PWA 😃

[addyosmani]

<3 Nuxt. If y'all decide to explore PWAs, our team on Chrome also work on Service Worker libraries and tools (sw-precache, sw-toolbox, offline-analytics, background-sync) and would be happy to provide some pointers.

[alexchopin]

Hi @addyosmani,
It's actually in our plan to make Nuxt a Framework wich includes all your need to create PWA easily.
Would be nice to see more about your Service Worker libraries and tool 👍

[apertureless]

Sounds good!
I've got a basic service worker up and running. And it kind of works fine with nuxt. However it would need some work to cache the assets which get hashed by webpack.

[afifsohaili]

would love to see nuxt + pwa

[buhrmi]

Somebody make a nuxt/pwa template? :)

[pi0]

Just prepared nuxt-starter-pwa template which brings PWA and manifest generation out of the box into Nuxt 😎 ( nuxt.config.js )

[rwatts3]

Nice work @pi0

[Atinux]

It's now possible with https://github.com/nuxt-community/pwa-template 🙌

[daviddsp]

Hello everyone.

Is possible to used a web app aplications with SSR in nuxt?

My ideas is to generate service workers for to send push notifications to my users.

Any ideas?

[pi0]

https://pwa.nuxtjs.org/modules/onesignal.html

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.