A progresszív webalkalmazás tesztelése

  • 5 perc

Már van egy webalkalmazása, amelyet közzé is tett az Azure-ban. Most meggyőződhet arról, hogy progresszív webalkalmazásként működik.

A progresszív webalkalmazás konfigurálása

A Vue CLI már nagyrészt elkészítette a progresszív webalkalmazáshoz szükséges fájlokat. A /public/images/icons mappában kész ikonokat találhat, amelyekkel egy felhasználó könyvjelzőt hozhat létre az alkalmazáshoz az asztalon. A létrehozási folyamat egy service-workers.js fájlt is létrehoz, amely egy offline funkciókat ellátó szolgáltatás-munkavégzőt is elindít. Egy új vue.config.js-fájl az alkalmazáshoz való hozzáadásával győződjön meg arról, hogy a szolgáltatás-munkavégző létrehozható.

Adjon hozzá egy vue.config.js nevű új fájlt a webalkalmazás gyökeréhez. Ez a fájl segít a webpack szűrőfájlokban, amelyek meggátolják a szolgáltatásmunkások létrehozását.

Ebben a fájlban adja hozzá a következő kódot.

module.exports = {
    pwa: {
        workboxOptions: {
            exclude: [/\.map$/, /web\.config$/],
        },
    },
};

Mostantól amikor leküldi a kódot a GitHubnak, és elkészül, létrejön egy szolgáltatás-munkavégző. A fejlesztői eszközökkel meghatározhatja az oldal Lighthouse-pontszámát, amellyel hatékonyan felmérheti a progresszív webalkalmazás teljesítményét.

lighthouse score.

Az alkalmazás tesztelése

A Lighthouse-pontszám teszteléséhez nyissa meg a webalkalmazást egy böngészőben, és nyissa meg a Fejlesztői eszközöket. Nyissa meg a Naplózás lehetőséget, és hozzon létre egy naplójelentést a webalkalmazáshoz. Az offline képességeinek teszteléséhez válassza az Alkalmazást a Fejlesztői eszközök területen, majd válassza a Szolgáltatásmunkások lehetőséget. Az offline jelölőnégyzet bejelölésével offline állapotba viheti az alkalmazást, majd kipróbálhatja az alkalmazást. A modellnek ekkor helyesen, az online működéssel megegyező módon kell elvégeznie a dedukciót.

Próbáljon meg új modellt létrehozni a Custom Vision AI-ben friss rendszerképekkel teszteléshez és ellenőrzéshez, majd töltse be újra a modellt a buildelési folyamaton keresztül. A szolgáltatásvégzőnek fel kell vennie a tényt, hogy van egy új modell, és figyelmeztetnie kell a konzolon, hogy létezik. Amikor frissíti a képernyőt, az új modellnek meg kell jelennie.