Vue 3, PWA 및 서비스 담당자

최근에 나는 Vue를 타기 시작했다.물론'hello world'계산기부터 양호한 문서 기록이 있는 Vue 2를 사용하는 것은 바람직하지 않기 때문에 Vue 3에서 간단한 PWA를 사용하기로 했습니다.프로젝트를 세우는 것은 보기보다 쉽지 않기 때문에, 나는 이곳에서 관심 있는 모든 사람들 (그리고 내 미래의 참고) 에게 그것을 묘사할 것이다.
나는 모든 내용을 처음부터 (거의) 묘사할 것이며, 그것이 완전 초보자에게 유용하기를 바란다.나는 Vue, PWA, 서비스 직원들의 이념을 설명하지 않을 것이다. 이것은 단지 이런 것들을 설정하는 것에 관한 것이다.
나는 Win10을 사용하기 때문에 이 PoV에서 이 과정을 설명할 것이다. (단, 노드 설치에만 영향을 미친다.)

노드, npm 및 Vue

모든 JS 프로젝트와 마찬가지로 Node와 npm을 사용하는 것이 더 간단합니다.
아직 없으면 nvm를 사용하여 Node를 설치하는 것이 좋습니다.아마도 가장 간단한 방법은 최신 nvm 설정here을 다운로드하는 것이다.zip, 압축을 풀고 설치 프로그램을 실행합니다.이후 명령 알림부호에 사용할 수 있어야 합니다 nvm.최신 안정적인 버전을 설치하려면 다음을 사용하십시오.

nvm install latest

특정 버전의 경우 수행할 수 있습니다.

nvm install 15.4.0

그리고 기억해라 use!

nvm use 15.4.0

Node의 경우 npm도 자동으로 설치해야 합니다.나에게 있어서 노드 버전은 15.4.0,npm는 7.3.0이다.
우리의 삶을 더욱 가볍게 하기 위해Vue CLI 프로젝트를 세우는 데 도움을 준다.설치 시 다음을 사용하십시오.

npm install -g @vue/cli

터미널에서 vue 명령을 사용할 수 있습니다.나에게 있어서vue --version는 되돌아온다@vue/cli 4.5.9.
이제 우리는 우리의 작은 프로젝트를 시작할 수 있다.

프로젝트 만들기

Vue CLI를 사용하여 새 프로젝트를 생성하는 것은 매우 간단합니다.따라가기만 하면 됩니다.

vue create our-app-name

그런 다음 화살표를 사용하여 옵션을 선택합니다.선택:Manually select features그런 다음 스페이스바Progressive Web App (PWA) support로 선택합니다.Enter 키를 눌러 계속하고 Vue 에서 3.x, ESLint with error prevention only, Lint on save, In dedicated config files, n를 선택하고 http://localhost:8080/를 입력한 다음 Enter 키를 눌러 프로젝트를 생성(1-2분 소요)합니다.
물론, 너는 다른 옵션을 선택할 수 있다.PWA 지원만 필요합니다.

그것을 운행하다

생성된 항목은 상자를 열면 바로 사용할 수 있다.먼저 생성된 프로젝트 폴더로 이동한 다음 개발자 서버를 실행합니다.

cd our-app-name
npm run serve

