ghost 테마에 PWA 지원 추가

27347 단어 progressivewebappghostjs

PWA란 무엇입니까?


점진적 웹 응용 프로그램은 기존 점진적 향상 정책과 함께 새로운 웹 브라우저 API 및 기능을 사용하는 웹 응용 프로그램으로 플랫폼 간 웹 응용 프로그램에 네이티브 응용 프로그램과 유사한 사용자 환경을 제공합니다.위키백과
이전과 같이 이 정의는 이 특징을 설명할 때 아무런 작용도 하지 않는다.너는 그것을 배워야만 그것을 이해할 수 있다.
간단하게 말하면 PWA는 당신의 사이트를 응용 프로그램처럼 표현하는 기술입니다.이를 실현하기 위해서는 브라우저와 기본 운영체제가 제공하는 기능을 결합해야 합니다.
상세한 소개는 mozilla 참조.

입문


Ghost CMS는 블로그 전용입니다.자세한 내용 here
바퀴를 재발명하고 싶지 않기 때문에, 나는 단지 아래 게시물의 코드를 복사했을 뿐, 나는 이 사이트에 PWA 지원을 추가하는 것을 언급했다.자세한 내용은 를 참조하십시오.
BironThemes
우선, 우리는 ghost 설치에 서비스 인원의 오프라인 지원을 추가할 것이다.
wordpress와 달리 Ghost는 검색 엔진 최적화와 nodejs 기반의 빠른 템플릿 엔진을 결합시킨다.그러나 PWA 지원은 켜져 있지 않습니다.아마도 장래에 그것은 올 것이다.하지만 지금 너는 반드시 수동으로 조작해야 한다.
당신의 고스트 블로그를 PWA로 바꾸려면 네 가지 일을 해야 합니다
  • 완료되지 않은 경우
    • 웹 사이트를 https:// 로 변환하십시오.
  • 응용 프로그램의 다양한 속성을 설명하는 manifest 파일 추가
  • 캐시를 처리하는 사이트에 서비스 종사자 추가
  • 즐기기

    • 목록 파일 추가


    테마의 루트 디렉터리에 새 파일을 만듭니다.너는 어떤 이름도 말할 수 있다.대부분의 옵션은 말하지 않아도 알 수 있다.중요한 것은 이름과 아이콘입니다.응용 프로그램이 열리면 이 색은 배경 플래시로 사용됩니다.
    디스플레이 속성 처리 프로그램의 표현 방식입니다.여기에는 fullscreen, standalone, minimal-ui 및 browser 네 가지 옵션이 있습니다.
    {
    "name":"Cybercafe.dev",
    "short_name":"Cybercafe",
    "description":"A blog by z00md",
    "lang":"en",
    "start_url":"/",
    "background_color":"#ffffff",
    "display":"fullscreen",
    "theme_color":"#313b3f",
    "icons":[
       {
        "src": "/assets/icons/z00md_logo.png",
        "type": "image/png",
        "sizes": "200x200"
      }
    ]
}
    속성에 대한 자세한 내용은 를 참조하십시오here

    서비스 종사자 추가


    명세서는 응용 프로그램의 기본 설정만 제공합니다.행위에 대한 완전한 통제를 얻기 위해서는 네트워크가 없는 상황에서 무엇을 해야 하는지를 확인하는 데 수동으로 서비스 종사자를 추가해야 합니다.
    사이트installable를 응용 프로그램으로 만들려면 fetch 프로세서를 갖춘 서비스 직원이 필요합니다.
    자세한 내용은 액세스web.dev
    const PRECACHE = 'precache';
const RUNTIME = 'runtime';

// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
  '/',
  '/offline/'
];

const OFFLINE_URL = [
  '/offline/'
]

