Questions & Suggestions

[arpowers]

Few questions/suggestions about the project...

• Is there a reason why you are using the precache plugin vs the offline plugin? (https://github.com/goldhand/sw-precache-webpack-plugin vs https://github.com/NekR/offline-plugin) -- seems like the precache plugin doesn't support appcache (ios) while the offline one does, but maybe there's something i dont know

• 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?

[addyosmani]

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.

[aofdev]

The future will use libraries workboxjs as default. ?

[addyosmani]

@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.

[odick]

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

[zokipirlo]

@addyosmani, any progress on this?

[kevinmarrec]

@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

[zokipirlo]

Thank you!

[bhavikji]

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?

[kevinmarrec]

@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

[kevinmarrec]

@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.

[bhavikji]

@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.

[kevinmarrec]

@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 https://github.com/webpack-contrib/css-loader/issues/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.

[kevinmarrec]

@wmtoscar It's a Webpack issue. Did you add Workbox using their Workbox Webpack plugin ?

[bhavikji]

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 :(

[kevinmarrec]

@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 ?

[bhavikji]

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]')
        }
      }
    ]
  }
}

[kevinmarrec]

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.

[bhavikji]

thanks for giving your valuable time on my issue you have any guidelines to fix this.

[bhavikji]

hey thanks man I fixed this issue actually I have some import issue thanks for your time :)

[kevinmarrec]

No problem, I'm glad to know I might help and that you fixed the issue ! Have fun now :P

[eeerrrttty]

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?

[jeffposnick]

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)

[eeerrrttty]

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

[eeerrrttty]

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.