유용한 웹 기능 발견

브라우저에서 지원하는 고급 웹 기능은 무엇인가요? 이러한 기능을 사용하는 웹 앱은 무엇일까요? 이러한 질문에 답하려면 브라우저 테스트 사이트와 브라우저 확장 프로그램을 확인해 보세요.

Project Fugu는 웹 기능의 격차를 메우기 위한 기업 간 노력으로, 웹에서 새로운 유형의 애플리케이션을 실행할 수 있도록 합니다. 더 구체적으로 말하자면, 이는 앱 개발자가 이전에는 불가능했던 사용 사례를 지원하는 데 사용할 수 있는 새 API를 브라우저에 추가하는 것을 의미합니다. 선택한 브라우저에서는 어떤 API를 지원하나요? 어떤 웹 애플리케이션에서 이러한 API를 사용하나요? 궁금증을 해소하기 위해

내 브라우저는 Fugu이지?

파일 처리, 파일 시스템 액세스, 비동기 클립보드, 웹 공유와 같은 Project Fugu API는 플랫폼별 앱에서만 사용할 수 있을 것으로 예상되는 기능을 웹에 도입했습니다. 예를 들어 이제 이미지 파일을 더블클릭하여 연결된 PWA에서 열고 수정하고, 변경사항을 파일에 다시 저장한 다음 이미지 콘텐츠를 다른 앱으로 복사하거나 이메일 클라이언트와 공유할 수 있습니다. 이는 최근까지만 해도 웹에서 가능하지 않았던 흐름입니다.

가능한 작업을 알아보려면 How Fugu is my browser? 애플리케이션을 확인하고 선택한 브라우저에서 지원하는 Project Fugu API를 살펴보세요. 모든 기능이 모든 플랫폼에서 노출되는 것은 아닙니다. 예를 들어 Contact Picker API는 현재 모바일에서만 노출되므로 데스크톱에서 테스트하면 기술적으로 100% 점수에 도달할 수 없으며 그 반대의 경우도 마찬가지입니다. 따라서 이 테스트를 절대적인 과학이라기보다는 즐거운 경쟁이라고 생각하세요. 테스트된 각 기능에는 관련 문서 링크가 있으므로 기능을 자세히 알아볼 수 있습니다. 기능 감지가 가능한 경우 브라우저에서 해당 기능을 지원하는지 여부를 표시하고 마지막으로 Chrome 상태에 연결된 페이지 로드 통계를 통해 시간 경과에 따른 특정 기능의 인기도를 확인할 수 있습니다.

브라우저가 Web Share API를 지원하는 경우 Fugu 물고기 및 진행률 표시줄 바로 옆에 있는 Share 버튼을 클릭하여 Fugu 브라우저 상태를 공유할 수 있습니다. 또는 스크린샷을 다운로드한 다음 선택한 온라인 소셜 네트워크에 직접 공유할 수도 있습니다.

사이트(https://howfuguismybrowser.dev/)
"내 브라우저는 Fugu가 어떤가요?"라고 궁금해 한 적이 있나요?

Fugu 웹은 어떤가요?

How Fugu is the web?이라는 호환 브라우저 확장 프로그램을 사용하면 방문 중인 사이트에서 어떤 Fugu API가 사용되는지 확인할 수 있습니다. Chrome 웹 스토어에서 이 확장 프로그램을 설치하고 웹을 탐색하면 일부 사이트의 Fugu fish 카운터에 감지된 Project Fugu API가 포함된 배지가 어떻게 표시되는지 확인합니다. 예를 들어 Excalidraw를 탐색하면 Excalidraw가 감지 가능한 Project Fugu API 9개를 사용하므로 카운터가 9로 이동합니다. 이는 다음과 같습니다.

  1. CacheStorage
  2. 서비스 워커
  3. 웹 공유
  4. 비동기 클립보드
  5. 비동기 클립보드 (이미지)
  6. 파일 시스템 액세스
  7. 웹 공유 대상
  8. 웹 공유 대상 (파일)
  9. 파일 처리
https://excalidraw.com/ 사이트에서 실행되는 'Fugu is the Web' 확장 프로그램
'Fugu는 어떻게 웹으로 표현되나요?'

이전과 마찬가지로 브라우저에서 Web Share API를 지원하는 경우 결과를 직접 공유하거나 지원하지 않는 경우 수동으로 결과를 공유할 수 있습니다. 브라우저에서 특정 기능을 지원하는지 확인하려면 세부정보를 클릭하여 관련 문서를 읽어보세요. 글머리기호 목록에 있는 소스 코드 링크를 클릭하여 관련 소스 코드 스니펫을 직접 확인할 수도 있습니다.

결론

How Fugu is the Web? 확장 프로그램을 설치하여 웹을 탐색할 때 Project Fugu API 배지가 얼마나 자주 표시되는지 흥미롭게 확인하세요. 이러한 기능은 편안하지 않은 옵션으로 이미지를 업로드하는 대신 GitHub의 새 문제 페이지와 같이 앱에 이미지를 붙여넣을 수 있는 기능부터 Excalidraw와 같은 파일 처리, 파일 시스템 액세스, 클립보드 액세스와 같은 여러 기능을 사용하는 전면적인 앱까지 다양한 기능을 제공합니다. 이전에는 플랫폼별 앱이 필요했지만 경우에 따라 이제 웹 애플리케이션에서 채울 수 있습니다. WebHID API로 게임 키보드를 프로그래밍하는 WootingWootility 앱이 이러한 예에 해당합니다.

마찬가지로 선택한 브라우저의 새 버전 (또는 다른 브라우저나 삽입된 WebView)에서 How Fugu is my browser? 브라우저가 거의 새로 출시될 때마다 브라우저에 새로운 기능이 한두 개 생기면 진행률 표시줄이 조금씩 올라갑니다.

웹을 위한 빌드는 그 어느 때보다 실행 가능하며 새로운 기능이 엄청난 속도로 플랫폼에 계속 추가되고 있습니다. 앱 개발을 위해 웹만 선택하는 것은 아니겠지만, 이 테스트 사이트와 브라우저 확장 프로그램을 통해 지금까지 고려해 본 적이 없다면 지원되는 웹을 다시 한번 살펴보라고 권했길 바랍니다.