Creating Your First Vue.js PWA Project

Erisu
Oct 30, 2018 · 10 min read
Vue.js PWA Project

Creating the Workspace

Making a new directory in iTerm2 (terminal application)
Creating the directory structure

Installing NPM Dependencies

$ npm init
NPM initialize with user input
$ npm i -D @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin css-loader html-webpack-plugin vue-loader vue-style-loader vue-template-compiler webpack webpack-cli webpack-dev-server
$ npm i vue vue-router

Configuring Webpack

webpack.config.js
entry: './src/app.js',
new CleanWebpackPlugin(['dist']),
'@': path.resolve(__dirname, 'src')

Writing Example Code

static/index.html

src/app.js

src/router.js

src/App.vue

src/components/Home.vue
src/components/Page1.vue
src/components/PageNotFound.vue

Previewing & Auditing for PWA with Chrome

"scripts": {
"dev": "webpack-dev-server --progress"
},
App Preview in Google Chrome

Google Lighthouse
Google Lighthouse in DevTools
Localhost (webpack-dev-server) audit results
Firebase audit results from first run
Firebase audit PWA report from first run

Implementing the Minimum PWA Requirements

static/manifest.json
<link rel="manifest" href="/manifest.json" />
512x512 PNG Icon
npm i -D sw-precache-webpack-plugin
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
new SWPrecacheWebpackPlugin({  cacheId: 'my-pwa-vue-app',  filename: 'service-worker-cache.js',  staticFileGlobs: ['dist/**/*.{js,css}', '/'],  minify: true,  stripPrefix: 'dist/',  dontCacheBustUrlsMatching: /\.\w{6}\./})
new CopyWebpackPlugin([{  from: path.resolve(__dirname, 'static'),  to: path.resolve(__dirname, 'dist'),  toType: 'dir'}]),
<noscript>To run this application, JavaScript is required to be enabled.</noscript>
<meta name="theme-color" content="#FFFFFF" />

Second Lighthouse Audit

Firebase audit results from second run

Conclusion

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Erisu

Written by

Erisu

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.