Beeline Pogressive Web Application

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

New Features!

• Offline mode - Service Workers caching static files for rendering

Tech

Beeline PWA uses a number of open source projects to work properly:

• VueJS - HTML enhanced for web apps!
• Buefy - lightweight UI components for Vue.js based on Bulma
• LocalForage - Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API
• Axios - Promise based HTTP client for the browser and node.js
• Sw-toolbox - A collection of tools for service workers
• Serve - A neat interface for listing the directory's contents and switching into sub folders.

Test for production

Use Google Chrome to debug the Service Workers

For production release:

$ npm run build

Execute the 'dist' folder after it has been generated:

$ serve dist/

Navigate to the website:

localhost:5000/#/

Click on the Application tab and select Service Workers. Look for the Offline checkbox and reload the page.

Firebase hosting

To host Beeline PWA porject on firebase:

Generate the dist folder for production

$ npm run build

Install firebase-tools

$ npm install -g firebase-tools

Generate the necessary files

$ firebase init

Select the appropriate hosting option after running the aforementioned command, and select the appropriate firebase project. There are 2 files which will be generated in the root:

• .firebaserc
• firebase.json

Configure the firebase.json file to reference the dist folder

{
  "hosting": {
    "public": "./dist"
  }
}

Deploy the project to firebase hosting

$ firebase deploy

TODOs

• Implement Notification API
• Write UNIT TESTs

License

MIT