// The install handler takes care of pre caching the resources we always need.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(PRECACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(self.skipWaiting())
  );
});

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
  // Skip cross-origin requests, like those for Google Analytics.
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(RUNTIME).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          }).catch(error => {
            // Check if the user is offline first and is trying to navigate to a web page
            return caches.match(OFFLINE_URL);
          });;
        });
      })
    );
  }
});

    기본값을 업데이트합니다.하버드 비즈니스 스쿨


    현재 우리 수중에 sw.js과manifest.webmanifest가 있습니다. 브라우저가 어디에서 그것을 찾을 수 있는지 알려야 합니다.다른 자원 (예: css 과 마찬가지로, 명세서 파일에href가 있는 link 표시를 만들어야 합니다.주의해라, 나는 아래에 <head> 부분만 표시되어 있다.당신의 default.hbs에도 다른 코드가 많을 것입니다.
    <head>

    {{!-- Document Settings --}}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {{!-- Base Meta --}}
    <title>{{meta_title}}</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />

    {{!-- This tag outputs SEO meta+structured data and other important settings --}}
    {{ghost_head}}

    {{!-- PWA --}}
    <link rel="manifest" href="/manifest.webmanifest">
    <meta name="theme-color" content="#313b3f">
    <link rel="apple-touch-icon" href="/assets/icons/z00md_logo.png">

</head>
    우리는 브라우저에 우리의 서비스 인원을 등록하고 그것을 실행하도록 알려야 한다.이를 위해, 우리는 브라우저의 navigatorapi를 사용할 수 있다.
    바디 탭의 끝으로 넘어가서 다음 스크립트를 추가하면 됩니다.navigator는 장치, 지리적 위치, 캐시, 저장 등에 대한 대량의 정보를 제공하는 브라우저api입니다. 저희는 serviceWorker 대상을 사용하여 sw.js 파일을 등록할 것입니다.
        {{!-- Service Worker for PWA --}}
    <script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js');
        });
    }
    </script>

    오프라인 페이지 만들기


    응용 프로그램이 사이트에 연결할 수 없을 때 이 페이지가 표시될 페이지를 만들어야 합니다.이를 위해, ghost admin 아래에 새 페이지를 만들 수 있습니다.필요에 따라 페이지를 편집할 수 있지만, 서비스 워커에서 제공하는 URL과 같은 URL만 유지하면 됩니다.
    const OFFLINE_URL = [
  '/offline/'
]

    빨리 뛰어!


    이제 모든 것이 준비되었다.응용 프로그램을 구축하고 실행할 때가 되었다.구축 주제와 사용된 구축 도구에 따라 설정이 필요할 수 있습니다 package.json.나에게 있어서, 그것은 기본적으로 일을 한다.
    실행 중인 로컬 ghost dev 환경이 있고 로컬 dev 테마를 사용하도록 설정되어 있으면 아래 명령만 실행하고 브라우저 캐시를 새로 고칠 수 있습니다.
    yarn dev
    테마를 항상 구축한 다음 구축된 버전을 로컬ghost 실례나 생산 실례에 업로드할 수 있습니다.
    yarn zip
    만약 모든 것이 정상이라면, 휴대전화 브라우저에서 당신의 사이트를 열 때, 당신은 새로운 동작을 볼 수 있을 것이다 - Add to home screen.장치에 기본 응용 프로그램 형식으로 사이트를 설치할 수 있습니다.다른 페이지를 열면 캐시되기 시작합니다.데이터/wifi를 닫고 프로그램을 불러옵니다.방문한 페이지를 탐색할 수 있어야 합니다.나머지 URL은 ghost admin에서 만든 오프라인 페이지를 보십시오.

    주의사항-나의 관찰결과: 틀렸을 수도 있다


    로컬 호스트는 http


    서비스 직원은 https:// 개 현장에서만 근무할 수 있다.예외는 하나뿐이다localhost.모든 컨텐츠가 로컬에서 작동하는지 테스트하려면 http://localhost:<port> URL을 사용해야 합니다.localhost 외에 서비스 직원이 일하지 않고 명세서 파일이 다운로드되지 않았습니다.물론 너도 어떤 잘못도 얻지 못할 것이다.목록을 포함하는 태그는 완전히 무시됩니다.

    숨겨진 물건


    서비스 종사자를 등록하면 자원 캐시를 시작하고 항상 서비스 종사자 캐시에서 서비스를 제공합니다.이것은 브라우저 기반 http 캐시와 다르다는 것을 주의하십시오.따라서 개발 도구에서 캐시를 해제하더라도 이 파일들은 계속 서비스 종사자가 서비스를 제공할 것입니다.개발 도구 Bypass for Network 탭 아래의 Application 옵션을 사용해야 합니다.또한 Offline 옵션을 사용하여 네트워크가 없는 것을 시뮬레이션하고 응용 프로그램을 테스트할 수 있습니다.

    서비스 리셋


    목록에서 응용 프로그램에 제공하는 이름이나 배경색을 좋아하지 않습니다.당신은 그것을 바꾸고, 테마를 만들고, 모든 캐시를 비활성화했지만, 당신의 변화는 여전히 작용하지 않는 것 같습니다.서비스 담당자의 만료 정책은 확실하지 않지만, 내 관찰에 따르면, 캐시를 해제할 때 갱신하지 않습니다.변경 사항을 반영하려면 unregister 서비스 담당자가 필요합니다.

    어떻게 핸드폰에서 모든 것을 리셋합니까


    모바일 장치에서 테스트하는 것은 정말 어렵다. 왜냐하면 우리는 개발 도구가 없기 때문에 특정한 옵션 카드에 대해서만 캐시를 해제할 수 있기 때문이다.또한 웹 응용 프로그램을 설치하면 더 이상 지워야 할 브라우저 캐시가 아닙니다.나로서는 플러시할 수 있도록 설정 메뉴에서 데이터/캐시를 삭제하려면android의 프로그램 관리자로 돌아가야 합니다.물론, 브라우저 캐시를 제거해야 합니다. 그렇지 않으면 브라우저는 캐시 버전만 사용할 수 있고, 변경할 수 없습니다.
    핸드폰 고장을 해결하는 몇 가지 절차를 도와주세요.
  • 애플리케이션 제거
  • 설정
    • 에서android에 있는 응용 프로그램의 저장과 캐시를 삭제합니다
  • 사이트의 브라우저 설정에서 브라우저 캐시 지우기
  • 브라우저에서 다시 로드
  • 브라우저 메뉴를 통해 주 화면에 응용 프로그램 추가
    • 속성에 대한 자세한 내용은 여기를 참조하십시오.

    한층 더 읽다


    https://deanhume.com/displaying-a-new-version-available-progressive-web-app/
    https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/12

    끝 메모



    점진적인 네트워크 응용은 단지 하나의 속성이 아니다.반대로 그것은 틈새 없는 사용자 체험을 만들기 위해 결합된 기술이다.그것은 여전히 발전하고 있으니, 머지않아 틀림없이 변화가 발생할 것이다.말할 것도 없이 모든 플랫폼이 모든 기능을 지원하는 것은 아니다.그냥 조심해야 돼.

    2020년 9월 13일 업데이트


    서비스 직원이 사용하는 cache first 전략 때문에 나는 많은 문제에 부딪혔다

    새로운 문장은 나타나지 않는다


    이것은 홈페이지가 항상 캐시로 제공되기 때문이다.이 문제를 극복하기 위해 저는 서비스 종사자 사용 Network first 정책을 업데이트했습니다. 이것은 네트워크 호출이 실패했을 때만 캐시된 파일을 표시한다는 것을 의미합니다.둘 다 실패하면 오프라인 페이지가 표시됩니다.
    그러나 이 정책은 네트워크 호출이 끝날 때까지 기다려야 한다는 단점이 있습니다. 놀라운 캐시 기능을 잃어버릴 수 있습니다.캐시 우선 순위가 더 효과적일 것 같습니다.나중에 시도할 것입니다.

    Ghost admin에서 500개의 오류가 발생했습니다.


    이것은 모든 GET 호출이 일치하지 않는 데이터가 있는 캐시에서 제공되기 때문일 수 있습니다.
    모든 관리자 호출을 무시하기 위해 서비스 직원에 검사를 추가했습니다.
    // The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener("fetch", (event) => {
    // Skip cross-origin requests, like those for Google Analytics.
    // Skip all ghost admin requests to prevent 500 errors
    if (
        event.request.url.startsWith(self.location.origin) &&
        !event.request.url.startsWith(`${self.location.origin}$/ghost}`)
    ) {
        event.respondWith(
            caches.match(event.request).then((cachedResponse) => {
                return caches.open(RUNTIME).then((cache) => {
                    return fetch(event.request)
                        .then((response) => {
                            // Put a copy of the response in the runtime cache.
                            return cache
                                .put(event.request, response.clone())
                                .then(() => {
                                    return response;
                                });
                        })
                        .catch((error) => {
                            // Return cached reponse if network fails
                            if (cachedResponse) {
                                return cachedResponse;
                            } else {
                                // Return offline page if network and cache both fail
                                return caches.match(OFFLINE_URL);
                            }
                        });
                });
            })
        );
    }
});

    End


    제 개인 블로그에 처음 발표cybercafe.dev
    Moodl: 암호 통합, 오류 제거 phpCAS error: phpCAS:::client(): type mismatched for parameter $se
    ElasticSearch Linux 환경 시작 FAQ

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage