요 전날 만든 AMP 페이지 을 PWA (Progressive Web Apps)에도 대응시키고 싶습니다.

1. PWA란?

PWA는 특정 기술을 가리키는 것이 아니라, 보다 나은 사용자 경험을 실현하기 위한 모범 사례집과 같은 것으로 알려져 있습니다.

처음 프로그레시브 웹 앱

"새로워, Progressive Web Apps라고 합니다"── Web UX의 새로운 기준을 생각한다

그렇다면 어떤 경험을 실현할 수 있습니까?
구현할 수 있는 주요 기능은 이쪽.

오프라인 지원

홈 화면에 아이콘 추가

푸시 알림

자동 로그인

아무도 사용법에 따라 메리데메가 있습니다만, 우선은 상기 중에서 홈 화면에의 아이콘 추가(Add to Homescreen, A2HS)를, AMP의 페이지에 실장해 보려고 생각합니다.

2. ServiceWorker 설치

ServiceWorker를 설치하려면 두 개의 소스 코드 작성이 필요합니다.
※ 양쪽 모두 AMP 페이지용의 기술을 위해 주의해 주십시오

index.html※head 태그 내

<script async custom-element="amp-install-serviceworker" 
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js">
</script>

index.html※body 태그내

<amp-install-serviceworker
  src="/serviceworker.js"
  layout="nodisplay">
</amp-install-serviceworker>

위에서 읽을 수있는 sevicewoker.js의 설명입니다.

sevicewoker.js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.3.1/workbox-sw.js');

self.addEventListener('fetch', function(event) {});

3. manifest.json 만들기

버튼 설치용 설정 파일을 만듭니다.

ServiceWorker의 각종 설정 파일을 작성하려면 Workbox 을 이용하는 것이 편리하다고 들었습니다만, manifest.json의 설정만이라면, 이하를 추천합니다.

Web App Manifest Generator



필요한 항목을 입력한 후 홈 버튼용 이미지를 업로드하고 [GENERATE ZIP] 버튼을 누르면 json 파일과 크기 확장된 아이콘 이미지가 자동으로 생성됩니다.

※manifest.json의 내용은 이런 느낌입니다

manifest.json

{
  "name": "ホームボタンの名前",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "https://ホーム画面から遷移するURL",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

4. manifest.json 로드

위에서 만든 json 파일을 HTML에서 읽습니다.

index.html※head 태그 내

<link rel="manifest" href="/manifest.json">

5. 동작 테스트

이제 Chrome의 DevTools를 사용하여 동작을 확인합니다.

DevTools의 Application을 열면 App Manifest 내에 manifest.json에서 설정한 항목이 표시됩니다. [Add to homescreen]이 작성된 링크를 클릭해 봅시다.



주소 표시줄 아래에 "이 사이트를 선반에 추가하면 항상 사용할 수 있습니다."라는 표시가 나오면 설정은 성공입니다!



Android 기기를 가지고 계신 분은 꼭 실제 기기로 사용해 보세요.

이상으로, AMP 페이지에 있어서의 PWA 대응의 제1 단계(홈 화면에의 아이콘 추가)는 완료입니다.
오늘은 여기까지.