출력은 생성된 프로그램에 접근할 수 있는 주소를 제공해야 합니다.나한테는 CTRL+C (막고 싶으면 dist현재 서비스 워크맨은 작동하지 않습니다. DevTools에서 프로그램 > 서비스 워크맨으로 이동하면 보이지 않습니다.생성된 프로젝트는 서비스 인원을 생산 구축에서만 활동 상태에 있게 한다.검사해 봅시다.
프로덕션 빌드를 작성하려면 를 실행합니다.

npm run build

프로젝트 폴더에 디렉터리 http://127.0.0.1:8000 를 만들 시간을 주십시오.지금 너는 그것을 어딘가에 두어야 한다.나는 사용하기 쉽고 잘 작동하기 때문에 Web Server for Chrome를 사용하는 것을 권장한다. (나도 파이톤 단순 http 서버를 시도했지만, 이것은 나에게 정상적이지 않기 때문에 조심해야 한다.)서버에서dist 폴더를 선택하고 실행하기만 하면 됩니다.src에서 당신은 당신의 사이트를 방문할 수 있을 것입니다.이제 DevTools의 응용 프로그램 탭에서 서비스 워크어에 대한 정보를 찾고 일부 콘솔 로그를 볼 수 있습니다.

종업원을 길들이다.

잘 됐다!모든 것이 정상입니다!그게 무슨 문제야?ServiceWorker를 사용하여 캐시를 제어하고 개발 과정에서 캐시를 검사하며, 끊임없이 생산 구축을 만들 필요가 없을 때 문제가 발생합니다.
이제 세 가지를 보여드리겠습니다.

개발자 서버

에서 서비스 워크맨을 실행하는 방법

캐시 동작을 제어하는 방법

프로덕션 구축에서 외부 모듈을 사용하는 방법

서버의 소프트웨어 개발

빠른 경고 - 기본적으로 소프트웨어는 개발 중에 비활성화됩니다. 새로 편집한 스크립트/자산을 캐시할 수 있기 때문에 변경 사항을 볼 수 없습니다.이 점을 기억해라. 만약 당신이 그것을 필요로 하지 않는다면, "왜 그것이 변하지 않습니까?"문제.
또 다른 경고--이것은 가장 좋고 이상적인 방법이 아닐 수도 있다...하지만 간단하면서도 효과적입니다.)
사례: 우리는 서비스 종사자가 개발 모델에서 활동 상태에 있고 캐시 정책을 제어할 수 있기를 바란다.
세부 사항을 깊이 파고들지 말고 실현합시다.
먼저 프로젝트에 설치해야 합니다serviceworkerW-webpack-plugin:

 npm install -D serviceworker-webpack-plugin

그런 다음 항목의 루트 디렉토리vue.config.js 폴더 옆에 컨텐트가 포함된 새 파일src/main.js을 추가합니다.

// vue.config.js

const path = require("path");
const ServiceWorkerWebpackPlugin = require("serviceworker-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new ServiceWorkerWebpackPlugin({
        entry: path.join(__dirname, "./src/service-worker.js")
      })
    ]
  }
};

또한 행을 포함하도록 createAppservice-worker.js 수정src:

// src/main.js

// other imports...
import runtime from "serviceworker-webpack-plugin/lib/runtime";

if ("serviceWorker" in navigator) {
  runtime.register();
}

// createApp...

마지막으로 precacheAndRoute에 self.serviceWorkerOption.assets와'Hello World'내용을 추가합니다.

// src/service-worker.js

console.log("Hello world from our SW!");

dev 서버 실행

npm run serve

브라우저에서 응용 프로그램을 탐색할 때, 서비스 관리자로부터 메시지를 콘솔에서 볼 수 있습니다.성공!

제어 캐시 - Workbox

처음부터 소프트웨어를 쓰는 것이 재미있을 것 같아...하지만 간단하게 Workbox를 사용해 봅시다.그것은 이미 설치되어 있기 때문에 소프트웨어 스크립트에서 가져오기만 하면 된다.Workbox의 입문 페이지에서 이미 매우 명확하게 만들어졌기 때문에, 나는 아래의 부분에서 모든 내용을 설명할 생각은 없다.이것은 일부 정규 표현식 (이 경우 그림) 과 일치하는 데이터에 특정한 규칙을 설정하는 예일 뿐입니다.

// src/service-worker.js

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';
import { Plugin } from 'workbox-expiration';
import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.serviceWorkerOption.assets);

registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [
            new Plugin({
                maxEntries: 60,
                maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
            }),
        ],
    })
);

serviceworker-webpack-plugin행npm run build에 대한 간단한 설명은 저희가 이전에 설치한 New content is available; please refresh.에서 왔습니다. 저희 프로그램의 모든 정적 자산을 포함합니다.
현재, 개발 모드에 있어도, 컨트롤러에서 워크박스 로그를 보아야 합니다.첫 페이지에서 로드할 때

