Comments (24)
@aofdev Yep. Our goal is to move most integrations currently using sw-precache/sw-toolbox over to Workbox in Q4 of this year. This quarter we're focusing on getting Workbox stable and working on migration docs.
from pwa.
@zokipirlo People are probably waiting for Workbox 3.0 Google release to use it in every build which were using sw-precache, as Workbox is the future of PWA Service Workers.
As Google provides a easy way to migrate from the previous one to the new one :
See : https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
from pwa.
hey thanks man I fixed this issue actually I have some import issue thanks for your time :)
from pwa.
we need a standard for moving files to the root instead a static folder. This is sometimes required by services like Firebase, etc... Maybe a 'root' folder alongside the 'static' one?
I agree standardizing on how to handle this is likely to come up a few times in the future. If you have a particular view for how root
should be handled alongside static, we'd be open to looking at a PR to flesh that out.
Is there a reason why you are using the precache plugin vs the offline plugin?
They're both really solid SW caching plugins. My team at Google maintain sw-precache and I'm more familiar with how to handle more complex caching strategies using it. As we're building out more PWA add-ons on top of these types of libraries (see https://workboxjs.org/ for our next versions), I'm hopeful the Vue template will be able to take easier advantage of features like offline analytics off the shelf.
from pwa.
The future will use libraries workboxjs as default. ?
from pwa.
Because of the title "Questions & Suggestions" I think it's better to ask here:
@addyosmani how do we notified a user if there are new version deployed? Does it automatically notify the user?
To add FCM service worker from firebase, I must add the script on build/service-worker-dev.js and build/service-worker-prod.js or just add the js file on the dist
https://github.com/firebase/quickstart-js/blob/master/messaging/firebase-messaging-sw.js
Also the notification "App ready for offline use"
Any example on how to do that?
Thank you
from pwa.
@addyosmani, any progress on this?
from pwa.
Thank you!
from pwa.
I'm using vuejs with onsen ui for design and there I need to use workbox js I have installed workbox js as mentioned but I'm getting the error
`
ERROR Failed to compile with 10 errors 13:14:26
This dependency was not found:
* fs in ./node_modules/fs-extra/lib/empty/index.js, ./node_modules/fs.realpath/index.js and 8 others
To install it, you can run: npm install --save fs
Listening at http://localhost:9000`
I have installed fs as mentioned but the error still persists, does vue provides support for workbox?
from pwa.
@wmtoscar First, did you do "npm install" without arguments to install all the dependecies of your project ? Then, it would be easier to us to understand if you can get more informations about the errors.
There is no "Vue supports Workbox" or "Vue doesn't support Workbox", Workbox is an external library which you can use in any javascript (Web) project.
Did you used this instructions to get Workbox ? :
https://developers.google.com/web/tools/workbox/guides/get-started
from pwa.
@wmtoscar Furthermore, Workbox just released their 3.0 (Not a Beta anymore) like yesterday or 2 days ago, so if you're not, try to get updated and try again.
from pwa.
@kevinmarrec yeah I did npm install and I yeah read the guides to get started but wonder how should I create service worker like mentioned in the guidelines. I tried it without vue where it is working but in vue I'm facing this error continuously.
from pwa.
@wmtoscar You're probably using a Webpack template with Vue (Onsen UI uses a CLI with Webpack, right ?), which seems to be laggy with some libraries webpack-contrib/css-loader#447, even if I never faced this problem.
If you only setup a project without Webpack, like from scratch with Vue.js official library inline script, and do the same for Workbox, you should never facing this issue.
from pwa.
@wmtoscar It's a Webpack issue. Did you add Workbox using their Workbox Webpack plugin ?
from pwa.
yeah I have following dependencies in
dependencies :{
"workbox-cli": "^3.0.0",
"workbox-sw": "^3.0.0"
}
dev-dependencies: {
"workbox-webpack-plugin": "^3.0.0"
}
as per requirement I'm bound to use onsen ui. over native vue.js :(
from pwa.
@wmtoscar You should check if one of the solutions provided in my previous link can fix your problem.
Is the 'fs' library the only issue you have in your errors ?
from pwa.
no I have in total 10 errors found in dependency I have tried the above links didn't helped me much I don't have this line which they are asking to modify it in my config.
node: {
fs: 'empty'
}
webpack.dev.conf looks like this.
'use strict'
const fs = require('fs')
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
'./service-worker-dev.js'), 'utf-8')}</script>`
}),
new FriendlyErrorsPlugin()
]
})
whereas webpack.base.conf look like this
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
from pwa.
Hum, thinking about all you said, you should try to make 'fs' library works before making everything work. The error you provided was like it knows where to find the files but the files are missing.
from pwa.
thanks for giving your valuable time on my issue you have any guidelines to fix this.
from pwa.
No problem, I'm glad to know I might help and that you fixed the issue ! Have fun now :P
from pwa.
There is a preview of vuejs pwa migrating to workbox? also, what will happen to production apps?
Im having troubles with pwa + firebase cloud messaging, how do i configure it?
from pwa.
vue-cli
v3 (currently the beta release) uses Workbox as part of it's pwa
template.
There are instructions on using vue-cli
v3 at https://github.com/vuejs/vue-cli#status-beta
(The Workbox integration is https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-pwa/index.js)
from pwa.
after installing @vue-cli, im still getting version 2.9.3..... Also, will it be a improved version ? I can switch my production to this
from pwa.
How can i use firebase push notifications with this pwa template? It's very confusing. The doc's think we are fluent in all tops like http request using curl. I got myself completely confused.
from pwa.
Related Issues (20)
- Suggestion: serviceWorker.register path and routes issue HOT 2
- Offline support when using html5 history api HOT 1
- HELP: VueX and no-param-reassign HOT 3
- Active in Development? HOT 2
- SPA app using angular not working offline for pages other than Index
- Problem when importing firebase-messaging-sw to SW service worker. HOT 2
- Tapable is deprecated in Webpack 4 HOT 4
- offline caching options for pwa HOT 1
- Step missing in installation?
- Cloudflare's Under Attack Mode breaks Service Worker
- how i dynamically change my manifest.json file HOT 1
- How to disable "Add to Homescreen". HOT 1
- Failed to register a ServiceWorker
- Uncaught TypeError: Cannot read property 'call' of undefined
- PWA themeColor is not picking value from manifest.json file HOT 2
- Service Worker Error TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
- Failed to register a ServiceWorker when app run on network address
- POST API not calling on mobile [Chrome v72.0.*] HOT 1
- Uncaught (in promise) DOMException
- Service Worker is not working as expected in react typescript
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 pwa.