Testowanie progresywnej aplikacji internetowej

  • 5 min

Masz aplikację internetową opublikowaną na platformie Azure. Teraz możesz upewnić się, że działa ona jako progresywna aplikacja internetowa.

Konfigurowanie progresywnej aplikacji internetowej

W większości przypadków interfejs wiersza polecenia struktury Vue utworzył już pliki potrzebne dla progresywnej aplikacji internetowej. W folderze /public/images/icons znajdziesz gotowe ikony, dzięki którym użytkownik może utworzyć zakładkę aplikacji na pulpicie. Proces kompilacji tworzy też plik service-workers.js w celu uruchamiania usługowego procesu roboczego, który obsługuje funkcje trybu offline. Zapewnij możliwość utworzenia usługowego procesu roboczego, dodając jeszcze jeden plik do aplikacji: vue.config.js.

Dodaj nowy plik o nazwie vue.config.js do katalogu głównego aplikacji internetowej. Ten plik ułatwi tworzenie plików filtrów pakietu webpack, które uniemożliwiają tworzenie procesów roboczych usług.

W tym pliku dodaj następujący kod.

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

Teraz, gdy wypchniesz kod do usługi GitHub i zostanie on skompilowany, powinien zostać utworzony usługowy proces roboczy. Możesz użyć narzędzi deweloperskich, aby ustalić wskaźnik Lighthouse dla swojej strony, co jest dobrym sposobem oceny wydajności progresywnej aplikacji internetowej.

lighthouse score.

Testowanie aplikacji

Aby przetestować wynik usługi Lighthouse, otwórz aplikację internetową w przeglądarce i otwórz narzędzia deweloperskie. Przejdź do obszaru Inspekcja i utwórz raport inspekcji dla aplikacji internetowej. Możesz przetestować jego możliwości w trybie offline, wybierając pozycję Aplikacja w obszarze Narzędzia deweloperskie, a następnie wybierając pozycję Procesy robocze usług. Przełącz aplikację w tryb offline, zaznaczając pole wyboru offline, a następnie wypróbuj aplikację. Model powinien poprawnie wnioskować, tak jakby był w trybie online.

Spróbuj utworzyć nowy model w usłudze Custom Vision AI ze świeżymi obrazami na potrzeby testowania i weryfikacji, a następnie ponownie załaduj model za pośrednictwem procesu kompilacji. Proces roboczy usługi powinien odebrać fakt, że istnieje nowy model, i powiadomić Cię w konsoli, że istnieje. Po odświeżeniu ekranu powinien pojawić się nowy model.