소개

저는 GitHub Pages에서 약간의 자기 소개 페이지를 운용하고 있습니다.

이 페이지는 Nuxt.js 으로 작성했지만, 이번은 이 페이지를 PWA(Progressive Web Apps) 화해 보겠습니다. Nuxt.js를 사용하면 PWA를 매우 쉽게 만들 수 있습니다

방법

nuxt-community/pwa-module README.md 참조하십시오.

먼저 @nuxtjs/pwa를 설치합니다.

$ yarn add @nuxtjs/pwa

그런 다음 nuxt.config.js에 modules 및 manifest를 추가합니다.

nuxt.config.js

// 略

module.exports = {
  // 略
  modules: [
    '@nuxtjs/pwa'
  ],
  manifest: {
    name: "QUANON's Page",
    lang: 'ja'
  }
};

.gitignore에 다음 줄을 추가합니다.

sw.*

마지막으로 아이콘 이미지를 static/icon.png에 배치합니다. 이미지 크기는 512x512px 이상을 권장합니다.

확인

이제 배포되어 PWA로 설정되었는지 확인합니다.

# 静的ファイルを生成する。
$ yarn run generate

# GitHub Pages にデプロイする。
$ yarn run deploy

배포가 끝나면 Android 기기의 Google 크롬에서 PWA화된h tps://쿠아논. 기주 b. 이오/으로 이동합니다. Android 버전은 7.0입니다.

메뉴를 열고 '홈 화면에 추가'를 탭합니다.



대화 상자가 표시되므로 '추가'를 탭합니다.



기기의 애플리케이션 목록에 추가되었습니다.



앱을 열면 이런 느낌입니다. Google 크롬과는 별도의 앱으로 시작합니다. 주소 표시줄도 표시되지 않습니다.



비행기 모드에서도 볼 수 있습니다(캐시가 표시됨).



비 PWA의 경우에도 홈 화면에 추가 할 수 있습니다. 그러나 애플리케이션 목록에는 추가되지 않으며 어디까지나 홈 화면에서 Google 크롬으로 바로가기로만 작동합니다.

마지막으로

Nuxt.js 유용