quasarframework / quasar-template-pwa Goto Github PK

I've noticed that or build code is not breaking caches after changes. I noticed that the code for our components is composited in app.js which isn't cache-busted (name-hashed) during the build. The official vue-pwa template does support this.

Explanation in last post of this thread.

Issue to be solved.
"Main problem with dynamic changing the theme at runtime is webpack related. Can’t manage CSS since webpack is doing it. Once you import some CSS it is there to stay"

I am unsure if this is already addressed.
Ability to show Android users material theme and IOS the other will be truly unique in my small pool of knowledge.

Edit: Unable to add link of forum thread .
forum.quasar-framework.org/topic/1034/pwa-starter-kit-not-feeling-native-for-half-the-users/3

In Lighthouse report a problem of good practice described in the link below when using quasar for the development of PWA. I'm working on fixing the problem at the quasar's core.
https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

Lighthouse fails with

Audit error: Required Manifest gatherer encountered an error: Unable to retrieve manifest at https://xxxx/statics/manifest.json.

The problem lies with the configuration of sw-precache-webpack-plugin. Simply remove the line containing staticFileGlobs to make the precaching work for all emitted files rather than just for js,html,css,woff,svg solves the problem.

Out of the box, most of the time we would want the precaching to cache all assets for the PWA to work offline. Removing the staticFileGlobs line will achieve that.

Software version

Quasar: 0.15 git+https://[email protected]/quasarframework/quasar-future.git
OS: ArchLinux
Node: 8.8.0
NPM: 5.4.2
Browsers: Chromium 62.0.3202.75

What did you get as the error?

This dependency was not found: * quasar in ./src/main.js

What steps did you take, to get the error?

• fresh install of quasar-template-pwa
• replace quasar-framework version from ^0.14.6 to git+https://[email protected]/quasarframework/quasar-future.git
• yarn run dev
• observe dependency was not found error

The new vue-cli already has pwa support. It might be a good idea to integrate/borrow something from there.

Software version

Quasar: 0.14.6
OS: ubuntu 16.04
Node: 6.3.1
NPM: 3.10.3
Browsers: google chrome 60.0.3112.78 (64 bits)
iOS:
Android:
Any other software related to your bug:

What did you get as the error?

The service worker dont install on localhost.

What were you expecting?

The service worker dont install on localhost.

What steps did you take, to get the error?

Only install the template, run it, and apply the light house.

The pwa template has any special care?

The ability to also wrap Cordova app on the same source code as the PWA starter kit code.
eg. have 2 separate index.html files. 1 for the PWA and 1 for the cordova wrap (without the service workers etc.).

From Google:

Workbox is the successor to sw-precache and sw-toolbox. It is a collection of libraries and tools used for generating a service worker, precaching, routing, and runtime-caching. Workbox also includes modules for easily integrating background sync and offline Google Analytics into your service worker.

Workbox For Webpack tutorial: https://developers.google.com/web/tools/workbox/get-started/webpack

@rstoenescu I'm not doing a PR because this Feature Request is not validated yet and because this is the core of the PWA features so you might want to tweak it for the Quasar framework build process.

quasar init pwa test-pwa

 ℹ Generating Quasar App...

 ✔ Downloaded App template @quasarframework/quasar-template-pwa
fs.js:954
  binding.stat(pathModule._makeLong(path));
          ^

Error: ENOENT: no such file or directory, stat '/tmp/quasar-template-h4btpjt/template'
    at Object.fs.statSync (fs.js:954:11)
    at Object.statSync (/usr/lib/node_modules/quasar-cli/node_modules/graceful-fs/polyfills.js:297:22)
    at Object.copySync (/usr/lib/node_modules/quasar-cli/node_modules/fs-extra/lib/copy-sync/copy-sync.js:27:84)
    at Object.copy (/usr/lib/node_modules/quasar-cli/lib/qfs.js:34:14)
    at generate (/usr/lib/node_modules/quasar-cli/bin/quasar-init:96:11)
    at /usr/lib/node_modules/quasar-cli/bin/quasar-init:90:7
    at /usr/lib/node_modules/quasar-cli/node_modules/download-git-repo/index.js:43:22
    at /usr/lib/node_modules/quasar-cli/node_modules/download/index.js:165:3
    at callback (/usr/lib/node_modules/quasar-cli/node_modules/each-async/index.js:38:4)
    at onetime (/usr/lib/node_modules/quasar-cli/node_modules/onetime/index.js:22:12)

Hello, could you publish on your Readme the size of this library both raw and minified?

Hooraaaaaaaaaay~ Glad to see the pwa template finished!

I am working on the new v0.14 with both the default and the pwa templates. The webpacking in them are amazing, while I feel the linting part can be improved.

Linting for JS: now the vue core team provides eslint-plugin-vue in v3.0 beta, which is way more powerful than eslint-plugin-html. Some famous editor plugins like vetur are already using it.

Linting for CSS/stylus: I found the .stylintrc in the current template, but it only works for styles with lang="stylus". Nowadays stylelint is much more popular and powerful, and people of course could use both css and stylus in <style>s in quasar projects.

So I propose to make some enhancements on the linting part of the templates. I almost finished my own version of the new template. @rstoenescu if you are interested, I could make a PR in one or two days.