프로그레시브 웹 앱: PWA 지원

1. 환영합니다

이 실습에서는 기존 웹 애플리케이션을 가져와 고급 기능을 추가합니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈 중 여섯 번째입니다. 이전 Codelab은 설치 프롬프트 및 측정이었습니다. 이 시리즈에는 두 개의 Codelab이 더 있습니다.

학습할 내용

  • File System Access API를 사용하여 사용자의 파일 시스템에서 파일을 열고 저장합니다.
  • 설치된 PWA를 File Handling API로 파일 핸들러로 등록
  • 멀티스크린 창 배치 API를 사용하여 창을 열 올바른 화면 선택
  • 화면 Wake Lock API를 사용하여 화면이 절전 모드로 전환되지 않도록 방지

유의해야 할 사항

  • 자바스크립트

필요한 항목

  • 위 API를 지원하는 브라우저 일부 API의 경우 활성 개발자 트라이얼 또는 오리진 트라이얼이 있는 브라우저를 사용하여 완료해야 할 수 있습니다.

2. 설정하기

이 Codelab을 완료하는 데 필요한 시작 코드를 클론하거나 다운로드하여 시작하세요.

저장소를 클론하는 경우 pwa05--empowering-your-pwa 브랜치에 있는지 확인합니다. ZIP 파일에는 해당 브랜치의 코드도 포함되어 있습니다.

이 코드베이스에는 Node.js 14 이상이 필요합니다. 코드를 사용할 수 있게 되면 코드 폴더의 명령줄에서 npm ci를 실행하여 필요한 모든 종속 항목을 설치합니다. 그런 다음 npm start를 실행하여 Codelab의 개발 서버를 시작합니다.

소스 코드의 README.md 파일은 배포된 모든 파일에 대한 설명을 제공합니다. 또한 이 Codelab 전반에서 작업할 주요 기존 파일은 다음과 같습니다.

키 파일

  • js/lib/actions.js - 메뉴의 기본 클래스를 제공합니다.

중요한 아키텍처 참고사항

이 Codelab에서는 앱 메뉴의 다양한 버튼 작업을 관리하는 js/lib/action.js을 수정합니다. 초기화된 메뉴의 생성자에서 모든 속성에 액세스할 수 있습니다. 여기에는 기본 텍스트 편집기 인스턴스의 this.editor가 포함됩니다. 이 Codelab에서 사용할 두 가지 중요한 편집기 메서드는 다음과 같습니다.

  • this.editor.setContent(content) - 편집기의 콘텐츠를 제공된 콘텐츠 인수로 설정합니다.
  • this.editor.content() - 편집기의 현재 콘텐츠를 가져옵니다.

3. 파일 관리

이제 파일 시스템 액세스 API를 통해 사용자의 컴퓨터에서 파일을 열고, 저장하고, 새로 만들 수 있습니다. 사용자가 PWA에서 파일을 직접 열 수 있도록 지원하는 파일 처리 API와 결합하면 PWA가 사용자의 일상생활에 원활하게 통합된 것처럼 느껴질 수 있습니다.

앱 내에서 열기

연결할 첫 번째 작업은 앱 내에서 사용자의 파일 시스템에 있는 파일을 열 수 있는 것입니다. js/lib/actions.js의 Actions 클래스의 open 메서드에서 다음 작업을 실행하는 코드를 작성합니다.

  • 확장자가 .md 또는 .markdown인 text/markdown 파일을 가져오는 파일 선택기를 엽니다.
  • 페이지 제목을 열린 파일 이름 + PWA Edit로 설정합니다.
  • 파일 핸들러를 this.handler에 저장합니다.
  • 편집기의 콘텐츠를 파일의 텍스트 콘텐츠로 설정합니다.
  • settings-store IndexedDB 데이터베이스의 settings 객체 저장소에 핸들러를 저장합니다.

긍정적: 클래스 생성자는 async 함수일 수 없지만 그 안에서 Promise를 호출할 수 있습니다.

이제 파일을 열고 로드 간에 열린 파일을 저장할 수 있으므로 두 가지 작업을 더 해야 합니다. 앱이 로드될 때 핸들러를 다시 설정하고 사용자가 앱을 재설정할 때 핸들러를 설정 해제해야 합니다.

