Eleventy 프로그레시브 웹 앱

등대 집착

Eleventy Lighthouse obsession bug을 잡았습니다! 이 사이트의 대부분의 페이지는 Lighthouse 로 "Four Hundos"점수를 매겼지만 최근에야 설치 가능Progressive Web App (PWA) 을 얻기 위해 서비스 작업자를 추가했습니다.

Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.

일부 코드

특히 eleventy.after 이벤트의 경우 코드가 매우 간단합니다. 기본적으로 두 부분으로 구성됩니다.

페이지에 작업자를 등록합니다.

workbox-build을 사용하여 서비스 워커를 생성합니다.

작업자 등록

다음 스니펫을 기본 레이아웃 또는 템플릿에 추가해야 합니다.

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js');
    }
</script>

사용된 경로는 /sw.js 입니다. 이것은 아래에서 일치해야 합니다!

서비스 작업자 생성

workbox-build 패키지를 설치합니다.

The workbox-build module integrates into a node-based build process and can generate an entire service worker, or just generate a list of assets to precache that could be used within an existing service worker.

npm i -D workbox-build

다음을 eleventy.js 구성 파일에 추가해야 합니다. 모든 options for generateSW 을 확인하십시오.

// eleventy.js
const workbox = require("workbox-build");

module.exports = (eleventyConfig) => {

    eleventyConfig.on('eleventy.after', async () => {
        // see https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-GenerateSWOptions
        const options = {
            cacheId: 'sw',
            skipWaiting: true,
            clientsClaim: true,
            swDest: `public/sw.js`,  // TODO change public to match your dir.output
            globDirectory: 'public',  // TODO change public to match your dir.output
            globPatterns: [
                '**/*.{html,css,js,mjs,map,jpg,png,gif,webp,ico,svg,woff2,woff,eot,ttf,otf,ttc,json}',
            ],
            runtimeCaching: [
                {
                urlPattern: /^.*\.(html|jpg|png|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/,
                handler: `StaleWhileRevalidate`,
                },
            ],
        };

        await workbox.generateSW(options);
    });

    return {
        dir: {
            output: "public", // TODO update this
        },
    };
}

이를 지원하는 Eleventy용 오래된 플러그인이 몇 가지 있지만 실제로 가치를 알 수는 없습니다. 그리고 그들은 eleventy.after 후크 이전의 해키 솔루션을 사용합니다.

웹 매니페스트 수정

나는 두 단계만 있다고 말했지만 세 번째 단계가 있습니다! Web Manifest 이 필요합니다. 이것은 귀하의 사이트에 대한 매우 사용자 정의입니다. 저는 Eleventy를 사용하여 전역 데이터 값을 사용하여 JavaScript 템플릿에서 생성합니다.

완벽한 결과

그리고 여기 있습니다!



PWA를 사용한 완벽한 등대 점수

거의 전체 사이트를 미리 로드하고 캐싱하는 서비스 작업자는 놀랍도록 반응이 빠른 경험을 제공합니다. 집착은 그만한 가치가 있습니다!