vuejs-templates / pwa Goto Github PK
View Code? Open in Web Editor NEWPWA template for vue-cli based on the webpack template
License: MIT License
PWA template for vue-cli based on the webpack template
License: MIT License
Cross-posting from our original discussion at vuejs/vue-cli#381. Will make a start on this shortly.
There are a few different options for what this could include:
Web Application Manifest
Default favicons (minimalist setup from realfavicongenerator.net)
Service Worker precaching + runtime caching via sw-precache-webpack-plugin
Application Shell architecture
Code-splitting by default with vue-router
If we wanted to go even more ambitious we could cover:PRPL pattern support (using something like preload-webpack-plugin)
Simple server-side rendering + pre-fetching
CSS extraction for production
RequirementsAim to score as close to 100/100 on Lighthouse
Must be straight-forward to use. If we make it inherently complex, it will lose value to end users.
Prior-art - PWA templates and boilerplates ๐จhttps://github.com/Narkoleptika/webpack-everything
https://github.com/electricjesus/vue-pwa-template
https://github.com/BosNaufal/vue-simple-pwa
Vue.js PWAs (open-source) ๐https://github.com/vuejs/vue-hackernews-2.0
https://github.com/GoogleChrome/jscost.org (not yet fully released)
https://github.com/mrgodhani/feedbox
https://github.com/bstavroulakis/vue-wordpress-pwa
Other references ๐PRPL pattern with Webpack and React
Initially, I would love to get a feel for what would considered palatable for an MVP. There's technically nothing stopping us baking in everything in the above list, but let's talk and figure out a path forward ๐
The last official release was at the end of May and I'd like to move the project to a more regular release schedule. Let's aim to get out a new tag this week with release notes.
I've gone ahead and done a sanity check locally against master. npm run dev
and npm run build
are both performing as I would expect. @ragingwind @anubhav7495 could you perhaps help with a double check that working off master is functioning as intended?
Happy to write up some release notes once we know nothing is breaking :)
hey,
I have build vue pwa and it working great in chrome browser but it is showing nothing in android default browser, ucweb and opera.
I see that there is a folder called 'static' and it has logos and a json file in it, but why not put assets like logos in the assets folder? Does the static folder serve a purpose that the assets folder inside the src folder does not? Should I be using it for anything, because it does cooler stuff than the assets folder does?
Seems a little odd to name a folder based upon a state of being...?
Anyway, thanks! XD
R
Where should this live?
@yyx990803 Do we want to keep the PWA template on the vuejs org or on the templates org?
What do we want the template package to be called?
vue-cli-template-pwa
?
Where should we call out the template on the Vue site?
Should we add an extra note to https://vuejs.org/v2/guide/installation.html#CLI saying this is available or would a dedicated PWA page on the Vue site be better?
cc @sdras in case she has any thoughts on this too.
I tried adding <style lang='sass'>
but I am getting an error
This dependency was not found:
* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3b85b268","scoped":true,"hasInlineConfig":false}!sass-loader?{"indentedSyntax":true,"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./List.vue in ./src/components/List.vue
It will be great if it comes out of the box.
@addyosmani First off, thanks for such a great template. I managed to integrate this template with a clean ASP.NET Core 1.1 project with almost no hassle.
The only thing I haven't managed to hash out is how to handle SSR cleanly. Vue recommends using vue-server-renderer (https://ssr.vuejs.org/en/), but I've been running into issues due to the PWA requirements. In the ASP.NET Core world, SSR can be achieved with the SPAServices package (good example at http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/), and adding a pre-render tag to one of the Razor Views and all the magic happens in the background. E.g.
<div id="my-app" asp-prerender-module="VuesStuff/renderOnServer" ... ></div>
but this can't be achieved with this vue template because it builds off of index.html where the pre-rendered tags are obviously not available.
Just trying to pick the communities brain on a path forward...?
(FYI this guide in particular made it super simple to integrate with your template https://blog.kloud.com.au/2017/02/14/running-vuejs-on-aspnet-core-apps/)
Hello, my pwa is not working on android until I add the hashbang in it. I'd like to use this without hashbang on the web, don't mind much when it's installed since it's not visible.
Is there any way we can fix this?
I'm thinking of a workaround to get if it's on mobile, I switch from:
hashbang: false,
mode: 'history'
but this doesn't work when someone is clicking a link from a social media, will be redirected on the responsive web design and since the link doesn't have hashbang, the user will be redirected to the starting page.
This boilerplate PWA works already with Notification Push by Service Worker?
I am using this template for my vue project and i got this error after installing NEM-sdk but i don't how to solve it and it seems related to webpack configuration. #196
warning in ./~/ajv/lib/async.js
96:20-33 Critical dependency: the request of a dependency is an expression
warning in ./~/ajv/lib/async.js
119:15-28 Critical dependency: the request of a dependency is an expression
warning in ./~/ajv/lib/compile/index.js
13:21-34 Critical dependency: the request of a dependency is an expression
Your help is highly appreciated.
Soooo...deployed my vue-pwa to firebase hosting and it generally works ok, except for when I navigate to a sub route, like 'example.com/view/subview' and then hit refresh...and I get this...
So basically what is happening is if I start at the home route, then I can navigate just fine, but if I type in a subroute or just reload the page at that subroute then firebase does not seem to know that it exists.
So, I wasn't sure where to ask this, but I figured that even if this isn't the right place, somebody could at least point me in the right direction...
Anyway, thank you in advance for any help that you can spare :-)
For those who want to do e2e testing, the chromedriver install may fail behind a corporate proxy.
There is an opened PR on the lib that seems to fix the issue. We just need to wait for it to be merged.
If you are struggling with this, you can update the package.json to use the fix before it gets merged
- "chromedriver": "^2.27.2",
+ "chromedriver": "Toilal/node-chromedriver.git#feature\/request",
Hi all, is there an extra step necessary to push to a gh-pages branch? I get the fallback about no javascript and inspecting shows js and css assets are not loading from the static/
I've tried deploying dist/ to gh-pages branch and also using vue-gh-pages module both give same result.
Thanks!
Both polymer-cli and angular-cli are planning on adding support for automatically generating a HTTP/2 Server Push manifest if the user would like one. This can be useful for filling up "server think time" for the initial push.
Polymer/polymer-cli#646 have their implementation up. We could use something like https://github.com/GoogleChrome/http2-push-manifest for the manifest generation on our side and wire it up as both a prompt question + run at build time.
pwa template not working in IE11
[vuex] vuex requires a Promise polyfill in this browser.
Will this template be in sync with webpack template updates?
I want to show a message when a new service worker has been installed and found this comment in the service-worker-prod.js file.
It's the perfect time to display a "New content is available; please refresh." message in the page's interface.
So my question is, how do I do this the best way? Can i some how access my App.vueยดs methods or is it best to use vuex store to show a message box?
Soooo,
...doing this:
...from this:
...and getting this:
The first row in the above pic are from the v-for version and the second row are the static hard coded HTML versions of the same things.
So I dunno why the images are not loading, when all the other data, including the alt stuff is loading...checked the file path of the images, which are fine, so I must be doing something wrong, just don't know what...๐ค
Any thoughts are most welcome, thanks! XD
This would be very helpful when using Bootstrap or Bulma. Significant reduction of final dist CSS file.
https://github.com/purifycss/purifycss
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?
Just followed this instructions:
$ npm install -g vue-cli
$ vue init pwa my-project
$ cd my-project
$ npm install
$ npm run dev
Error:
Html Webpack Plugin:
TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
- 1:5 eval
webpack-internal:///1:5:27
- 1:20 module.exports
webpack-internal:///1:20:3
- index.js:264
[test]/[html-webpack-plugin]/index.js:264:16
- From previous event:
- index.js:252 HtmlWebpackPlugin.executeTemplate
[test]/[html-webpack-plugin]/index.js:252:6
- index.js:137
[test]/[html-webpack-plugin]/index.js:137:18
- From previous event:
- index.js:132 Compiler.
[test]/[html-webpack-plugin]/index.js:132:8
- Tapable.js:188 Compiler.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:188:13
- Compiler.js:308 Compiler.emitAssets
[test]/[webpack]/lib/Compiler.js:308:7
- Compiler.js:52 onCompiled
[test]/[webpack]/lib/Compiler.js:52:18
- Compiler.js:499
[test]/[webpack]/lib/Compiler.js:499:13
- Tapable.js:184 next
[test]/[tapable]/lib/Tapable.js:184:11
- CachePlugin.js:62 Compiler.
[test]/[webpack]/lib/CachePlugin.js:62:5
- Tapable.js:188 Compiler.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:188:13
- Compiler.js:496
[test]/[webpack]/lib/Compiler.js:496:10
- Tapable.js:177 Compilation.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:177:46
- Compilation.js:649 self.applyPluginsAsync.err
[test]/[webpack]/lib/Compilation.js:649:19
- Tapable.js:177 Compilation.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:177:46
- Compilation.js:640 self.applyPluginsAsync.err
[test]/[webpack]/lib/Compilation.js:640:11
- Tapable.js:177 Compilation.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:177:46
- Compilation.js:635 self.applyPluginsAsync.err
[test]/[webpack]/lib/Compilation.js:635:10
- Tapable.js:177 Compilation.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:177:46
- Compilation.js:631 sealPart2
[test]/[webpack]/lib/Compilation.js:631:9
- Tapable.js:177 Compilation.applyPluginsAsyncSeries
[test]/[tapable]/lib/Tapable.js:177:46
- Compilation.js:579 Compilation.seal
[test]/[webpack]/lib/Compilation.js:579:8
It works if I remove this section from index.html:
<% for (var chunk of webpack.chunks) {
for (var file of chunk.files) {
if (file.match(/\.(js|css)$/)) { %>
<link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
As per the subject line, I'm not sure what version of the template I'm using, but is it easy, and even possible, to simply update the template to the latest version?
Or do I need to generate a instance of the template to get the latest version? I suppose I would then copy my src folder over, I guess...
Anyway, not clear on that aspect of the template ๐ค
R
After diggin into this template I found out the SWPrecache plugin generates the service worker that's used in the build version. I have no clue how to edit this service worker when I want to edit the service worker and add push messaging. I was told maybe change de service-worker-prod.js in the build folder. But I assume files the build folder should generally not be changed? Please add a sw file where I can build my own service worker file instead of auto generating one.
Hi,
Currently build/service-worker-prod.js
is inlined into HTML file without any minification.
This results in index.html
to be 4.07 KB
in size.
If we minify the file with uglify-es
plugin before inlining, the resulting index.html
is only 2.42 KB
in size.
I have used this in my hnpwa-vue app to get a much lower TTI.
I would love to open a pull request to add something like that to the template.
From @yyx990803:
FYI if we use the runtime only build we can shave off another ~7kb
From the docs, just switching over to:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
with a comment linking up to why we're doing this should do the trick.
We currently already have this kinda setup here https://github.com/vuejs/pwa/blob/prototype/template/build/webpack.base.conf.js#L23 but requires switching to a standalone build. Perhaps we should just nix the standalone check and run it by default.
Add the public path variable to the static assets in the HTML head so that if the path is changed in config/index.js the assets will resolve properly.
From
<!-- Add to home screen for Android and modern mobile browsers -->
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#4DBA87">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="vuepwa">
<link rel="apple-touch-icon" href="/static/img/icons/icon-152x152.png">
<!-- Add to home screen for Windows -->
<meta name="msapplication-TileImage" content="/static/img/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
To
<!-- Add to home screen for Android and modern mobile browsers -->
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">
<meta name="theme-color" content="#4DBA87">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="vuepwa">
<link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/icon-152x152.png">
<!-- Add to home screen for Windows -->
<meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
Hi!
I have noticed that the template includes static/img/icons/safari-pinned-tab.svg file but it is not referenced in the index.html.
I believe that index.html should include the following:
<link rel="mask-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/safari-pinned-tab.svg" color="#4DBA87">
Thanks Romans
I just created a new project using this template (I answered y
to everything except eslint), then ran yarn
followed by yarn run dev
.
When I opened the Chrome console I noticed this error message:
Uncaught (in promise) TypeError: Failed to register a ServiceWorker:
A bad HTTP response code (404) was received when fetching the script.
On Windows 10, Chrome version 58.0.3029.96 (64-bit)
Edit: some additional related errors popped up after a while:
See below image for subject line visualization:
I would have thought that the routing file would be labeled 'routes.js' or something similar.
So I guess I'm wondering if this folder structure is to encourage splitting up routing into multiple files, and if so, is there any documentation on how to go about doing so, and when it would be appropriate?
Thank you in advance for your assistance and clarification :-)
I did a fresh install of a new project:
vue init pwa testingpwa
cd testingpwa
yarn
After that I generate the build for production:
npm run build
Then start that build using a local server:
cd dist
started my web server: http://localhost:8080
I access the app using Samsung Galaxy Tab 2 using the IP of my computer
http:10.10.10.10:8080
The web app opened and I added the application to Homescreen
After I go offline using airplane mode and try to open application using the icon on my homescreen.
The PWA not worked, It show offline. My browser is Google Chrome 58.0.3029.83
I know it's not directly related to vue, but I don't know where to open this issue, so if anyone can help me with that... After I updated to Node 8 and tried to npm install in the project folder using this template got the following errors:
> [email protected] install /Users/me/Projetos/testpwa/node_modules/fsevents
> node install
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v57-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI) (falling back to source compile with node-gyp)
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
COPY /Users/me/Projetos/testpwa/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node
TOUCH Release/obj.target/action_after_build.stamp
Hi,
I'm trying to embed the HMR debug bundle in a page rendered by my python backend server. Everything works fine except the bundle is trying to get the delta from http://localhost:<my-server-port>/__webpack_hmr
instead of http://localhost:<webpack-devserver-port>/__webpack_hmr
Is there a way to specify the port for HMR?
Thanks!
Simple Material-style shell with Vue theme colors (raw HTML + CSS) would work here. After talking it over with Evan we're going to avoid pulling in a whole Material library for this and just keep it pretty simple.
When running npm test
Hi, many thanks for this project,
i used it to do a test app, and i was pretty happy,
i just saw the update, and i wanted to upgrade my app to this newer version.
but i couldn't find a good way to do that ?
is there a preferred way ? a good way ? or any doc about this ?
Thanks
In IE 11, the following line from service-worker-dev.js
that gets injected into index.html
throws a syntax error:
self.addEventListener('install', () => self.skipWaiting());
I assume it's because IE 11 does not support arrow functions.
When Save to HomeScreen
, the code <link rel="apple-touch-icon" href="/static/img/icons/icon-152x152.png">
do not show the intended icon. To make it work, I have to change it to <link rel="apple-touch-icon" href="/static/img/icons/apple-touch-icon-152x152.png">
.
I think that we should also have an option asking the user for whether he wants to include polyfills for fetch
and promise
that are loaded conditionally using webpack.
I have seen preact-cli do that and I think it would be a nice to have feature.
Or we can also put in the documentation on how to set that up manually.
@addyosmani @ragingwind What are your thoughts?
I just tested out this template for the first time. After a prod build and deployment, there doesn't seem to be a favicon displayed in the browser (usually the V in most vue-cli templates).
Is that intended as a feature of a PWA? I know that the other vue-cli templates definitely ship a favicon but I haven't done many PWAs so I can't determine if that's intended or not, or if I just didn't do something right. I saw something about using simple favicons in the base PWA checklist.
otherwise, user has to refresh twice to get the latest content. first for latest service worker, and second for latest index.html. right ?
so maybe the root page should be handle by runtime caching. only use the cache when user is offline.
I have all my components in my components folder, but when i try to group them in sub folders, the whole app breaks. Not sure what I'm doing wrong here, though...
As you can see, I grouped all my view-1 content into a view-1 folder, then added that to the file path, but in the browser...
The files can no longer be found. This is odd, as this is standard behavior for vue app folder structure. The only thing that I noticed is different is the @ instead of a dot.
Any help on this issue will be much appreciated.
Thank you!
In the vue-webpack
template I can simply declare to use scss or pug or whatever preprocessor on a per component file basis, like so:
<style lang="scss" scoped>
Is it the same for this template?
Thank you :-)
Hi,
I installed Vue PWA template and tested on Apache localhost with offline feature (Dev tool). It works as expected.
I deployed same code to the production environment on Heroku. where it is not working as expected.
Even when I reload the page old service worker is still running and cached version of app which I get in offline mode is stale.
When I force update the service worker (From dev tool) then newer version of service worker is installed and only then it fetches fresh copy of project.
Here's my production webpack config.
new SWPrecacheWebpackPlugin({
cacheId: 'my-vue-app',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/',
mergeStaticsConfig: true, // if you don't set this to true, you won't see any webpack-emitted assets in your serviceworker config
staticFileGlobsIgnorePatterns: [/\.map$/], // use this to ignore sourcemap files
})
I have not changed service worker code in index.html
Is there anything I am missing?
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.