codelabs의 "처음 프로그레시브 웹 앱"을하면 마지막 끝에 걸린 이야기

경위

1개월 전까지 PWA란? 무엇 그 키워드 처음! 상태였기 때문에 조사해 보면 아무래도 최근의 핫워드인 것 같다. 어제 PWA 공부회로부터의, 오늘은 PWA 모쿠모쿠에 참가해 왔고, 그 모쿠모쿠 모임에서 튜토리얼을 왔습니다.

PWA는?

이제 들리지 않는 PWA와 AMP
web이지만 앱 같은. 오프라인에서도 캐시로 움직이고 푸시 알림도 할 수 있다. 물론 앱처럼 홈 화면에 아이콘도 만들어진다. 그런 것으로, google도 추리고 있는 것 같다···! !

Web 디렉터가 모르면 마즈! Google의 주목 프로젝트 PWA는 무엇입니까?

튜토리얼

처음 프로그레시브 웹 앱
살짝 보면 곧 이해할 수 없었기 때문에, 좀 더 간단한 분 발견했습니다.

처음 프로그레시브 웹 앱(codelabs)
이쪽은 index 파일과 조금만의 js로, 정말로 그대로 하고 있으면 체험할 수 있습니다.

Step

1. 소개
2. 설정
3.App Shell 구축
4.App Shell 구현
5. 첫번째 로딩을 고속으로 할 수 있도록 한다
6. Service Worker를 사용하여 App Shell을 미리 캐시합니다.
7. Service Worker를 사용하여 예보 데이터 캐시
8. 네이티브 환경에 대한 통합 지원
9. 보안 호스트에 배포
※푸시 통지는 없습니다.

막힌 곳

코딩 자체는 튜토리얼을 따라 있으면 아무것도 막히지 않아야합니다. 그럼 어디서 막혔다고 하면, firebase에의 배포입니다. 애초에, firebase에 배포라든지 할 수 있었던 것은 곳입니다만.

계정을 만들고 로그인하면 드디어 배포합니다.

htps : // 푹 빠져라. 오, ぇ. 코 m/안녕하세요/ 에서 새 앱을 만듭니다.

Firebase 도구에 최근에 로그인하지 않은 경우 다음 명령으로 로그인하여 자격 증명을 업데이트합니다.

다음 명령을 사용하여 앱을 초기화하고 완성된 앱이 있는 디렉토리(예: work)를 지정합니다. firebase init

마지막으로 다음 명령을 사용하여 앱을 Firebase에 배포합니다. firebase deploy

이것으로 완료되었습니다. 다음 도메인에 앱을 배포할 수 있었습니다. h tps : // / R- 푹 빠지면 아- p. 푹 푹 빠져서 p. 이 m

라고 있습니다만, 3으로 firebase init가 무사히 완료해도, 4로 firebase deploy가 통과하지 않았습니다.

Error: Cannot understand what targets to deploy. Check that you specified valid targets if you used the --only or --except flag. Otherwise, check your firebase.json to ensure that your project is initialized for the desired features.

firebase.json이 이상합니다. 보면 하늘이었습니다. 거기까지 해주지 않았다! 그것을 이런 느낌에 추가했습니다.

package.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

그리고 다시 firebase deploy !!

Error: Specified public directory does not exist, can't deploy hosting

네, public 폴더에 넣는군요. 그리고, 이런 계층 구조가 되었습니다.

project의 루트에 public 폴더를 만들어 firebase의 설정 파일 이외를 안에 넣었습니다.

그리고 마침내!

i  deploying hosting
i  hosting: preparing public directory for upload...
✔  hosting: 26 files uploaded successfully

왔다!

배포한 URL에 액세스하여 홈에 추가합니다.


그리고 시작. 시작 화면이다!


오프라인에서도 볼 수 있습니다!


최종적으로는 이런 느낌으로 스마트폰에 아이콘으로 표시되고, 한번 기동한 후라면 기내 모드라도 표시됩니다. 대단해・・・!

반성과 앞으로

튜토리얼을 그대로 했으므로 일단 큰 문제없이 완성입니다. 그냥 튜토리얼을 따라하고 있었기 때문에 아직 이해가 따라 잡지 않았습니다. 앞으로 올 것이다 기술, 이제 와 있는 기술과 같이, 캐치 업 해 갑니다.

참고

처음 프로그레시브 웹 앱(codelabs)
FireBase Hosting 시작하기
Firebase Hosting에서 웹페이지 배포