Comments (17)
<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.
from nuxt.js.
Just prepared nuxt-starter-pwa template which brings PWA and manifest generation out of the box into Nuxt ๐ ( nuxt.config.js )
from nuxt.js.
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 ๐
from nuxt.js.
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 ๐
from nuxt.js.
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 ๐
from nuxt.js.
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
from nuxt.js.
Somebody make a nuxt/pwa template? :)
from nuxt.js.
would love to see nuxt
+ pwa
from nuxt.js.
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.
from nuxt.js.
It's now possible with https://github.com/nuxt-community/pwa-template ๐
from nuxt.js.
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
from nuxt.js.
Awesome, looking forward to seeing what comes of this ๐
from nuxt.js.
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.
from nuxt.js.
Nice work @pi0
from nuxt.js.
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?
from nuxt.js.
https://pwa.nuxtjs.org/modules/onesignal.html
from nuxt.js.
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.
from nuxt.js.
Related Issues (20)
- Nuxt 3 - Convert `404.html` file to `404.shtml` on `Cpanel` hosting HOT 1
- nuxt generate is imported by "virtual:#internal/nitro/virtual/storage", but could not be resolved โ treating it as an external dependency.
- https://nuxt.com isn't working on firefox HOT 2
- "No match found for location with path" is still spammed on unknown paths HOT 1
- Uncaught SyntaxError when building Nuxt.js 3.11.2 with Webpack HOT 1
- Docs: Nuxt Layers video update with latest one
- Docs: Nuxt Layers video update with latest one
- node .output/server/index.mjs error HOT 2
- Cannot find module from node_modules
- Move `@nuxt/ui-templates` into nuxt/nuxt monorepo
- Refreshed NuxtWelcome design (+ other error pages?)
- Resolve `runtimeConfig` within nuxt options
- public subfolder name collision with route causes 301 redirect HOT 1
- Unable to access logger in client or server from plugin HOT 1
- Error with `dist` symlink with SST Ion
- Navigating from router-view throws Missing required param
- Failed CSS preloads shouldn't throw errors
- Big bundle size due to jsdom canvas HOT 1
- ้กต้ขๅทๆฐ ้กต้ขๆๅจ
- ERROR (node:52837) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.js.