nuxt-community / pwa-module Goto Github PK
View Code? Open in Web Editor NEWZero config PWA solution for Nuxt.js
Home Page: https://pwa.nuxtjs.org
License: MIT License
Zero config PWA solution for Nuxt.js
Home Page: https://pwa.nuxtjs.org
License: MIT License
https://example.com/NOT_APPLICABLE
Just add @nuxt/pwa
to your nuxt app
The /
page is not offline cached, or at least uses "netowrkFirst" strategy.
My landing page is somewhat dynamic. It must not be cached for offline use.
I couldn't find a way to override the default caching strategy (which is "offlineFirst") for my landing page and any other non-nuxt assets.
This template package should be in https://github.com/nuxt/nuxt.js/blob/dev/README.md with the others (starter, express, koa, etc)!
If you want i could make a PR for them to added, but it seemed right to first propose it here.
Hi!
I have started using this package and I set it up like this:
modules: [
'@nuxtjs/dotenv',
'@nuxtjs/axios',
'@nuxtjs/toast',
'@nuxtjs/pwa',
['nuxt-validate', {
lang: 'en',
}]
],
workbox: {
runtimeCaching: [
{
// Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*')
urlPattern: 'https://cdn.timeandattendance/.*',
// Defaults to `networkFirst` if omitted
handler: 'cacheFirst',
// Defaults to `GET` if omitted
method: 'GET'
}
]
},
However when I use google chrome audits test it says that
It does not register Service worker and that it does not respond with 200 when offline, and as far as I am aware, this is what this package is supposed to do?
I just installed the pwa-module and my service worker is not registering. I only the get error "Uncaught TypeError: self.WorkboxSW is not a constructor" and when I check the error using google development code it shows me this block of code. Can anyone tell me why I am getting this error?
const workboxSW = new self.WorkboxSW({
"cacheId": "TestApp",
"clientsClaim": true,
"directoryIndex": "/"
})
This is my nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: TestApp',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },z
{ name: "apple-mobile-web-app-capable", content: 'yes'},
{ name: 'apple-mobile-web-app-title', content: 'TestApp},
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'apple-touch-icon', href: 'images/static/compass-192x192', size: '192x192'}
],
script: [
]
},
manifest: {
name: 'Example App',
short_name: "ExampleApp",
description: "A test app!",
background_color: "#1C8847",
theme_color: "#6EB450",
start_url: "/",
scope: "/",
display: "standalone",
lang: "en-GB",
orientation: "any",
icons: [
{
src: "/images/icons/compass-48x48.png",
sizes: "48x48",
type: "image/png"
},
{
src: "/images/icons/compass-72x72.png",
sizes: "72x72",
type: "image/png"
},
{
src: "/images/icons/compass-96x96.png",
sizes: "96x96",
type: "image/png"
},
{
src: "/images/icons/compass-192x192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "/images/icons/compass-512x512.png",
sizes: "512x512",
type: "image/png"
}
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/**
* External Libraries
*/
modules: [
'@nuxtjs/axios',
'@nuxtjs/dotenv',
'@nuxtjs/font-awesome',
'@nuxtjs/bulma',
'nuxt-buefy',
['@nuxtjs/pwa', { icon: false }]
],
css: [
'node_modules/bulma/bulma.sass',
'@/assets/scss/main.scss'
],
axios: {
baseURL: process.env.BASE_URL
},
router: {
middleware: [
'clearValidationErrors',
'clearImage',
'clearForm'
]
},
plugins: [
'./plugins/mixins/user.js',
'./plugins/mixins/validation.js',
'./plugins/axios.js',
'./plugins/mixins/messages.js',
'./plugins/mixins/googlemaps.js',
'./plugins/mixins/vue-carousel.js',
{src: '~/plugins/mixins/vue-hellojs.js', ssr: false},
'./plugins/init.js',
'./plugins/functions/axios/LocationAxiosFunctions.js',
'./plugins/functions/axios/ProfileAxiosFunction.js',
'./plugins/functions/axios/AdminLocationAxiosFunction.js'
],
/*
** Build configuration
*/
build: {
postcss: {
plugins: {
'postcss-custom-properties': false
}
},
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
and my package.json file
{
"name": "TestApp",
"version": "1.0.0",
"description": "At test",
"private": true,
"engines": {
"node": "8.11.1",
"npm": "5.6.0"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"heroku-postbuild": "npm run build"
},
"dependencies": {},
"devDependencies": {
"@nuxtjs/auth": "^4.0.1",
"@nuxtjs/axios": "^5.3.1",
"@nuxtjs/bulma": "^1.2.0",
"@nuxtjs/dotenv": "^1.1.1",
"@nuxtjs/font-awesome": "^1.0.3",
"@nuxtjs/icon": "^2.1.0",
"@nuxtjs/manifest": "^2.1.0",
"@nuxtjs/meta": "^2.2.1",
"@nuxtjs/pwa": "^2.0.8",
"@nuxtjs/workbox": "^2.2.0",
"axios": "^0.18.0",
"babel-eslint": "^8.2.1",
"body-parser": "^1.18.2",
"bulma": "^0.7.1",
"bulma-extensions": "^1.0.14",
"clone": "^1.0.4",
"cookie": "^0.3.1",
"debug": "^3.1.0",
"dotenv": "^5.0.1",
"dotprop": "^1.0.2",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"font-awesome": "^4.7.0",
"hash-sum": "^1.0.2",
"hellojs": "^2.0.0-4",
"hover.css": "^2.3.1",
"js-cookie": "^2.2.0",
"lodash": "^4.17.5",
"moment": "^2.22.0",
"node-sass": "^4.8.3",
"nuxt": "latest",
"nuxt-buefy": "0.0.4",
"postcss-custom-properties": "^7.0.0",
"sass-loader": "^7.0.1",
"vue": "^2.5.17",
"vue-carousel": "^0.7.3",
"vue-hellojs": "0.0.4",
"vue-meta": "^1.5.0",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.17",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.17",
"vue2-google-maps": "^0.8.12",
"vuejs-datepicker": "^0.9.29",
"vuex": "^3.0.1",
"workbox-sw": "^3.4.1"
}
}
Some hosting providers (like godaddy) do not allow the "icons" directory in which the Nuxt PWA Icon module puts the icons. This results in a 404 error.
https://ch.godaddy.com/help/warum-werden-dateien-in-meinem-symbole-verzeichnis-nicht-angezeigt-261?lang=en
Let's define a targetDir
with icons
as a default value enabling a different directory name.
Following changes should make it:
File packages/icons/index.js
line 28: add const targetDir = options.targetDir || 'icons';
line 55: replace with const fileName = '${targetDir}/icon_${size}.${hash}.png'
File docs/modules/icon.md
line 21: add
**targetDir**
- Default: `icons`
Hey,
I've learned today that GA can be enabled to track offline user actions as well with workbox. It'd be great if this could be integrated (and auto-enabled when the nuxt analytics module [or GA] is present)
Hi, i'm using github pages to host and I got 404 error on sw.js.
A bad HTTP response code (404) was received when fetching the script.
/sw.js Failed to load resource: net::ERR_INVALID_RESPONSE
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
Nuxt config:
module.exports = {
/*
** Build configuration
*/
build: {
publicPath: 'https://derevandal.github.io/idepead-subscription-frontend/',
}
}
I believe this happens because the script is not injected into the page with publicPath.
Could anyone help me?
Thanks
pwa-module/packages/icon/package.json
Line 13 in ef670b8
It fails with the error: "Cannot find module 'jpgjs'"
I guess this will happen on every AWS environment.
If i add the following to my package.json, everything works fine:
"jimp": "0.3.4"
Related: jimp-dev/jimp#560
https://github.com/nuxt/nuxt.js
Here some example screenshot https://i.imgur.com/hQe6ppA.png ( 5h for request xD ) https://i.imgur.com/575szHF.png https://i.imgur.com/OkF2uo9.png
File loading just stuck until that page manually opened in new tab. As soon as it opened - query finished. As long as it dont open - query in pending state and running.
Another fix is to open developer tools in chrome go to application and push sync button - then request will finish too. https://i.imgur.com/OCjjv3E.png
Same happens in FF.
Maybe somewhere race condition happens
queries from service worker get stuck
queries finished without stucking
There are several warnings in console after upgrade to v2.0:
🔧 [Warn] registerRoute() was called with a string containing an Express-style wildcard character. In the next version of Workbox, Express-style wildcards won't be supported, and strings will be treated a exact matches. Please switch to regular expressions for equivalent behavior.
workbox-sw.prod.v2.1.2.js:23 Path String: /**
workbox-sw.prod.v2.1.2.js:23 Wildcard Character: *
workbox-sw.prod.v2.1.2.js:23 Learn More: https://goo.gl/xZMKEV
workbox-sw.prod.v2.1.2.js:sourcemap:23 🔧 [Warn] registerRoute() was called with a string containing an Express-style wildcard character. In the next version of Workbox, Express-style wildcards won't be supported, and strings will be treated a exact matches. Please switch to regular expressions for equivalent behavior.
workbox-sw.prod.v2.1.2.js:23 Path String: /_nuxt/**
workbox-sw.prod.v2.1.2.js:23 Wildcard Character: *
workbox-sw.prod.v2.1.2.js:23 Learn More: https://goo.gl/xZMKEV
When I configure pwa workbox module,runtimeCaching configuration urlPattern is a resource picture of the site, this site and my official domain name is not consistent.
Example:
runtimeCaching: [{
urlPattern: 'localhost:3000/.*',
handler: 'cacheFirst',
method: 'GET'
},{
urlPattern: 'https://assets.***.net/.*',
handler: 'cacheFirst',
method: 'GET'
}]
https: //assets.***.net/ related to the picture of the API, I would like to save some pictures through this website api (in the service worker)
Unfortunately, when I build and start nuxtjs-start-demo, the workbox module gives an error on the chrome console: The response does not meet the criteria for being added to the cache.
And application has no related image caches.
This is because https: //assets.***.net/ is an external link which need cross-domain, so workbox can not cache the site's picture?
there are other ways to solve this problem?
Hello,
As per default options og:title, og:description will be set as per the package.json or from nuxt.config, but if set the title & description from page the og:title & og:description remains the same, is there any options by which it will take default values for og:title from title & og:description from description from pages?
head () {
return {
title: `Foo`,
meta: [
{
hid: 'description',
name: 'description',
content: 'page foo'
}
]
}
}
https://github.com/nuxt-community/pwa-template
$ vue init nuxt-community/pwa-template my-project
$ cd my-project
# install dependencies
$ npm install # Or yarn install
$ npm run build
$ npm start
Error-less PWA application.
Error in browser console when entering /:
workbox.3de3418b.js:158 Uncaught (in promise) WorkboxError: An error was thrown by workbox with error code: ;'request-not-cached' with extras: '{"url":"http://localhost:3000/_nuxt/layouts_default.061f990e7d3f96dc329e.js","error":{}}'
at http://localhost:3000/_nuxt/workbox.3de3418b.js:160:1358
at Generator.throw (<anonymous>)
at step (http://localhost:3000/_nuxt/workbox.3de3418b.js:83:30)
at http://localhost:3000/_nuxt/workbox.3de3418b.js:96:13
WorkboxError @ workbox.3de3418b.js:158
(anonymous) @ workbox.3de3418b.js:160
step @ workbox.3de3418b.js:83
(anonymous) @ workbox.3de3418b.js:96
Hi,
I am using module https://github.com/Aerolab/nextjs-pwa
I have problem with this module. I added icon.png to /static folder and after I ran "yarn build" it shows that icons are created but then in Chrome Console in Application tab (im Manifest section) I have 7 blank icons (64x64, 120x120 etc.). This working well on dev and when I build locally (which is more weirder) and start with 'nuxt start'.
Hello!
If I try run yarn add @nuxtjs/pwa
I get this error:
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
warning nuxt > [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=6.11".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
and after update my babel, i still get same error.
this is my package.json:
{
"name": "try1",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "Andrew Karnegy <[email protected]>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"axios": "^0.17.0",
"nuxt": "^1.0.0-rc9",
"@nuxtjs/pwa": "latest",
"typed.js": "^2.0.6",
"vue-awesome": "^2.3.3",
"vue-carousel": "^0.6.5"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-preset-env": "^1.6.1",
"coffee-loader": "^0.9.0",
"coffee-script": "^1.12.7",
"eslint": "^4.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"node-sass": "^4.5.3",
"pug": "^2.0.0-rc.4",
"pug-loader": "^2.3.0",
"sass-loader": "^6.0.6"
}
}
I am trying to precache just some of the pages of my application. It seemed to work correctly running the application in local (using build + start), but in production with https seems to not work correctly. This is my config:
workbox: {
globIgnores: [
'node_modules/**/*',
'**/*lang-*', // Not precaching languages
]
}
When I inspect the html in prod it adds this:
<link rel="prefetch" href="/_nuxt/lang-it.49931b3009b5bfe75c7b.js">
In local it does not, it just precaches using the workbox the expected ones.
What shall I do?
Hello and many thanks for this great module !
It works automagically for caching JS files, but i try to understand how to cache JSON datas like this : https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
Is there a Workbox module option for that, or can i modify static/sw.js
?
thx
Sorry but I had to leave some ❤️ to contributors here,
This module is working great, my web app PWA audit goes from 12% to 82% after just installing and following the setup guide
Thanks all & great job 👍
https://264-education-heitbuiyfy.now.sh/
Visit the reproduction link in any browser / OS combination and the video plays without problems. Do so on Mobile Safari on iOS and the video freezes after 1–3s and / or doesn’t load at all.
This only happens when the pwa-module (the workbox part of it) is used. The video then plays only the very first time and often freezes after 1–3s, often it doesn’t load / play at all.
This issue looks very similar to this angular/angular#23447 Angular issue, so it might be a core problem inside iOS / their SW implementation? I am not sure, I just ran into this.
I have tried explicitly ignoring the file with globIgnores
and/or exclude
, but wasn’t successful.
Thank you in advance, I appreciate it and the work you have put into this. :)
Video should play when SW is activated in any browser / on any OS.
Video freezes after 1–3s and / or doesn’t play on Mobile Safari on iOS when SW is activated.
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.
Since we did not receive a CI status on the greenkeeper/initial
branch, we assume that you still need to configure it.
If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/
.
We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Writing directly to srcDir+'/static' folder with fixed name violating buildDir (and generate.dir) isolation and corrupting parallel builds.
How to generate few different sites with different routes in same time on same nuxt instance (with different buildDir and generate.dir)?
I recently added pwa-module
to my existing site built with Nuxt.js. I set the Cache-control header of my static assets to expire in one year, but after adding the pwa-module
I had to add an exception for sw.js
, so it wasn't cached.
Would it be possible that pwa-module
added this exception atuomatically (e.g. by overriding the setHeaders method from config's render -> static
)?
The approach I'm thinking of is something like:
this.options.render.static.setHeaders = (res, path) => {
if (path.match(/sw\.js$/)) {
// Prevent caching service worker
res.setHeader('Cache-Control', 'no-cache')
} else {
// Call the user defined setHeaders, if any
}
}
https://github.com/nuxt/nuxt.js
In chrome after some hot reloads page stop loading at all and only anonymous window work.
Terrible developing experience.
No stuck page behaviour
stuck page behaviour
I've been playing around with the workbox component of the pwa module for a couple of days and have got it working with my hosting environment, but I seem to have a configuration problem.
For some reason only routes that I visit are being cached and then available offline. As far as I am concerned, this is not offline support as trying to navigate to other routes produces a browser error page.
This is strange, as in the sw.js file I can see that all of the nuxt js files for each route are being precached. However, trying to navigate to a route that I didn't visit while online gives the standard browser error (even though the corresponding nuxt js file is cached).
Is this the expected behaviour or is my configuration incorrect?
Hi,
I'm getting the current error during the Nuxt build, because of the pwa module.
It does not seem to be compatible with the new hook system, as described in the release note.
We have a new internal hook system now, some modules can be broken with 1.0 if they were relying on this.nuxt.plugin(), instead, they will have to use this.hook(), see module hooks documentation.
The error:
ERROR Nuxt error
Error: nuxt.plugin('build',..) is not supported. Use new hooks system.
- nuxt.js:88 Nuxt.plugin
[app_front]/[nuxt]/lib/core/nuxt.js:88:13
- index.js:54 ModuleContainer.nuxtWorkbox
[app_front]/[@nuxtjs]/workbox/index.js:54:13
- module.js:155 Promise
[app_front]/[nuxt]/lib/core/module.js:155:30
- Promise
- module.js:139 ModuleContainer.addModule
[app_front]/[nuxt]/lib/core/module.js:139:12
- module.js:90 ModuleContainer.requireModule
[app_front]/[nuxt]/lib/core/module.js:90:17
- index.js:7 module
[app_front]/[@nuxtjs]/pwa/index.js:7:17
- index.js:1 promise.then
[app_front]/[@nuxtjs]/pwa/index.js:1:146
- next_tick.js:188 process._tickCallback
internal/process/next_tick.js:188:7
I tried two projects, both give me this error multiple times (for different files):
Uncaught (in promise) WorkboxError: The request fpr 'http://localhost:5000/_nuxt/pages/channels/_id.e42804cd97f511c7a4d6.js' failed the criteria to be cached. By default, only responses with 'response.ok = true' are cached.
at http://localhost:5000/_nuxt/workbox.dev.c21f51f2.js:169:1358
at Generator.throw ()
at step (http://localhost:5000/_nuxt/workbox.dev.c21f51f2.js:95:30)
at http://localhost:5000/_nuxt/workbox.dev.c21f51f2.js:108:13
at
If I actually access the referenced file, it opens fine in the browser, giving a status 200.
Support for iOS 11.3, where web app banners are not shown and partial PWA support. I think that we need some support for those browsers which don't support everything yet.
Detect if when the browser is on iOS, and show a install prompt for the PWA the second the the user visits.
See: https://developers.google.com/web/updates/2018/06/a2hs-updates
There are incoming changes to the Chrome browser, for the install prompt.. It will be possible to manually trigger the install prompt.
Maybe implement this code as feature, to automatically show or not show the prompt.
Hi all,
I ran into some troubles with the manifest json since I changed the publicPath to a cdn.
If i run lighthouse it complains about same-origin policy for the manifest file. Even though I found w3c/manifest#360 and it tunrs out cross origin should work just fine, the browser and several testing scenarios complain about it if the manifest is delivered by a different host.
I think it would be a easy fix if I can overwrite the publicPath within manifest module (I did the same for workbox ;), unfortantuly as I checked the source code of the manifest module I couldn't figure it out how to apply a different publicPath in this case.
Would be great to add an option to overwrite the public path, If you want me to I can create a PR and try to fix it up?
Thanks
Simon
Lighthouse report - 1 failed Audit:
User can be prompted to Install the Web App
Browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more.
Warnings: ERROR: start_url must be same-origin as document
Hi! I want to notify my clients to upgrade their application when the website is updated. I noticed that there is a Workbox module called Workbox Broadcast Cache Update. Is there any standard way to use it on Nuxt pwa?
Hi there,
so I am using the module, mainly for the icon.
Regarding the meta, I am getting the meta I need from my endpoints in my application and I set them in head.
I want to disable some of the meta that the module applies and not override them.
Specifically the og:type
og:title
og:description
, the module inserts them as meta name, while they should be meta property.
Here is the output on my page
And this is my nuxt config
App shell is described in https://developers.google.com/web/updates/2015/11/app-shell
After the initial load, SSR basically takes as much time as the client to just render them. Unless nuxtServerInit is used, we can just take the SPA file and respond with it. It can be cached longer and is network resource efficient.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.