동적으로 PWA 앱 매니페스트 만들기

반응형

모든 Progressive Web App에는 앱 매니페스트, 앱의 기본 정보(이름, 아이콘, 설명 등)가 포함된 간단한 JSON 파일이 있습니다.

기존 웹 앱에 PWA 기능만 추가하려는 경우, Progressier에는 동적 앱 아이콘 옵션을 포함하여 필요한 모든 것이 있습니다. 그러나 만약 당신이 당신의 웹 앱 매니페스트를 동적으로 만들고 싶다면, 계속 읽어보세요.

전통적인 방식

당신의 첫 번째 PWA를 만들 때, 가장 간단한 방법은 당신의 HTML 템플릿의섹션에 직접 당신의 앱 매니페스트에 링크를 추가하는 것이다.

 

호스트 매니페스트.json은 당신의 사이트 어디에나 있습니다. 결과 JSON 파일은 다음과 같아야 합니다.

  { 
    "short_name":"Coronavirus", 
    "name":"The Coronavirus App", 
    "background_color":"#ffffff", 
    "theme_color":"#ffffff", 
    "display":"standalone", 
    "orientation":"any", 
    "start_url":"https://coronavirus.app",       
    "scope":"https://coronavirus.app", 
    "icons":[    
      {"src":"/icon512.png","sizes":"512x512","type":"image/png"},
      {"src":"/icon192.png","sizes":"192x192","type":"image/png"},      
      {src":"/icon196.png","sizes":"196x196","type":"image/png"} 
    ] 
  }

왜 다르게 하고 싶은지

위의 방법이 웹 앱 매니페스트를 처리하는 데 완벽하게 유효한 방법이지만 정적 파일이 작동하지 않고 대신 동적으로 생성하는 합법적인 경우가 있습니다.

• 데스크톱과 모바일에는 완전히 다른 아이콘이 필요합니다.
• 동일한 도메인에 여러 개의 개별 PWA를 호스팅하려는 경우
• 로그인한 사용자마다 PWA가 다르게 표시되어야 합니다.그리고 아마도 더 많은 타당한 예들이 있을 것이다. 앱 매니페스트를 동적으로 생성하려면 사용자가 요청할 때 서버에 매니페스트를 빌드하는 두 가지 옵션이 있습니다. 또는 브라우저에서 바로 자동으로 생성할 수 있습니다(기본 설정 방식).당신의 사이트에서 정적 파일로 파일을 호스팅하는 대신 /manifest.json의 경로를 API로 만들어 당신이 필요로 하는 것에 기반하여 프로그래밍 방식으로 JSON 파일의 내용을 생성할 수 있게 한다. 다음은 Node/Express를 사용한 예입니다.

  클라이언트 측 동적 앱 매니페스트 생성

   
  대부분의 사용자는 /manifest.json이 실제 파일일 필요가 없다는 것을 알지 못합니다. 사실, 데이터 URL로도 잘 작동합니다.서버에서 추가 파일을 다운로드할 필요가 없으므로 로드 시간이 빨라지고 서버 비용이 절감됩니다. 또한 웹 앱 매니페스트의 콘텐츠를 수정할 때마다 데이터 URL이 달라지기 때문에 브라우저가 그에 따라 콘텐츠를 업데이트하지 않을 염려가 없습니다.

  //for brevity, we're not including the isDesktop function here 
  let iconUrl = isDesktop() ? '/desktop.png' : '/mobile.png'; 
  let manifest = { 
  name: "App name", 
  icons: [{ src: iconUrl, sizes: "512x512", type:"image/png" }] 
  }; 
  let content = encodeURIComponent(JSON.stringify(manifest)); 
  let url = "data:application/manifest+json,"+content; 
  let element = document.createElement('link'); 
  element.setAttribute('rel', 'manifest'); 
  element.setAttribute('href', url); 
  document.querySelector('head').appendChild(element);

   
  Progressier에서 우리는 안드로이드 홈 화면, 안드로이드 스플래시 화면, 아이폰 스플래시 화면, 윈도우/맥에 설치된 PWA에 완전히 다른 로고가 필요한 사용자들의 복잡한 사용 사례를 발견했고, 그에 따라 대시보드를 설계했습니다.질문이나 피드백? 밑에 댓글 달아주세요.
• 2021년 12월 28일 https://dev.to에서 처음 출판되었습니다.
• 이면에서는 이러한 사용자 설정을 사용하여 위의 방법으로 앱 매니페스트를 동적으로 생성합니다.
• 클라이언트측 코드에서 만드는 방법은 다음과 같습니다.
• 특정 자산을 동적으로 생성할 필요가 없더라도 데이터 URL이 이 작업을 수행하는 데 더 낫다고 주장합니다.
• app.get('/manifest.json', async function(req, res){ //for brevity, we're not including the isDesktop function here let iconUrl = isDesktop() ? '/desktop.png' : '/mobile.png'; let manifest = { name: "App name", icons: [{ src: iconUrl, sizes: "512x512", type:"image/png" }] } res.header('content-type', 'application/json'); return res.status(200).send(JSON.stringify(manifest)); });
• 서버 측 동적 앱 매니페스트 생성
•