Developing a Progressive Web App (PWA) using Vue 3 and Vite as your building tool can be a game-changer for your web application. In this article, we'll dive into the world of PWAs and explore how to create a boilerplate for swift app development with PWA and Vite.
What is a PWA?
----------------
A PWA is an application that is delivered over the web using web technologies such as HTML, CSS, and JavaScript. It's intended to work in any browser that supports basic standards, allowing users to work offline, receive push notifications, and interact with device hardware. To make this possible, technologies like Manifest and WebWorker have been developed, which we'll explore further.
Installation
To get started, create a new project using Vite:
`
yarn create vite pwa-vue --template vue
cd pwa-vue
yarn
yarn dev
`
This will give you a Vue.js application running with Vite as your build tool. For the management of your PWA, you'll need to install the Vite PWA plugin and workbox-precaching:
`
yarn add vite-plugin-pwa workbox-precaching -D
`
Config
The configuration for both Vite and its plugins is done in the vite.config.js file. A simple installation of the PWA plugin would be as follows:
`js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({
plugins: [vue(), VitePWA()],
});
`
However, this configuration won't work correctly on devices without the minimum necessary information. The following code details the minimum and necessary information for the plugin to work correctly:
`js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({
plugins: [
vue(),
VitePWA({
mode: "development",
base: "/",
srcDir: "src",
filename: "sw.ts",
includeAssets: ["/favicon.png"],
strategies: "injectManifest",
manifest: {
name: "Test Project",
short_name: "Test",
theme_color: "#ffffff",
start_url: "/",
display: "standalone",
background_color: "#ffffff",
icons: [
{
src: "icon-192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/icon-512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "icon-512.png",
sizes: "512x512",
type: "image/png",
purpose: "any maskable",
},
],
},
}),
],
});
`
Service Worker
Every PWA must have a manifest. A Manifest is a file that defines (in JSON format) the name of the application, the background color it will have on the device once installed, the location, formats of the icons used, and the root URL for PWA. That is, the minimum behavioral requirements of that web application on a device.
In turn, you'll need to define the location of the root of the code (in this case src) and the location of the Service Worker. A Service Worker is a set of code that runs in the background and allows secondary actions to be performed with the running application.
Here's an example of how your Service Worker (sw.ts) might look:
`js
import { precacheAndRoute } from 'workbox-precaching';
declare let self: ServiceWorkerGlobalScope;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();
});
// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST);
`
tsconfig.json
At this point, your editor might flag multiple formatting errors. This is because the type library that manages workers has not been added. To do this, you'll need to extend the TypeScript definition by creating a tsconfig.json configuration file, adding WebWorker as a library and excluding from the analysis the .worker.ts files that may exist in the node-modules folder:
`json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"/@/": ["src/"]
},
"lib": ["ESNext", "DOM", "WebWorker"]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": [
"dist",
"node_modules",
"test",
"test.ts",
"**/*.spec.ts",
"**/*.worker.ts"
]
}
`
PWA Registration
To register the PWA and make it functional, you'll need to create a component that is responsible for creating the PWA instance and managing content updates, online mode or content refresh. This component (ReloadPWA.vue) will show a button to update the application content if the Service Worker finds changes.
`html
`
With this article, you've learned how to create a boilerplate for swift app development with PWA and Vite. You can now start building your own PWAs using Vue 3 and Vite as your building tool.