WHAT
PWA (Progressive Web application) is a browser-based application that has become an alternative to a native mobile app. Its a web app that look and feel like a native mobile app.
WHY
Its a mobile app downloaded from a web application and not from app store. You can access the app offline too. A PWA lets you install the application from the browser window itself and available on your phone and also works offline just like a native app. PWAs help solve problems like when accessing app with slow internet speed, with slow website load, user engagement etc..
PWA has the ability to run natively on your browser without the support of an internnet connection. It can function offline within your mobile phone or PC browser.
What is Vue.js
Vue.js is the progressive front end web framework for building elegant user interfaces. It has a plug-and-play type of design and its very useful when it comes to building single-page web applications from the ground up. Easy and fast to use and deploy.
HOW
The quick test installtion can be done with your desktop windows machine
1. Install Latest Nodejs from official nodejs site
2. Check the installed version from command prompt — node -v
3. Setting up Vue.js — npm install -g @vue/cli
4. Creating PWA with Vue.js — vue init pwa your-app-name (replace with your own app name)
Project name cloudwwh-pwa
Project Short name cpwa
Project description test app
Author Cloudwwh
Vue build Standalone
Install vue-router? yes
Use EsLint to lint your code? No
Pick an ESLint preset Standard
Setup unit tests with karma + mocha? No
Setup e2e tests with Nightwatch? No
5. Go to your project folder cd your-app-name
6. Install NPM into the project – npm install
7. Start a localhost development site – npn run dev
8. Check the site http://localhost:8080/ (once checked close the command prompt)
9. Now check your app with 200 OK Web Server for Chrome. Add and enable “Web server for chrome” extensions to your chrome browser and make sure extension added – chrome:///apps (on browser)
Note: 200 OK is a Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.
In order to run the PWA on a web server, we need to build it in order to create a production ready dist folder within our project directory.
9. Go to your project folder again cd your-app-name
10. npm run build
11. Now open the app Web Server for Chrome from search and choose the project dist folder ( /your-app-name/dist) (default port 8887)
12. Check the app and install http://localhost:8887/
13. Make sure the app is available – chrome://apps/