뒤이어 유사한 사건에서

DevTools에서 네트워크 탭에 들어가서 오프라인 모드를 시뮬레이션하는 경우 응용 프로그램은 정상적으로 로드되어야 합니다.
위대하다두 가지 문제를 해결했다. 우리는 서비스 직원들에 대해 입도 제어를 하고 개발 모델에서 일한다.

prod에 SW 설치

이와 동시에 불행하게도, 우리는 응용 프로그램의 생산 버전을 망쳤다.만약 네가 뛰고 main.js 그것을 보았다면, 처음에는 괜찮아 보였을 텐데, 사실은 그렇지 않았다.우선, 다음 갱신에서 보실 수 있습니다registerServiceWorker.js비록 네가 어떤 것도 바꾸지 않았지만, 줄곧 기록해라.또한 응용 프로그램 탭을 선택하면 두 명의 서비스 담당자가 항상 활성 상태이고 다른 서비스 담당자가 활성화를 기다리고 있습니다.강제 업데이트를 하더라도 새로 고침 후에 또 다른 기다림이 있을 수 있습니다.
문제는 이중 등록이다. 소프트웨어가 registerServiceWorker.js 에 등록되고, 두 번째는 생성된 src/main.js 이다.이것은 내가 잘 극복할 수 없는 문제이지만 나는 두 가지 받아들일 수 있는 해결 방안을 제시했다.

로그 기록에 관심이 없으면 가져오지 않으면 문제가 사라집니다.

이 콘솔 로그를 보존하고 싶지만 SW가prod에서만 작업할 수 있도록 하고 캐시 규칙에 대한 제어를 유지하며 SW에서 모듈을 가져오는 방식이 좀 더 복잡하려면 더 많은 노력이 필요합니다.
먼저 vue.config.js 컨텐츠를 다음과 같이 변경합니다.

module.exports = {
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js"
    }
  }
};

그런 다음 src/main.js에서 변경한 내용을 복원합니다(즉, serviceworker-webpack-plugin와 관련된 모든 내용을 삭제합니다).마지막으로 src/service-worker.js를 사용하지 않음import으로 변경하고 서로 다른 매개 변수의 예처리를 사용해야 합니다.외부 모듈을 사용하려면 importScripts CDN 링크와 함께 사용할 수 있습니다. (예를 들어 아래의 모멘텀js. 사용법은 어리석지만, 이렇게 하는 방법을 설명합니다.)이제 카트리지 이름을 확장하는 방법:

importScripts('https://momentjs.com/downloads/moment.min.js');

workbox.precaching.precacheAndRoute(self.__precacheManifest);

const cacheExpTime = moment().add(1, 'day');
const cacheTimeLeft = moment.duration(cacheExpTime.diff(moment())).asSeconds();

workbox.routing.registerRoute(
    /\.(?:png|ico|gif|jpg|jpeg|svg)$/,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 60,
                maxAgeSeconds: cacheTimeLeft, // 1 day
            }),
        ],
    })
);

물론 세 번째 선택도 있다. 로그 기록과 다른 모든 것을 유지할 수 있지만, 나는 웹 패키지를 어떻게 정확하게 설정해야 할지 모른다.만약 당신이 간단한 해결 방안을 가지고 있다면, 나는 매우 기꺼이 댓글에서 다음과 같이 읽을 것이다.

결론

만약에 매우 간단한 캐시 기술을 원하고 서비스 직원이 정적 자산만 처리할 수 있다면 생성된 프로젝트는 충분합니다.단, 서비스 인원에 대해 더 많은 제어를 하고 ex.API 호출을 캐시하려면 조정이 필요합니다.나는 위의 제시, 어떻게 이 점을 할 것인지, 그리고 개발 모델을 어떻게 처리할 것인지가 유용할 것이라고 희망한다.
앞에서 말한 바와 같이 이것은 절대 가장 좋고 유일한 해결 방안이 아니다.일부 Vue 초보자(예를 들어 나)에게 합리적인 방식으로 서비스 직원과 접촉하는 것은 초보적인 선택일 뿐이다.