3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用

更新時(shí)間：2024年02月03日 10:34:46 作者：1024小神

這篇文章主要介紹了3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

將項(xiàng)目配置為pwa模式，就可以在瀏覽器里面看到安裝應(yīng)用的選項(xiàng)，并且可以將web網(wǎng)頁像app一樣添加到手機(jī)桌面或者pad桌面上，或者是電腦桌面上，這樣帶來的體驗(yàn)就像真的在一個(gè)app上運(yùn)行一樣。為了實(shí)現(xiàn)這個(gè)目的，我們可以為vue項(xiàng)目使用一個(gè)插件：vite-plugin-pwa

vite-plugin-pwa倉庫地址：https://github.com/vite-pwa/vite-plugin-pwa

vite-plugin-pwa文檔地址：Getting Started | Guide | Vite PWA

安裝插件

直接使用npm安裝即可

npm i vite-plugin-pwa -D 
# yarn 
yarn add vite-plugin-pwa -D
# pnpm 
pnpm add vite-plugin-pwa -D

配置插件

先有一個(gè)pwa應(yīng)用的圖標(biāo)，最好是png格式的，尺寸最好大于192x192的：

在vite.config.js/ts中配置pwa應(yīng)用：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { VitePWA } from 'vite-plugin-pwa'
// 生產(chǎn)還是開發(fā)
const mode = 'production'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        VitePWA({
            mode: 'development',
            base: '/',
            manifest: {
                name: '應(yīng)用名稱',
                short_name: '應(yīng)用名稱',
                description: '應(yīng)用描述',
                icons: [
                    //添加圖標(biāo)， 注意路徑和圖像像素正確
                    {
                        src: './public/app.png',
                        sizes: '1024x1024',
                        type: 'image/png',
                    },
                ],
            },
            registerType: 'autoUpdate',
            workbox: {
                globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'], //緩存相關(guān)靜態(tài)資源
                runtimeCaching: [
                    // 配置自定義運(yùn)行時(shí)緩存
                    mode !== 'production'
                        ? {
                              urlPattern: ({ url }) =>
                                  url.origin === 'https://app-api-0.com',
                              handler: 'NetworkFirst',
                              options: {
                                  cacheName: 'wisbayar-api',
                                  cacheableResponse: {
                                      statuses: [200],
                                  },
                              },
                          }
                        : {
                              urlPattern: ({ url }) =>
                                  url.origin === 'https://app-api.id',
                              handler: 'NetworkFirst',
                              options: {
                                  cacheName: 'wisbayar-api',
                                  cacheableResponse: {
                                      statuses: [200],
                                  },
                              },
                          },
                    {
                        urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
                        handler: 'CacheFirst',
                        options: {
                            cacheName: 'wisbayar-images',
                            expiration: {
                                // 最多30個(gè)圖
                                maxEntries: 30,
                            },
                        },
                    },
                    {
                        urlPattern: /.*\.js.*/,
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'wisbayar-js',
                            expiration: {
                                maxEntries: 30, // 最多緩存30個(gè)，超過的按照LRU原則刪除
                                maxAgeSeconds: 30 * 24 * 60 * 60,
                            },
                            cacheableResponse: {
                                statuses: [200],
                            },
                        },
                    },
                    {
                        urlPattern: /.*\.css.*/,
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'wisbayar-css',
                            expiration: {
                                maxEntries: 20,
                                maxAgeSeconds: 30 * 24 * 60 * 60,
                            },
                            cacheableResponse: {
                                statuses: [200],
                            },
                        },
                    },
                    {
                        urlPattern: /.*\.html.*/,
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'wisbayar-html',
                            expiration: {
                                maxEntries: 20,
                                maxAgeSeconds: 30 * 24 * 60 * 60,
                            },
                            cacheableResponse: {
                                statuses: [200],
                            },
                        },
                    },
                ],
            },
            devOptions: {
                enabled: true,
            },
        }),
    ],
    server: {
        host: '0.0.0.0',
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
})

測試上線

然后重新運(yùn)行項(xiàng)目，就可以看到瀏覽器頁面上有標(biāo)識可以安裝了：

如果想判斷頁面是不是在pwa中打開的，可以嘗試使用：

    const isInStandaloneMode = () =>
        (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');
    if (isInStandaloneMode()) {
        document.body.innerHTML = "是在pwa中打開的"
    }else {
        document.body.innerHTML = "請?jiān)趐wa中打開"
    }

到此這篇關(guān)于3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用的文章就介紹到這了,更多相關(guān)vite項(xiàng)目使用vite-plugin-pwa配置為pwa內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: