svelte에서 푸시 알림으로 Github 트래커를 만듭니다-JS 튜토리얼-php.cn

svelte에서 푸시 알림으로 Github 트래커를 만듭니다 이 기사에서는 푸시 알림을 보내서 추적 된 저장소에 새로운 문제/PR이있을 때 사용자에게 알리는 GitHub 트래커를 구축하는 방법을 배웁니다.

Github는 이미 선택한 경우 이메일을 통해 알림을 보내지 만 많은 연구에 따르면 푸시 알림이 이메일보다 사용자에게 더 잘 도달하는 것으로 나타났습니다. 이 튜토리얼을 따라 Github 트래커를 구축 한 후에는 다음과 같은 방법을 배웠습니다.

서비스 작업자를 추가하고 추적기를 pwa 로 변환합니다. 푸시 알림을 구독하십시오 github api 를 사용하십시오 vercel 클라우드 함수를 통해 푸시 이벤트를 보내십시오 easycron

를 사용하여 새로운 문제를 주기적으로 가져옵니다

전제 조건 이 기사를 따르려면 몇 가지 기술과 서비스가 있습니다.

node.js 및 npm이 설치되어 사전 Svelte 지식

Github API 를 사용하고 있기 때문에 무료 GitHub 계정입니다. 클라우드에서 mongodb를 사용하기위한 무료 mongodb atlas 계정 응용 프로그램을 배포하고 클라우드 함수를위한 무료 Vercel 계정

푸시 알림은 무엇입니까? 이 소위“푸시 알림”이 무엇인지 살펴 보겠습니다. 일반 알림에 익숙해야합니다. 이것들은

당신에게

당신에게 알리기 위해 화면에 나타나는 텍스트의 작은 거품입니다. 푸시 알림은 주문형 가 생성되지 않지만 푸시 이벤트를 수신 할 때 생성된다는 점을 제외하고는 유사합니다. 푸시 알림이 작동합니다 앱이 닫히면

가

를 사용하고 일반 알림에는 앱을 열어야합니다. 푸시 알림은 Service Workers라는 것을 사용하여 Chrome과 같은 최신 웹 브라우저에서 지원됩니다. 서비스 작업자는 브라우저의 기본 스레드와 별도로 실행되는 작은 JavaScript 조각이며 결과적으로 앱이 PWA (Progressive Web Application)로 설치되면 오프라인으로 실행될 수 있습니다. 푸시 알림은 채팅 애플리케이션에서 읽지 않은 메시지, 게임에서 사용자에게 게임 이벤트, 뉴스 사이트에서 사용자에게 알리고 기사를 깨는 기사를 알려주는 경우 사용자에게 알리기 위해 사용자에게 알리기 위해 사용됩니다.

. 앱에 푸시 알림을 표시하는 네 단계가 있습니다.

wind 앱을 PWA로 변환하여 를 설치하십시오 푸시 이벤트를 구독하십시오 푸시 이벤트를 받으면 알림을 보내

1 단계 : 추적기 생성 이 기사에서 롤업 대신 vite.js와 함께 svelte를 사용해 봅시다. Vite는 이름에서 알 수 있듯이 롤업보다 빠르며 환경 변수에 대한 내장 지원을 제공합니다. Svelte 및 Vite로 새 프로젝트를 만들려면이 명령을 실행하십시오.

~~svelte에 프레임 워크를 선택하십시오. 원하는 경우 TypeScript를 사용할 수 있습니다. 정기적 인 JavaScript를 사용할 것입니다.~~

다음, 프로젝트 폴더에 CD를 사용하면 애플리케이션에 TailWindcss를 추가하고 다음 명령으로 모든 종속성을 설치할 수 있습니다.
마지막으로, 좋아하는 코드 편집기에서 프로젝트를 열고 NPM Run Dev 또는 Yarn Dev를 실행하여 http : // localhost : 3000. 추적기가 작동하는 방법
우리는 GitHub API를 사용하여 문제 목록을 얻고 사용자가 추적 한 저장소에 대한 요청을 가져옵니다. 사용자의 추적 리포지토리와 사용자 이름은 MongoDB 데이터베이스에 저장됩니다. 첫 번째 단계는 사용자에게 사용자 이름을 프롬프트하는 것입니다. src/lib/usernameprompt.svelte를 만들면 그렇게 할 구성 요소가 될 것입니다. 양식에 대한 내 UI는 다음과 같습니다. 그러나 원하는대로 디자인 할 수 있습니다.
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
app.svelte와 같은 구성 요소를 다음과 같이 추가하십시오
다음, 기본 추적기 UI를 추가합시다. 파일 src/lib/tracker.svelte를 만들고 아래 코드를 추가하십시오.
구성 요소를 테스트하려면 App.svelte : 의 새 추적기 구성 요소의 usernameprompt 구성 요소를 일시적으로 스왑합니다.
이제 화면이 다음과 같이 보일 것입니다

참고 : app.svelte의 이전 코드로 복원해야합니다!

2 단계 : 클라우드 함수 설정 푸시 이벤트를 응용 프로그램에 보내려면 백엔드 서버가 있어야합니다. 즉, 새로운 (아마도) ExpressJS 프로젝트를 작성한 다음 별도로 배포해야합니다. 이것은 푸시 알림을 실험하는 누군가에게 두통이 될 것입니다.
vercel 클라우드 기능 구조! 클라우드 기능은 익스프레스 경로와 같습니다. 코드를 실행하고 URL을 가져올 때 응답을 제공 할 수 있습니다. Vercel은 클라우드 기능을 지원합니다. API 폴더에서 파일을 작성하면됩니다. 클라우드 기능을 사용하여 MongoDB와 상호 작용할 것입니다. 비밀을 드러내는 클라이언트 측면은 결코 좋은 일이 아니기 때문입니다.
npx svelte-add tailwindcss # Install packages yarn install # or npm install 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
. 먼저 Mongodb Atlas에 클러스터가 있는지 확인하십시오. MongoDB에는 무료 계획이 있으므로 아직 계획하지 않은 경우 작성하십시오. 이제 Atlas 대시 보드의 사이드 바에있는 데이터베이스 액세스 탭으로 이동하십시오. 오른쪽의 녹색 버튼을 클릭하여 새 데이터베이스 사용자를 추가하십시오. 사용자의 세부 정보를 입력하고 (비밀번호를 잊지 마십시오) 사용자를 만듭니다.

