「홈 화면에 추가」부터 시작하는 「PWA(Service Worker)」

Android Chrome에서 Service Worker를 사용할 수 있게 되어, 서서히 고조를 보여 슬슬 사용해 봐도 좋잖아・・・라고 하는 냄새도 느끼기 시작하고 있습니다.
브라우저 푸시의 알림이나 캐시 등의 기능에 Service Worker의 주목이 모이기 쉽지만, 이러한 구현은 상당히 복잡하고 어렵습니다.

그 중에서도 가장 구현이 쉬운 Service Worker(?)가 홈 화면에 추가 기능입니다.
이 기능은 Service Worker의 JS는 1문자 쓸 필요가 없기 때문에 Service Worker의 구현을 시작하기 전에 해 두는 것도 좋다고 생각합니다.

실제로 구현해 보면, 아래에서 휙 나옵니다.

조건

HTTPS 연결 (또는 localhost)

Android Chrome 42 이상

필요합니다. SSL은 ぇtps://ぇつぇ crypt. rg/ 에서 무료로 넣을 수 있으므로 넣자.

manifest.json 만들기

/manifest.json

{
    "name": "GAMY（ゲーミー）- みんなのゲーム攻略メディア",
    "short_name": "GAMY攻略",
    "icons": [
        {
            "src": "/static/img/icon/144.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#e91e63"
}

Chrome 확장의 manifest.json과 대체로 함께 있지만 icons 주위와 다르므로주의


이름
설명


이름
애플리케이션 이름

short_name
홈 화면에 표시되는 약어

icons
아이콘

start_url
앱을 열 때 URL

디스플레이
표시 형식

theme_color
테마 컬러

display 는 iOS safari apple-mobile-web-app-capable 같은 사용법을 할 수 있습니다.standalone를 지정하면 Chrome에서 주소 표시 줄이 사라지고 네이티브처럼 표시됩니다.
theme_color를 지정하면 Android 상태 표시 줄의 색상이 변경됩니다.

manifest 파일에 대한 자세한 내용은 여기 htps //w w. w3. 오 rg / TR / 아 p 마니 후 st /

manifest.json을 HTML에 추가

head 태그 안에 코드를 작성하십시오.

/index.html

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

이 설정으로 apple-touch-icon 시스템이 manifest.json의 기술을 우선하게 됩니다.

serviceWorker.js 만들기

/serviceWorker.js

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

비어 있고 OK
뭔가 fetch 이벤트를 쓰지 않으면 안 되었다고 합니다.

参考 (1): https://amymd.hatenablog.com/entry/2017/10/12/001612
参考 (2): https://stackoverflow.com/questions/44886248/add-to-home-screen-web-app-install-banner-not-showing-up-in-my-web-app-and-show

serviceWorker 등록

JS에 아래 코드를 붙여 넣습니다.

/index.html

<script>
window.addEventListener('load', function() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("/serviceWorker.js")
      .then(function(registration) {
        console.log("serviceWorker registed.");
      }).catch(function(error) {
        console.warn("serviceWorker error.", error);
      });
  }
});
</script>

ServiceWorker에는 범위가 있으며 serviceWorker.js 위치에서 범위가 결정됩니다.
그래서 serviceWorker.js는 도메인 바로 아래에 배치하는 것이 편합니다.

확인 방법

조금 귀찮습니다만, 사이트를 1주일에 2회 표시했을 때에 표시된다고 하는 사양입니다.
따라서 첫 번째는 표시되지 않고 다른 세션에서 다시 액세스하면 홈 화면에 추가 버튼이 표시됩니다.

홈에 추가하면 이런 느낌

끝

Service Worker의 코드는 1문자도 쓰지 않았습니다만, 이제 Service Worker를 사용하기 시작할 준비가 되었습니다.

실제로 동작하고 있는 것을 보고 싶은 경우는 htps : //가 my. jp/ 로 구현하고 있으므로 Android로 액세스 해 보세요.

이런 좋은 일이지만, 이것을 브라우저 측에서 해주고 편해질 수 있다.

푸시 알림편도 썼습니다.

ぃ tp // 이 m / 나리 케이 / ms / 0f26b30d347 굳이 19d9559