첫 번째 작업을 수행하려면 js/lib/actions.js의 Actions 클래스 생성자에서 다음을 실행하세요.

  • settings-store 데이터베이스 열기
  • settings 객체 저장소에서 저장된 핸들러 가져오기
  • 저장된 핸들러가 있는 경우 this.handler을 가져온 값으로 설정하고 페이지 제목을 핸들러의 파일 이름 (PWA Edit 추가)으로 설정합니다.

앱의 상태를 재설정하려면 (CTRL/CMD+Shift+R로 가능) js/lib/actions.js에서 Actions 클래스의 reset 메서드를 업데이트하여 다음을 실행합니다.

  • 문서 제목을 PWA Edit로 설정합니다.
  • 편집기의 콘텐츠를 빈 문자열로 설정
  • this.handler을 null로 설정합니다.
  • settings 객체 저장소에서 저장된 핸들러 삭제

사용자의 파일 시스템에서 열기

이제 앱에서 파일을 열 수 있으므로 사용자가 파일을 사용하여 앱을 열 수 있도록 해야 합니다. 기기의 파일 핸들러로 등록하면 사용자가 파일 시스템의 어느 곳에서든 앱에서 파일을 열 수 있습니다.

부정적 : 이 기능을 사용하려면 개발자 또는 오리진 트라이얼을 사용 설정해야 할 수 있습니다. 개발자 트라이얼을 사용 설정해야 하는 경우 일반 브라우저 대신 Chrome Canary 사본에서 사용 설정하는 것이 좋습니다. Origin Trial을 사용 설정해야 하는 경우 평소와 같이 등록하고 태그를 index.html에 추가해야 합니다.

시작하려면 manifest.json에서 다음 작업을 실행하는 file_handlers 항목을 추가하세요.

  • / 영업 시작
  • .md 또는 .markdown 파일 확장자가 있는 text/markdown를 허용합니다.

이렇게 하면 사용자가 앱으로 파일을 열 수 있지만 앱에서 실제로 파일이 열리지는 않습니다. 이렇게 하려면 js/lib/actions.js의 Actions 클래스에서 다음을 실행하세요.

  • 생성자에 window.launchQueue 소비자를 추가하고 핸들러가 있는 경우 핸들러를 사용하여 this.open를 호출합니다.
  • 선택적 실행 핸들러
      this.open
    • 파일이 있고 FileSystemFileHandle의 인스턴스인 경우 이를 함수의 파일 핸들러로 사용합니다.
    • 그렇지 않으면 파일 선택기를 엽니다.

위의 두 단계를 모두 완료한 후 PWA를 설치하고 파일 시스템에서 파일을 열어 보세요.

파일 저장

사용자가 선택할 수 있는 저장 경로에는 이미 열려 있는 파일에 변경사항을 저장하는 방법과 새 파일에 저장하는 방법의 두 가지가 있습니다. 파일 시스템 액세스 API를 사용하면 새 파일에 저장하는 것은 실제로 새 파일을 만들고 파일 핸들러를 다시 가져오는 것이므로 먼저 기존 핸들러에서 저장해 보겠습니다.

js/lib/actions.js의 Actions 클래스에 있는 save 메서드에서 다음을 실행합니다.

  • this.handler에서 핸들러를 가져오거나, 핸들러가 없는 경우 데이터베이스에서 저장된 핸들러를 가져옵니다.
  • 파일 핸들러의 FileSystemWritableFileStream 만들기
  • 편집기의 콘텐츠를 스트림에 씁니다.
  • 스트림 닫기

파일을 저장할 수 있게 되면 다른 이름으로 저장을 구현할 차례입니다. 이렇게 하려면 js/lib/actions.js의 Actions 클래스에 있는 saveAs 메서드에서 다음을 실행하세요.

  • 저장 파일 선택기를 표시하고 Markdown File로 설명하며 .md 확장자가 있는 text/markdown 파일을 허용합니다.
  • this.handler을 반환된 핸들러로 설정
  • 핸들러를 settings 객체 저장소에 저장
  • this.save이 완료될 때까지 기다려 새로 만든 파일에 콘텐츠를 저장합니다.

