PWA #1 시행착오 😢

modric·2024년 9월 26일

문제점

PWA 튜토리얼대로 하고 빌드 다 했는데 설치 아이콘이 안뜨네요.

해결방법

개발자모드에서 에러 보는 법 찾아서 하나씩 해결한다.

property 'start_url' ignored error, should be same origin as document.

참고

Before "start_url": "https://pjt-booth.vercel.app/",
Now "start_url": "/"

manifest.json:1 GET http://localhost:3000/manifest.json 500 (Internal Server Error)Understand this error manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Richer PWA UI won’t be available to install on desktop. Please add at least one screenshot with the form_factor set to wide

참고

https://developer.chrome.com/blog/richer-install-ui-desktop?hl=ko

사용자는 일반적으로 앱 스토어를 통해, 또는 패키지를 다운로드하고 설치를 통해 앱, 특히 플랫폼 앱을 다운로드하게 됩니다. 오늘날 데스크톱 환경조차도 중앙 집중식 스토어에서 앱을 제공하는 방향으로 전환하고 있습니다.
웹 앱의 경우 모델이 다릅니다. 사용자가 웹 앱을 다운로드하기 위해 중앙 집중식 App Depot를 방문할 필요가 없습니다. 모든 웹 환경을 설치할 수 있는 것은 아닙니다. 사용자가 설치 옵션을 클릭하면 아래와 같이 기본 대화상자에 추가 정보가 포함되지 않습니다.

저 스크린샷이 없다보다.

더욱 풍부한 설치 UI 사용 설정
더 풍부한 설치 UI 대화상자를 표시하려면 개발자는 screenshots 배열에 상응하는 폼 팩터의 스크린샷을 하나 이상 추가해야 합니다. description 필드는 필수는 아니지만 사용하는 것이 좋습니다.

Manifest 다 고쳤는데

but 안됨..!!
다 고쳤는데 안되길래 안전하게 app/layout.ts 했더니 돌아간다.

there guys, been struggling with same issue just to find that my html link tag was missing, make sure you are indicating where is your manifest file located on your website header:

참고
https://stackoverflow.com/questions/46726966/progressive-web-app-service-worker-not-serving-start-url

해결방법

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang='en' suppressHydrationWarning>
      <head>
        <link rel='manifest' href='/manifest.json'></link>
      </head>
     생략