과거의 유산을 PWA 대응 한 것은 없음
과거에 만든 빌어 먹을 앱을 PWA 대응으로 만들기
아직도 사쿠라 인터넷의 렌탈 서버에서는 Python3계 움직이지 않습니다. 하지만, 뭐 과거에 만든 빌어 먹을 어플리케이션을 어떻게든 하고 싶다. 우선 PWA 대응의 연습에 사용하면 좋지 않을까 생각하고 시작했습니다.
준비
필요한 파일 세트 정보
· index.html 엔드 포인트
· manifest.json 매니페스트가 작성된 파일
· service-worker.js 다양한 처리를 작성하는 사람
· icon.png 아이콘
서버 디렉토리 스쿠쇼
기본적으로 이미 다른 사람들이 설명했기 때문에,
세세한 설명은 모두 생략합니다.
manifest.json
{
"short_name": "QRさん",
"name": "QRコードクリエイトアプリ",
"display": "standalone",
"start_url": "index.html",
"background_color": "#333",
"theme_color": "#fff",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
"sizes": "192x192"가 존재하지 않으면 배너가 추가되지 않는다고 합니다.
service-worker.js
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});
self.addEventListener('fetch', function(event) {});
여기까지 할 수 있으면 나머지는 index.html에 이하를 추가할 뿐.
head 안에 이런 식으로 추가.
index.html
<head>
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="QRさん">
<link rel="apple-touch-icon" href="icon.png">
</head>
Service-worker는 다음과 같이 작성합니다.
index.html
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
덧붙여서 SSL화되어 있지 않은 경우는 사용할 수 없습니다.
PWA 대응 성공 후
이런 식으로 홈에 추가하게 됩니다.
홈에 추가하면 앱 같은 거동이 되는 것은 재미있군요.
PWA 대응 진행해 이것 정말로 홈에 추가할 수 있을까?
라는 불안은 Chrome의 도구로 확인 가능합니다.
이를 바탕으로 Wordpress 사이트와 블로그도 한쪽 끝에서 PWA 대응해 보았습니다.
Reference
이 문제에 관하여(과거의 유산을 PWA 대응 한 것은 없음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Gen6/items/25601c7a9da8bf958f26
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
필요한 파일 세트 정보
· index.html 엔드 포인트
· manifest.json 매니페스트가 작성된 파일
· service-worker.js 다양한 처리를 작성하는 사람
· icon.png 아이콘
서버 디렉토리 스쿠쇼
기본적으로 이미 다른 사람들이 설명했기 때문에,
세세한 설명은 모두 생략합니다.
manifest.json
{
"short_name": "QRさん",
"name": "QRコードクリエイトアプリ",
"display": "standalone",
"start_url": "index.html",
"background_color": "#333",
"theme_color": "#fff",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
"sizes": "192x192"가 존재하지 않으면 배너가 추가되지 않는다고 합니다.
service-worker.js
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});
self.addEventListener('fetch', function(event) {});
여기까지 할 수 있으면 나머지는 index.html에 이하를 추가할 뿐.
head 안에 이런 식으로 추가.
index.html
<head>
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="QRさん">
<link rel="apple-touch-icon" href="icon.png">
</head>
Service-worker는 다음과 같이 작성합니다.
index.html
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
덧붙여서 SSL화되어 있지 않은 경우는 사용할 수 없습니다.
PWA 대응 성공 후
이런 식으로 홈에 추가하게 됩니다.
홈에 추가하면 앱 같은 거동이 되는 것은 재미있군요.
PWA 대응 진행해 이것 정말로 홈에 추가할 수 있을까?
라는 불안은 Chrome의 도구로 확인 가능합니다.
이를 바탕으로 Wordpress 사이트와 블로그도 한쪽 끝에서 PWA 대응해 보았습니다.
Reference
이 문제에 관하여(과거의 유산을 PWA 대응 한 것은 없음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Gen6/items/25601c7a9da8bf958f26
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(과거의 유산을 PWA 대응 한 것은 없음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Gen6/items/25601c7a9da8bf958f26텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