데이터베이스에 연결하려면 연결 문자열이 필요합니다. 새 사용자와 비밀번호를 어딘가에 저장하고 클러스터의 개요로 이동하십시오. 오른쪽의 연결 버튼을 클릭하고 연결 방법으로 응용 프로그램 연결을 선택하십시오. 아래와 비슷한 연결 문자열이 표시됩니다.
<script> let username = ""; async function submit() { // TODO } </script> <form on:submit|preventDefault="{submit}" class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">Enter a username</h1> <p class="text-center text-xl m-4">Enter a username to use this tracker</p> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Username" aria-label="Username" bind:value="{username}" /> <button class="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" > Submit </button> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 연결 문자열이 있으므로 데이터베이스에 연결할 수 있지만 먼저 현재 응용 프로그램을 Vercel에 배포해야합니다. 이 작업을 수행하는 가장 쉬운 방법은 github를 사용하는 것입니다 새 Github 저장소를 만들고 코드를 푸시하십시오. 다음으로 Vercel 대시 보드로 가서 새 프로젝트 버튼을 클릭하십시오. github 저장소를 가져오고 프레임 워크가 vite인지 확인하고 Mongodb_url이라는 환경 변수를 추가하십시오. MongoDB 데이터베이스의 연결 문자열로 값을 설정합니다. 웹 사이트가 배포되면 Yarn Dev에서 Vercel Dev로 지역 개발 명령을 변경해야합니다. 명령을 실행하면 기존 프로젝트에 링크하라는 요청이 있으면 예를 클릭하십시오. 참고 : 아직 NPM I -G Vercel을 사용하여 Vercel Cli를 설치하십시오. 나처럼, VITE DEV와 함께 VITE를 사용하는 데 문제가 발생하면 프로젝트의
Development Command
를 Vite로 변경하십시오. 🎜> 이것은 올바른 환경 변수와 함께 클라우드 기능을 로컬로 사용할 수 있습니다. 너무 많은 연결을 열지 않고 MongoDB에 액세스 할 수있는 도우미 파일을 추가하겠습니다. 파일 api/_mongo.js를 만들고 다음 코드를 넣습니다. _ _로 접두사가 붙은 API 디렉토리의 파일은 가 클라우드 함수로 취급되지 않습니다. 이를 통해 별도의 파일에 도우미 및 기타 논리를 추가 할 수 있습니다.

메인 클라이언트 대신 연결 약속을 내보내면 서버리스 플랫폼에서 작업하고 있기 때문에 중복 연결을 방해하지 않습니다. esmodules 대신 commonjs를 사용합니다 가져 오기 대신 요구 사항을 사용하는 방법에 주목하십시오. 글을 쓰는시기에 vercel 클라우드 기능

는 javaScript 파일에서 esmodule 가져 오기 문을 지원하지 않기 때문입니다. 대신 CommonJS가 필요하다 진술을 사용해야합니다 여기에는 한 가지 문제가 있습니다. 앱의 package.json이 표시되면 "type": "module"라는 줄이 있음을 알 수 있습니다. 이것은 프로젝트의 각 JavaScript 파일이 ESModule임을 의미합니다. 이것은 우리가 원하는 것이 아니므로 API 디렉토리의 모든 파일을 CommonJS 파일로 표시하려면 요구 사항을 사용하고 API/PACKET.JSON을 작성 하고이 줄을 추가 할 수 있습니다.
이를 통해 이제 API 디렉토리에서 요구 사항을 사용할 수 있습니다. 이 명령으로 MongoDB 연결 드라이버를 설치하십시오 3 단계 : 기능 추가 현재 추적기는 실제로 작동하지 않으므로 해결해 봅시다. 인증 인증을 위해서는 MongoDB 데이터베이스에 사용자가 입력 한 사용자 이름을 저장해야합니다. 파일 작성 /api/storeusername.js를 만듭니다. 이것은 클라우드 기능이며 http : // localhost : 3000/api/storeusername에 매핑됩니다. 아래 코드를 넣으십시오.
다음, MongoDB 클라이언트를 다음과 같이 받으십시오
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
요청 본문에서 사용자 이름을 추출하십시오
다음 다음,이 사용자 이름을 데이터베이스에 저장해야합니다.
마지막으로, 이것은 API/StoreUserName.js 파일을 보는 방법입니다
npx svelte-add tailwindcss # Install packages yarn install # or npm install 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
vercel을 사용하여 응용 프로그램을 Vercel에 배포하거나 Github로 푸시하여 서버리스 기능이 실시되어야합니다! 이 명령으로 컬을 사용하여 테스트 할 수 있습니다
이것은 _id 필드가 방금 제공 한 사용자 이름 인 사용자 컬렉션에서 새 문서를 만들어야합니다.

<script> let username = ""; async function submit() { // TODO } </script> <form on:submit|preventDefault="{submit}" class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">Enter a username</h1> <p class="text-center text-xl m-4">Enter a username to use this tracker</p> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Username" aria-label="Username" bind:value="{username}" /> <button class="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" > Submit </button> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이제 남은 것은이 기능을 프론트 엔드에서 가져 오는 것입니다. src/lib/usernameprompt.svelte에서 제출 함수에서 먼저 클라우드 기능에 요청을 보내고 사용자 이름을 LocalStorage에 넣어 사용자가 인증된다는 것을 알 수 있습니다. 페치 함수로 요청을 보낼 수 있습니다 :
우리는 페이지를 다시로드하고 있습니다. app.svelte에서 페이지가로드되면 LocalStorage에 사용자 이름이 있는지 확인해야합니다. 있으면 usernameprompt 화면을 건너 뛸 수 있습니다. 이렇게하려면 app.svelte의 스크립트 태그 에이 코드를 추가하십시오.
위의 코드는 사용자 이름에 대한 LocalStorage를 확인하고 존재하는 경우 Isloggedin을 true로 설정합니다. 다음으로, 우리가해야 할 일은 DOM을 업데이트하기 만하면됩니다. app.svelte의 스크립트 태그 바로 아래에 다음을 추가하십시오
<script> import UsernamePrompt from "./lib/UsernamePrompt.svelte"; </script> <UsernamePrompt /> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
추적 및 비 추적 리포지토리
이제 트래커의 실제 추적 기능에 대한 기능을 추가해 봅시다. Tracker.svelte를 열면 Track () 및 Untrack ()의 두 가지 기능이 있습니다. 이러한 기능은 데이터베이스에 추가하여 각각 리포지토리를 추적하고 추적하지 않아야합니다. 그러나 그 전에는 몇 가지 더 클라우드 기능을 추가해야합니다. 하나는 리포지토리를 추적하고, 다른 하나는 추적하고, 다른 하나는 사용자의 추적 리포지토리를 얻기 위해 마지막으로. 그들에게 하나씩 작업합시다.
추적 리포지토리 파일 API/TrackRepo.js를 만듭니다. 이것은 /api /trackrepo : 에 매핑됩니다
<script> let repo = ""; function track() { // TODO } function untrack(repo) { // TODO } </script> <form on:submit|preventDefault={track} class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">GitHub tracker</h1> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Enter the repository's URL" aria-label="Repository URL" bind:value={repo} /> <button class="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" >Track repository</button > <h2 class="mt-4 text-2xl">Tracked repositories</h2> <ul class="m-2 list-decimal">  <li class="py-1 flex items-center justify-between"> <a class="text-gray-500 hover:underline" href="https://github.com/test/test" >https://github.com/test/test</a > <button on:click={() => untrack("")} >Untrack</button > </li> </ul> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
사용자가 저장소를 추적하려면 저장소 이름과 본문의 사용자 이름으로 게시물 요청을이 기능에 보냅니다. 이 함수는 사용자 컬렉션의 TrackedRepos 필드에 저장소 이름을 추가합니다. 본체 에서이 필드를 얻으려면 코드를 추가하십시오.
및 마지막으로 코드를 추가하여 데이터베이스에 추가하여 리포지토리를 추적합니다.
그리고 이것은 API/TrackRepo.js를보아야하는 방법입니다 :
이제 트래커 에서이 기능을 사용할 차례입니다. src/lib/tracker.svelte를 열고 track () 함수를 이것으로 변경하십시오 이제 입력에 저장소를 입력하고 트랙을 클릭하면 데이터베이스에 저장해야합니다. 추적되지 않은 리포지토리 저장소를 추적하지 않기 위해 클라우드 기능을 추가하겠습니다. 파일 API/UntrackRepo.js를 만듭니다. 이것은 /api /untrackrepo : 에 매핑됩니다
이 클라우드 함수의 요청 본문은 TrackRepo 함수의 요청 본문 - 사용자의 사용자 이름 및 repo : 와 동일합니다.
다음, 여기에 사용자의 trackedRepos에서 저장소를 삭제하는 코드가 있습니다.
그리고 이것은 API/UntrackRepo.js를보아야하는 방법입니다
이제 프론트 엔드 에서이 클라우드 기능을 활용해야합니다. src/lib/tracker.svelte의 untrack () 함수 에서이 코드를 추가하십시오
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
당신은 그것이 트랙 () 함수와 매우 유사하다는 것을 알게 될 것입니다. 말 그대로 동일하기 때문입니다. URL 만 업데이트되었습니다. 추적 된 저장소 목록을 표시하지 않기 때문에 아직 이것을 테스트 할 수는 없습니다. 리스팅 추적 리포지토리 이 부분은 매우 간단합니다. 데이터베이스에서 사용자의 추적 리포지토리를 가져와 프론트 엔드에 표시하면됩니다. 클라우드 함수 API/LISTREPOS.JS를 작성하고 다음 코드를 추가하십시오.
클라우드 함수는 HTTP get request를 사용하여 호출되므로 본문을 넣을 수 없으므로 쿼리 문자열을 사용하여 사용자 이름을 전달합니다. 그리고 user.trackedrepos가 null이 될 수 있으므로 배열을 반환해야합니다. 다음으로,이 클라우드 기능을 프론트 엔드에서 사용해야합니다! src/lib/tracker.svelte 파일에서 fetchrepos라는 비동기 함수를 만듭니다. 이 기능은 방금 만든 클라우드 기능을 사용하여 데이터베이스에서 사용자의 추적 리포지토리를 가져올 책임이 있습니다.
구성 요소가 장착 될 때이 기능을 가져와야합니다. 이것은 svelte의 Onmount 후크를 사용하여 수행 할 수 있습니다. 구성 요소가 장착되면 위의 함수의 반환 된 값을 TrackedRepos라는 변수로 설정하려고하므로 DOM에서 사용할 수 있습니다.
npx svelte-add tailwindcss # Install packages yarn install # or npm install 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이제 사용자의 추적 리포지토리에 액세스 할 수있게되었으므로 트래커에서 HTML 템플릿을 업데이트하여 추적 된 리포지토리의 정확한 목록을 표시하려면 다음과 같습니다.
변경 사항을 확인하려면 여전히 페이지를 다시로드해야합니다. 트랙이나 트랙 이외의 버튼을 클릭 할 때마다 DOM을 업데이트하여 다음을 해결해 봅시다.
그리고 다음은 트래커를 어떻게보아야하는지 :
<script> let username = ""; async function submit() { // TODO } </script> <form on:submit|preventDefault="{submit}" class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">Enter a username</h1> <p class="text-center text-xl m-4">Enter a username to use this tracker</p> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Username" aria-label="Username" bind:value="{username}" /> <button class="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" > Submit </button> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
그리고 다음은 앱이 어떻게 나타나야하는지에 대한 스크린 샷입니다.

<script> import UsernamePrompt from "./lib/UsernamePrompt.svelte"; </script> <UsernamePrompt /> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
4 단계 : 앱을 설치할 수있게합니다
푸시 알림은 설치된 앱
에서만 지원됩니다. 예, 웹 애플리케이션을
<script> let repo = ""; function track() { // TODO } function untrack(repo) { // TODO } </script> <form on:submit|preventDefault={track} class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">GitHub tracker</h1> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Enter the repository's URL" aria-label="Repository URL" bind:value={repo} /> <button class="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" >Track repository</button > <h2 class="mt-4 text-2xl">Tracked repositories</h2> <ul class="m-2 list-decimal">  <li class="py-1 flex items-center justify-between"> <a class="text-gray-500 hover:underline" href="https://github.com/test/test" >https://github.com/test/test</a > <button on:click={() => untrack("")} >Untrack</button > </li> </ul> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
> 지원되는 브라우저
, 즉 Chrome 및 기타 크롬 기반 브라우저를 사용하여 정기 응용 프로그램으로 설치할 수 있습니다. 앱을 설치할 수 있으려면 프로그레시브 웹 앱으로 변환해야합니다. 이것은 3 단계 프로세스입니다 :

서비스 작업자 추가 앱을 오프라인으로 작동하게하십시오 Danifest.json 파일을 추가하십시오 세 단계가 모두 완료되면 응용 프로그램을 방문 할 때 주소 표시 줄에 설치 버튼이 나타납니다. 서비스 작업자 추가 서비스 작업자는 브라우저의 기본 스레드에서 백그라운드에서 실행할 수있는 JavaScript 파일입니다. 이를 통해 오프라인으로 실행하고 백그라운드에서 실행하고 큰 파일을 다운로드하는 것과 같은 작업을 수행 할 수 있습니다. 그들은 주로 요청을 캐싱하고 이벤트를 듣는 데 사용됩니다. 서비스 작업자를 추가하려면 CSS 파일과 같이 공개적으로 사용할 수있는 JavaScript 파일을 추가해야합니다. 그 이름은 실제로 중요하지 않지만 일반적으로 Service-Worker.js 또는 Sw.js라고합니다. 이 파일은 CSS처럼 공개적으로 제공되어야하므로 공개 디렉토리에 넣으십시오.
. 서비스 근로자는 이벤트를 듣고 일합니다. 캐싱 파일의 경우 앱이 오프라인으로 작동하면 설치, 활성화 및 이벤트를 가져옵니다. 서비스 작업자가 설치되면 설치 이벤트가 호출됩니다. 서비스 작업자가 실행될 때 활성화 이벤트가 호출되고 네트워크 요청이있을 때마다 페치 이벤트가 호출됩니다. Self.adeventListener ()를 사용하여 이벤트 리스너를 추가 할 수 있습니다. Public/Service-Worker.js 파일을 만들고 다음 코드를 추가하겠습니다.
남은 것은이 서비스 작업자를 등록하는 것입니다. app.svelte의 Onmount 기능에서 그렇게하겠습니다. OnMount 내부의 콜백 끝에이 코드를 추가하십시오 :
위의 코드는 먼저 브라우저에서 서비스 작업자 지원을 확인한 다음 서비스 작업자를 등록합니다. 레지스터 () 함수의 경로는 도메인 에 대한 경로

,
프로젝트 폴더에 대한 경로라는 점에 유의해야합니다. 즉 : // localhost : 3000/service-worker.js, 공개 디렉토리에 있기 때문에. 이제 페이지를 다시로드하고 콘솔을 열면 위의 메시지가 표시됩니다. 앱을 오프라인으로 작동하게합니다 앱을 오프라인으로 작동 시키려면 서비스 작업자를 사용하여 내용을 캐시해야합니다. 우리의 앱은 클라우드 기능에 대한 요청을하기 때문에 네트워크가 없을 때는 실제로 많은 일을 할 수 없습니다. 따라서 캐시 된 기능이없는 앱 버전을 표시하는 대신 오프라인 상태임을 나타내는 페이지를 표시하겠습니다. public/offline.html 파일을 만들고 다음 코드를 넣습니다.
원하는 대로이 페이지를 사용자 정의하십시오. 이제이 페이지를 캐시해야합니다. 캐싱은 또한 우리가 듣고있는 위의 세 명의 서비스 작업자 이벤트를 사용하는 3 단계 프로세스입니다. 작동 방식은 다음과 같습니다

캐시가 열리고 원하는 경로가 Cache.add를 사용하여 캐시에 추가됩니다. 이것은 설치 중에 발생합니다.
이전 캐시가 삭제되므로 최신 캐시 만 사용자의 컴퓨터에 저장됩니다. 이것은 덜 스토리지를 사용합니다. 이것은 활성화 중에 발생합니다.

우리는 네트워크 요청을 가로 채고 해당 요청이
페이지 탐색인지
, 즉 경로를 변경하는지 확인합니다. 요청이 성공하면 모든 것이 좋고 양호하지만 요청이 실패하면 Offline.html 페이지를 사용자에게 표시합니다. 이것은 페치 중에 발생합니다.
첫 번째 단계를 구현합시다. Service Worker 파일을 열고 설치 이벤트의 핸들러를 다음과 같이 변경하십시오.
event.waituntil ()은 Await 키워드와 유사한 함수입니다. addeventListener의 콜백은 비동기식이 될 수 없으므로 해당 기능을 구현하려면 이벤트를 사용해야합니다. waituntil ()을 사용하여 약속이 기다릴 수 있도록 약속을 전달해야합니다. self.skipwaiting ()은 브라우저에 설치 프로세스를 완료했다고 말하면 서비스 작업자를 활성화하십시오. 활성화에 관해 말하면, 이제 오래된 캐시를 삭제하기 위해 코드를 추가합시다.
그리고 그와 함께 오프라인 .html 페이지는 캐시해야합니다. 두 번 확인하려면 f12 를 눌러 개발자 도구를 열고 응용 프로그램 탭을 선택하십시오. 사이드 바에는 캐시 스토리지 탭이 있어야합니다. 그것을 클릭하면 /offline.html을 알아야합니다

이제 네트워크가 없을 때이 파일을 제공하는 것뿐입니다.
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
event.ResponsWith () 함수는 전달되는 응답 객체가있는 네트워크 페치 요청에 응답합니다. 이 경우 요청을 먼저 가져오고 인터넷 문제로 인해 요청이 실패하면 서비스 작업자가 캐시 한 오프라인 .html 페이지를 전송합니다. 이제 페이지를 새로 고치고 Wi-Fi 또는 이더넷을 끄십시오. 새로 고침 할 때 기본 크롬 "네트워크 없음"페이지 대신 오프라인 페이지가 표시됩니다. 이 오프라인 페이지는 불행히도 공룡 게임이 없지만 응용 프로그램을 PWA로 설치할 수 있습니다. 서비스 작업자가 보는 방법은 다음과 같습니다
manifest.json 파일 추가 Danifest.json 또는 Web Manifest에는 응용 프로그램에 대한 유용한 정보가 포함되어 있습니다. 앱 이름, 테마 색상, 설명, 아이콘 등과 같은 것들이 포함되어 있습니다. 이 파일은 일반적으로 CSS 파일을 연결하는 방법과 같이 html의 태그를 사용하여 웹 사이트에
링크로 링크되어야합니다. 응용 프로그램에 매니페스트를 추가하겠습니다. 이를 위해 발전기를 자유롭게 사용하십시오 :
응용 프로그램에 대한 아이콘을 다운로드해야합니다. 이 아이콘은 크기가 다르며 다른 운영 체제에서 사용됩니다. 소스 코드 저장소에서 또는이 링크를 사용하여 다운로드 할 수 있습니다. zip 파일을 공개/아이콘으로 추출하십시오다음 다음, 매니페스트와 아이콘을 index.html 파일에 추가해야합니다. 다음 코드를 넣어서 그렇게 할 수 있습니다.
f12
를 눌러 크롬 개발자 도구를 열고 등대 탭으로 가서 새로운 감사를 만듭니다. 이제 PWA 섹션에서 "설치 가능한"점수를 얻어야합니다. 즉, 웹 사이트를 WebApp으로 성공적으로 변환했으며 이제 주소 표시 줄에서 버튼을 클릭하여 웹 사이트를 설치할 수 있습니다.
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

5 단계 : 푸시 알림에 가입 푸시 알림을 보내기 전에 사용자로부터 허가를 받아야합니다. 알림 .requestPermission () 메소드를 사용하여 그렇게 할 수 있습니다. 이 메소드는 비동기 이고 기본값과 동일하고 거부 및 부여 될 수있는 a
문자열
를 반환합니다. 사용자가 x를 누르거나, 누르기 거부 또는 프레스가 각각 알림 프롬프트에서 허용되면 반환됩니다. app.svelte의 Onmount 후크를 사용 하여이 기능을 호출합니다. 이제 앱에서 알림을 허용하는 팝업을 받아야합니다. 알림을 보낼 수있는 권한이 있으므로 서비스 작업자를 사용하여 푸시 이벤트를 구독하겠습니다. 서비스 작업자의 pushmanager.subscribe () 함수를 사용하여 수행 할 수 있습니다. 서비스 작업자 자체에서 또는 app.svelte에 서비스 작업자를 등록한 후에이를 수행 할 수 있습니다. 후자와 함께 갈 것입니다. 따라서 똑같이하려면 onmount의 Navigator.serviceWorker.register 기능을 아래 코드로 교체하십시오.
콘솔을 열면 ApplicationServerKey가 누락되었다는 오류가 표시됩니다. 푸시 알림에는 푸시 메시지를 보내려면 서버가 필요 하며이 서버는 vapid 키로 인증됩니다. 이 키는 서버를 식별하고 브라우저에 푸시 메시지가 유효하다는 것을 알려줍니다. Vercel Cloud 함수를 사용하여 푸시 메시지를 보내므로 설정해야합니다.
. 푸시 메시지 서버 생성 우리는 Web-Push NPM 패키지를 사용하여 키를 생성하고 푸시 이벤트를 보내는 데 도움이됩니다. 설치하려면 API 폴더로 CD를 넣고 다음을 실행합니다.
웹 푸시 패키지가 Svelte 앱에 설치되므로 API 폴더에 CD를 보내십시오. 푸시 알림을 보내려면 공개 및 개인 VAPID 키 쌍을 생성해야합니다. 그렇게하려면 노드 명령을 사용하여 노드 대체를 열고 다음 명령을 실행하십시오.
이 두 키를 복사하여 환경 변수로 보관하십시오. vapid_private_key 및 vapid_public_key와 같은 기억에 남는 것을 불러야합니다. 이제 클라우드 기능에 대한 작업을 시작할 수 있습니다. 파일 API/vapidkeys.js를 만듭니다. 이 파일은
public vapid 키를 클라이언트에게 전송하는 책임이 있습니다. 개인 vapid 키를 공유해야합니다. API/Vapidkeys.js에서는 먼저 웹 푸시를 초기화해야합니다 : your_vercel_domain을 Vercel 앱 도메인으로 바꾸십시오. 다음으로, 공개 vapid 키를 요청자에게 반환하기 위해 함수를 내보내겠습니다. 이 완료되면 이제 app.svelte에서 Onmount 함수를 업데이트하여 먼저 클라우드 함수를 가져 오려면 공개 키를 얻은 다음 구독 기능에서 공개 키를 사용할 수 있습니다.
우리가 푸시 피드 키를 가져 오는 방법을 알아보십시오
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
가 푸시 알림을 구독하지 않았습니다. 콘솔을 열면 가입이 콘솔에 로그인 한 것을 볼 수 있습니다.

npx svelte-add tailwindcss # Install packages yarn install # or npm install 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
제공되는 끝점은 우리에게 매우 중요합니다. 이 엔드 포인트를 사용하면이 사용자에게 Web-Push를 사용하여 알릴 수 있습니다. 이 엔드 포인트를 데이터베이스에 저장할 클라우드 기능을 작성하겠습니다. 파일 API/StoreNdpoint.js : 를 만듭니다
신체에서 구독과 사용자 이름을 잡아 봅시다 :

<script> let username = ""; async function submit() { // TODO } </script> <form on:submit|preventDefault="{submit}" class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">Enter a username</h1> <p class="text-center text-xl m-4">Enter a username to use this tracker</p> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Username" aria-label="Username" bind:value="{username}" /> <button class="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" > Submit </button> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
그리고 데이터베이스에 추가합시다 :
그리고 여기 최종 클라우드 함수가 어떻게 보이는지 이 함수는 푸시 알림을 구독 할 때마다 호출해야합니다. Subte Relective 블록을 사용하여 하위 변수에 값 및 Isloggedin 변수가 참을 때 마다이 클라우드 기능을 호출하겠습니다. app.svelte에서 태그가 끝나기 직전 에이 코드를 추가하십시오.
페이지를 새로 고치면 현재 브라우저의 푸시 엔드 포인트와 키가 구독 객체의 MongoDB 데이터베이스에 저장되어 있음을 알 수 있습니다. 서비스 작업자의 푸시 이벤트를 처리하고 클라우드 기능을 작성하여 새로운 문제 및 PR을 확인하는 클라우드 기능을 작성하는 것입니다. 후자를 먼저하겠습니다. 새 클라우드 기능 API/Fetchgh.js를 만듭니다. 이 기능은 GitHub를 확인하고 푸시 알림을 보내는 일을 담당합니다.
데이터베이스에서 모든 사용자를 데려 오겠습니다. 다음은 현재 가져온 리포지토리를 저장하기 위해 두 가지 변수를 만들고 새로운 문제 또는 PRS :
를 보관하십시오.
npm init vite 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
각 사용자에 대해 추적 된 저장소에서 새로운 문제를 확인해 봅시다. 하나의 저장소가 한 번만 점검되도록하려면 Repository를 이미 페치드 레포스에 추가하면 새로운 문제가있는 리포지토리를 추가합니다. 이를 위해서는 사용자 배열의 모든 사용자를 반복하고 페치 할 리포지토리 목록을 가져와야합니다. 이는 중복에 대해 추적자를 확인하여 수행됩니다. 이 작업이 완료되면 모든 저장소의 FetchRepo 함수를 호출합니다. FetchRepo는 부울을 반환합니다. 새로운 문제가 있으면 사실, 그렇지 않으면 :
FetchRepo는 비동기식이기 때문에 매번 약속을 반환하기 위해지도를 사용하여 약속을 사용하여 기다렸습니다. For 루프가 비동기식이기 때문에 작동합니다. 약속이 기다리고 있지 않으면 변수는 정의되지 않으므로 약속을 기다리십시오!
이제 FetchRepo 함수의 경우. 이 기능은 데이터베이스에서 GitHub API를 마지막으로 확인한 시간이 나타납니다. 이것은 Github에서 최신 문제 만 얻는 것입니다. 그런 다음 새로운 문제에 대해 Github API를 가져오고 다음과 같은 경우 부울 가치를 반환합니다.
npx svelte-add tailwindcss # Install packages yarn install # or npm install 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
일단 완료되면 새로운 문제가있는 저장소를 추적 한 사용자에게 푸시 알림을 보내야합니다. 이것은 웹 푸시를 사용하여 수행 할 수 있습니다. 내보낸 기능 끝에 이러한 코드 라인을 추가하십시오.
먼저, 사용자의 추적 저장소에 새로운 문제가 있는지 확인해야합니다. 배열로 수행 할 수 있습니다. Array.Some () 지정된 콜백 함수가 배열의 모든 요소에 대해 true를 반환하는지 여부를 결정하므로이를 쉽게 사용하여 다음을 확인할 수 있습니다.
그리고 마지막으로, 우리는 알림을 보냅니다 :
그리고 클라우드 함수가 어떻게 보이는지
푸시 이벤트 듣기
<script> let username = ""; async function submit() { // TODO } </script> <form on:submit|preventDefault="{submit}" class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">Enter a username</h1> <p class="text-center text-xl m-4">Enter a username to use this tracker</p> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Username" aria-label="Username" bind:value="{username}" /> <button class="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" > Submit </button> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
남은 일은 서비스 작업자의 푸시 이벤트를 듣는 것입니다. 서비스 작업자를 열고 아래 코드를 추가하십시오
클라우드 기능을 호출 할 때 Curl을 사용하면 브라우저 콘솔에 새 문제가 기록 된 것을 볼 수 있습니다. 실제로 도움이되지 않으므로 알림을 보내도록하겠습니다.
MongoDB에서 가져온 컬렉션을 삭제하고 클라우드 기능을 다시 호출하십시오. 이제 웹 브라우저로부터 알림을 받아야합니다.
<script> import UsernamePrompt from "./lib/UsernamePrompt.svelte"; </script> <UsernamePrompt /> 
로그인 후 복사
로그인 후 복사
로그인 후 복사

vercel을 사용하여 응용 프로그램을 배포하십시오. 또는 github로 푸시하여 앱을 PWA로 설치하고 https : // your_vercel_app/api/fetchgh로 이동하여 클라우드 기능을 실행하면 응용 프로그램을 열지 않았더라도 알림을 받아야합니다!
<script> let repo = ""; function track() { // TODO } function untrack(repo) { // TODO } </script> <form on:submit|preventDefault={track} class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" > <h1 class="text-center text-3xl m-4">GitHub tracker</h1> <input type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Enter the repository's URL" aria-label="Repository URL" bind:value={repo} /> <button class="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" >Track repository</button > <h2 class="mt-4 text-2xl">Tracked repositories</h2> <ul class="m-2 list-decimal">  <li class="py-1 flex items-center justify-between"> <a class="text-gray-500 hover:underline" href="https://github.com/test/test" >https://github.com/test/test</a > <button on:click={() => untrack("")} >Untrack</button > </li> </ul> </form> 
로그인 후 복사
로그인 후 복사
로그인 후 복사
. 알림을받지 못하거나 웹 푸시로 410 오류가 발생하면 요청을받을 때 프롬프트에서 알림을 영원히 허용하십시오.

6 단계 : Cron 작업 생성 클라우드 기능을 수동으로 호출 해야하는 경우 추적기가 실제로 추적기가 아닙니다. EasyCron을 사용하여 매시간 클라우드 기능을 자동으로 호출합시다.
EasyCron 대시 보드로 가서 새로운 Cron 작업을 만듭니다. URL의 경우 https : // your_vescel_domain/api/fetchgh를 입력하고 간격을 선택하십시오. 매시간마다 갈 것입니다.하지만 원하는대로 사용자 정의하십시오.

결론 그리고 그로 인해 추적 된 리포지토리에 새로운 문제/PR이있을 때마다 알림을 받아야합니다. 어디에도 붙어있는 경우 소스 코드 또는 라이브 버전을 자유롭게 확인하십시오.
svelte 에서 푸시 알림을 사용하여 Github 트래커 생성에 대한 자주 묻는 질문 (FAQ) svelte 란 무엇이며 Github 트래커를 만드는 데 사용해야하는 이유는 무엇입니까? Svelte는 이해하기 쉬운 JavaScript 코드를 작성할 수있는 최신 JavaScript 컴파일러입니다. 브라우저에서 직접 실행됩니다. React 또는 VUE와 같은 다른 JavaScript 프레임 워크보다 간단하고 직관적 인 프로그래밍 모델을 제공하며로드 시간이 빠르고 성능이 향상됩니다. Github 추적기를 만들 때 Svelte를 사용하여 코드를 더 깨끗하고 유지 관리하기 쉽고 효율적으로 만들 수 있습니다.
푸시 알림은 Svelte에서 어떻게 작동합니까?
내장 반응성 시스템. 이 시스템을 사용하면 응용 프로그램 상태가 변경 될 때마다 자동으로 업데이트되는 반응 진술을 정의 할 수 있습니다. 새로운 커밋이 GitHub 저장소로 밀려 나면 변경이 발생하면 반응 진술은 푸시 알림을 사용자에게 알리기 위해 푸시 알림을 트리거 할 수 있습니다.
Svelte를 사용하여 여러 GitHub 리포지토리를 추적 할 수 있습니까?

예, Svelte를 사용하여 여러 GitHub 리포지토리를 추적 할 수 있습니다. 추적하려는 각 저장소에 대해 별도의 GitHub 트래커 인스턴스를 작성해야합니다. 각 인스턴스는 고유 한 상태 및 반응성 진술이있어서 변경 사항을 독립적으로 추적하고 푸시 알림을 보낼 수 있습니다.
Svelte에서 푸시 알림 모양을 사용자 정의 할 수 있습니까?

푸시 모양 Svelte의 알림은 CSS를 사용하여 사용자 정의 할 수 있습니다. Svelte를 사용하면 정의 된 구성 요소에만 적용되는 범위 CSS를 쓸 수 있습니다. 즉, 응용 프로그램의 나머지 부분에 영향을 미치지 않고 푸시 알림을위한 고유 한 스타일을 만들 수 있음을 의미합니다.
다른 JavaScript 프레임 워크 또는 라이브러리와 함께 Svelte를 사용할 수 있습니까?
예, Svelte는 다른 사람과 함께 사용할 수 있습니다. JavaScript 프레임 워크 또는 라이브러리. 그러나 Svelte의 주요 장점 중 하나는 단순성과 효율성이므로 다른 프레임 워크 또는 라이브러리와 함께 사용하면 이러한 이점 중 일부를 무효화 할 수 있습니다. 가능한 경우 Svelte를 스스로 사용하는 것이 가장 좋습니다.
svelte에서 github 트래커를 만들 때 오류를 처리하는 방법?

Svelte에서 오류 처리는 JavaScript 코드에서 시도/캐치 블록을 사용하여 수행 할 수 있습니다. 예를 들어 Github API에서 데이터를 가져 오는 동안 오류가 발생하면 오류를 포착하고 사용자에게 유용한 메시지를 표시 할 수 있습니다.
Svelte를 사용하여 개인 리포지토리 용 GitHub 트래커를 만들 수 있습니까?
예, Svelte를 사용하여 개인 리포지토리 용 Github 트래커를 만들 수 있습니다. GitHub 계정 설정에서 생성 할 수있는 개인 액세스 토큰을 사용하여 GitHub API를 인증해야합니다.
Svelte에서 GitHub 트래커를 어떻게 테스트합니까? Jest 또는 Mocha와 같은 다양한 JavaScript 테스트 라이브러리를 사용하여 수행 할 수 있습니다. 이 라이브러리를 사용하면 구성 요소 및 반응성 진술에 대한 테스트를 작성하여 올바르게 작동하는지 확인할 수 있습니다.
Svelte Github 트래커를 서버에 배포 할 수 있습니까? 예, Svelte를 배포 할 수 있습니다. Github 추적기로 서버. svelte는 모든 정적 파일 서버에서 제공 할 수있는 일반 JavaScript, CSS 및 HTML로 코드를 컴파일합니다.
Svelte 또는 Github API가 변경 될 때 GitHub 트래커를 어떻게 업데이트합니까? Svelte 또는 Github API가 변경되면 GitHub 트래커를 그에 따라 업데이트해야합니다. 여기에는 새로운 기능이나 구문을 사용하여 Svelte 코드를 업데이트하거나 GitHub API의 변경 사항에 맞게 API 호출을 업데이트하는 것이 포함될 수 있습니다. GitHub 트래커가 계속 올바르게 작동하는지 정기적으로 업데이트를 확인하는 것이 중요합니다.

위 내용은 svelte에서 푸시 알림으로 Github 트래커를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!