Code Monkey home page Code Monkey logo

quasar-template-pwa's Introduction

Quasar Framework logo

Quasar Framework PWA App Template

PWA Starter Kit for a Quasar Framework Project. Compatible with Quasar v0.14 ONLY.

Based on the work of Addy Osmani (https://github.com/vuejs-templates/pwa).

DEPRECATED FOR v0.15+

Usage

Use Quasar CLI to generate a new project using this template:

# install Quasar CLI if you don't have it already
$ npm install -g quasar-cli

# generate a project folder with this template
$ quasar init pwa my-project

$ cd my-project
$ npm install
$ quasar dev

Important! Do not use Quasar wrappers (Cordova/Electron) on top of this template.

Documentation

  • This template builds on top of the main/default Quasar webpack template.

  • Check out the official Quasar guide for general information about Quasar that is not specific to this template.

What's Included

  • Service Worker precaching of application shell + static assets (prod)
  • Script (async chunk) preloading using <link rel="preload">
  • Web Application Manifest + favicons
  • Mobile-friendly meta-viewport
  • Lighthouse score of 90+/100
  • $ quasar dev: first-in-class development experience.

    • Webpack + vue-loader for single file Vue components.
    • State preserving hot-reload
    • State preserving compilation error overlay
    • Lint-on-save with ESLint
    • Source maps
  • $ quasar build: Production ready build.

    • JavaScript minified with UglifyJS.
    • HTML minified with html-minifier.
    • CSS across all components extracted into a single file and minified with cssnano.
    • All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.
    • Use npm run build --reportto build with bundle size analytics.
    • Generates a Service Worker for offline caching your static assets using sw-precache-webpack-plugin

Quasar Framework

Build responsive websites, PWAs, hybrid mobile Apps (that look native!) and Electron apps using same code, powered with Vue.

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers. If you'd like to join them, check out Quasar Framework's Patreon campaign.

Community Forum

Head on to the official community forum: http://forum.quasar-framework.org

Quasar Repositories

Contributing

I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature).

Issue Reporting Guidelines

Please use the appropriate Github repo to report issues. See "Related Components" above. For example, a bug related to CLI should be reported to the CLI repo, one related to build issues to Quasar Framework Templates repo and so on.

  • The issue list of the repository is exclusively for bug reports and feature requests. For anything else please use the Community Forum.

  • Try to search for your issue, it may have already been fixed in the development branch or it may have a resolution.

  • Check if the issue is reproducible with the latest stable version of Quasar. If you are using a pre-release, please indicate the specific version you are using.

  • It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.

  • If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

Read more here.

License

Copyright (c) 2016-2017 Razvan Stoenescu

MIT License

quasar-template-pwa's People

Contributors

georgetassiano avatar rstoenescu avatar sgametrio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

quasar-template-pwa's Issues

[discussion] replace eslint-plugin-html with eslint-plugin-vue? and add stylelint support?

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.

PWA template don't work

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?

selecao_058

[Bug] PWA template fails in lighthouse PWA audit

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.

staticFileGlobs: ['dist/**/*.{js,html,css,woff,svg}'],

[Feature Request] Migrate to Workbox from sw-precache

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.

0.15 upgrade - dependency was not found

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?

Error when initializing project

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)

[Feature Request] Dynamic changing the theme at runtime

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.