이 작업을 완료한 후 save 메서드로 돌아가 handler에 쓰기를 시도하기 전에 handler가 있는지 확인하고, 없는 경우 this.saveAs가 완료될 때까지 기다립니다.

4. 미리보기 표시

마크다운 편집기를 사용하면 렌더링된 출력의 미리보기를 볼 수 있습니다. 창 관리 API를 사용하여 렌더링된 콘텐츠의 미리보기를 사용자의 기본 화면에 엽니다.

시작하기 전에 js/preview.js 파일을 만들고 로드될 때 미리보기가 표시되도록 다음 코드를 추가합니다.

import { openDB } from 'idb';
import { marked } from 'marked';

window.addEventListener('DOMContentLoaded', async () => {
  const preview = document.querySelector('.preview');
  const db = await openDB('settings-store');
  const content = (await db.get('settings', 'content')) || '';

  preview.innerHTML = marked(content);
});

미리보기는 다음과 같이 작동해야 합니다.

  • 사용자가 미리보기 버튼을 클릭했는데 미리보기가 열려 있지 않으면 미리보기가 열려야 합니다.
  • 사용자가 미리보기 버튼을 클릭하고 미리보기가 열려 있으면 미리보기가 닫혀야 합니다.
  • 사용자가 PWA를 닫거나 새로고침하면 미리보기가 닫혀야 합니다.

순서대로 다음을 실행하여 js/lib/actions.js의 Actions 클래스에서 preview 메서드를 수정합니다.

  • 창 관리 API를 사용하여 사용 가능한 화면 가져오기
  • 화면을 필터링하여 기본 화면 찾기
  • 사용 가능한 너비의 절반과 사용 가능한 높이 전체를 차지하는 Markdown preview 제목의 /preview 창을 엽니다. 이 창은 해당 화면의 사용 가능한 오른쪽 절반을 모두 차지하도록 배치됩니다. 사용 가능한 크기에는 시스템 메뉴 바, 툴바, 상태 또는 위치와 같은 화면의 예약된 영역이 제외됩니다.
  • 열려 있는 창을 this.previewWindow에 저장합니다.
  • 메서드 상단에서 this.previewWindow가 있는지 확인하고, 있는 경우 창 미리보기를 여는 대신 창을 닫고 this.previewWindow를 설정 해제합니다.

마지막으로 js/lib/actions.js의 Actions 클래스 생성자 끝에서 다음을 실행합니다.

  • beforeunload 이벤트 중 this.previewWindow 닫기

5. 포커스

마지막으로 사용자에게 방해 요소가 없는 글쓰기 모드를 제공하고자 합니다. 방해 요소가 없다는 것은 다른 앱의 방해 요소가 없다는 것뿐만 아니라 사용자의 화면이 절전 모드로 전환되지 않도록 하는 것도 의미합니다. 이렇게 하려면 Screen Wake Lock API를 사용합니다.

절전 모드 해제 버튼은 미리보기 버튼과 마찬가지로 작동하며, 켜짐과 꺼짐 상태 간에 전환됩니다. 이렇게 하려면 js/lib/actions.js의 Actions 클래스의 focus 메서드에서 다음을 실행하세요.

  • 문서에 전체 화면 요소가 있는지 확인
  • 이 경우 다음을 수행합니다.
    • 전체 화면 종료
    • this.wakeLock이 있으면 웨이크 락을 해제하고 this.wakeLock을 재설정합니다.
  • 표시되지 않는 경우 다음 단계를 따르세요.
    • 절전 모드 해제 잠금 센티넬을 요청하고 this.wakeLock로 설정
    • 문서의 본문이 전체 화면으로 전환되도록 요청합니다.

6. 축하합니다.

File System Access API 및 File Handling API를 사용하여 시스템 파일을 관리하고 PWA를 시스템과 통합하는 방법, Window Management API를 사용하여 여러 화면에서 창을 여는 방법, Screen Wake Lock API를 사용하여 화면이 절전 모드로 전환되지 않도록 하는 방법을 알아봤습니다.

이 시리즈의 다음 Codelab은 서비스 워커 포함입니다.