[Vuejs]-How to convert Vue 2 web site to PWA wab app?

2๐Ÿ‘

โœ…

I found answer for my question. I will share it for all developers.

First, I have done follow this this
vue/cli-plugin-pwa

Second:
make registerServiceWorker.js file with this code:

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

Third:
make service-worker.js:

// inside src/service-worker.js 

// define a prefix for your cache names. It is recommended to use your project name
workbox.core.setCacheNameDetails({prefix:  "simple-vue-project"});

// Start of Precaching##########################
// __precacheManifest is the list of resources you want to precache. This list will be generated and imported automatically by workbox during build time
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
// End of Precaching############################

// Start of CachFirst Strategy##################
// all the api request which matchs the following pattern will use CacheFirst strategy for caching
workbox.routing.registerRoute(
/http:\/\/get\.geojs\.io\/v1\/ip\/country\.json/,
new  workbox.strategies.CacheFirst()
);
// End of CachFirst Strategy####################

๐Ÿ‘คForest 1

1๐Ÿ‘

there is a Vue.js plugin, here.
if not :
Create a services worker, you can introduce to it here
add webmanifest or manifest.json of your choice, read here

Add express to your project as depencency

create server.js like file, and serve the built Vue App from the server with express

// server.js ex:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
  return res.send('ping');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html')); //serving build folder
});
app.listen(port);
๐Ÿ‘คAbrah_dago_313

0๐Ÿ‘

The modern @vue/cli provides you the option to turn on PWA while scaffolding both Vue 2 as well as Vue 3 projects. Check out this documentation.

If you have already created the project, CLI offers a new functionality called Vue UI. Simply type vue ui in the cmd and it should open up Vue UI where you can reconfigure your project using graphical interface.

If you are interested in learning Vue JS check out these courses โ€“ Complete Vue JS Course, Vue 3 Essentials

Leave a comment