1
그래서 초기보기 (속도 + SEO 이유로)에서 서버 측 렌더링을 활용하는 React 기반 모바일 웹 앱이 있다고 가정 해 보겠습니다. "index.html"파일이 없습니다. 인덱스 파일은 동적으로 서버 측에 구축되어 초기 응답으로 반환됩니다.서버 측 렌더링을 사용하는 React PWA에 앱 셸 캐싱
이제 해당 앱에 PWA 기능을 추가하려고한다고 가정 해 보겠습니다. 자산을 캐시하는 서비스 작업자를 연결합니다.
PWA의 핵심 테넌트 중 하나는 오프라인 환경을 제공한다는 것입니다. 서비스 작업자가 사용자가 오프라인 상태임을 감지하면 "새로 고침하려면 여기를 클릭하십시오."라는 새로 고침 페이지를 표시하려고한다고 가정 해보십시오.
처음 방문했을 때 서비스 담당자가 캐싱 할 수있는 정적 HTML 파일 인 App Shell을 사용하여 Google에서 제공하는 온라인 예제이며 내부에 반응하는 응용 프로그램의 "쉘"역할을합니다. 이 셸은 "오프라인"보기를 보여줍니다.
"쉘"html 파일이없고 서버 측 렌더링에서 어떻게 작동합니까? 각 경로는 잠재적으로 다른 index.html 파일을 반환 할 수 있습니까?
야생에서이 기능의 데모 또는 예는 무엇입니까?
안녕하세요 Jeff! 답장을 보내 주셔서 감사합니다. 나는 많은 코드를 읽었으며 여러분의 의견과 피드백을 얻으 셨습니다! :) 제 시나리오에서, 우리는 우리의 쉘이 될 것입니다 - 기본적으로 서버 측을 실행하고 초기 페이지 마크 업의 큰 템플리트 문자열을 리턴하는 함수 인 다소 PageTemplate.js를가집니다. 그것은 내가'dynamicUrlToDependencies'에 전달하고자하는 것입니까? PWA가 너무 바보 같은 질문이라면 사과하겠습니다. 귀하의 예제에서 그것은'/ shell' 경로에 대해서만 특별히 캐시 할 것 같습니까? – Prefix
맞아요.'/ shell'의 내용이'PageTemplate.js' 내용에 의해 유일하게 결정된다면, 그것은'dynamicUrlToDependencies'에리스트 할 내용입니다. 'PageTemplate.js'가 (.hbs와 같이) 다른 외부 리소스를 적재한다면, 역시 그것을 나열 할 것입니다. 설정의 다른 부분은'navigateFallback : '/ shell'을 사용하여 캐시 된'/ shell'에서 모든 탐색 결과 (실제 URL에 관계없이)가 수행되도록하는 것입니다. –
안녕하세요 Jeff - "다른 외부 리소스를로드하는 경우"에 대해 자세히 설명해 주시겠습니까? 컴파일 컴파일 중로드를 의미합니까, 아니면 문자 그대로 브라우저에서 비동기 적으로로드됩니까? 내 (react/redux/react-router) 앱에서 데이터는 서버의 API에서 가져오고, redux 저장소를 생성하고, PageTemplate의 내용을 사용자에게 제공하기 전에 해당 저장소로 전달되는 다양한 작업을 수행합니다. 해당 경로의 초기 렌더링을위한 마크 업입니다. 아마도 앱 셸을위한 경로를 특별히 추가하고 해당 경로의 리소스를 미리 캐시하도록 SW에 지시하겠습니까? – Prefix