정적 사이트를 PWA로!

19903 단어 webdevpwajavascripthtml
Progressive Web App 또는 줄여서 PWA는 기본 기능이 추가된 웹사이트입니다. 일반 앱처럼 설치가 가능하고 오프라인에서도 작동하며 별도의 브라우저 프로세스에서 실행됩니다. 푸시 알림 등과 같은 기능도 지원합니다. PWA는 제공하는 기능으로 인해 최근 중요성이 높아졌습니다.

Fun Fact: DEV Community is also a PWA!



기본 PWA를 구축하는 것은 그리 어렵지 않습니다. 약간의 변경으로 정적 사이트를 PWA로 변환하는 방법을 살펴보겠습니다.
But First things 먼저 좀 더 이해해

PWA에 필요한 추가 구성 요소:
  • 매니페스트
  • 서비스 노동자
  • HTTPS 연결

    • PWA 구축에서 그들의 역할을 살펴보겠습니다.
  • 매니페스트는 PWA의 속성을 설명하는 JSON 파일입니다. 여기에는 앱 이름, 테마 색상, 아이콘, 앱 바로가기 등과 같은 정보가 포함됩니다
    • .
  • 서비스 워커는 백그라운드 프로세스에서 실행되는 JS 워커입니다. 앱의 상태와 캐시를 관리하고 알림을 처리하며 최신 데이터를 오프라인 데이터와 동기화합니다.
  • 보안을 위해 HTTPS 연결이 필요합니다.

    • 여기서 저는 멋진 트리오(HTML, CSS, JS)로 만든 간단한 시계로 시작합니다.

    먼저 앱을 사용해 보세요!!






    Click here 인스톨 할 수 있도록!



    !!! 메모:





    현재 모든 브라우저가 PWA를 지원하는 것은 아니지만 곧 지원될 예정입니다. 최신 버전의 Chrome, FireFox, Edge가 최근 지원합니다.


    프로젝트 구조:




    /Clock
    +-- /components
    |      +-- /images
    |      |      +-- favicon.png
    |      |      +-- clock-face.png
    |      +-- /scripts
    |      |      +-- main.js
    |      |      +-- pwa-handler.js
    |      +-- /styles
    |             +-- main.css
    +-- index.html
    +-- manifest.json
    +-- service-worker.js


    A-not-so-Fun Fact: Adobe has discontinued their PhoneGap Build; which is a cloud service for building apps because of the rise of PWA.


    index.html -> 매니페스트를 연결하는 것을 잊지 마세요!




    <!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Some basic meta tags. -->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, height=device-height,user-scalable=no, initial-scale=1.0" />

        <!-- This one is important for the manifest. -->
        <meta name="theme-color" content="#0d085c" />

        <title>Clock</title>

        <!-- Reference the StyleSheet. -->
        <link rel="stylesheet" href="/components/main.css" />

        <!-- Reference the manifest file; is must for PWA. -->
        <link rel="manifest" href="/manifest.json" />

        <!-- Reference the icons -->
        <link rel="shorcut icon" href="/components/favicon.png" type="image/x-icon" />
        <link rel="apple-touch-icon" href="/components/favicon.png" />
    </head>
    <body>
        <div id="header">
            <div id="title">Clock</div>
            <div id="install">Install App</div>
        </div>

        <div id="clocks">
            <div id="analog">
                <div id="second"></div>
                <div id="minute"></div>
                <div id="hour"></div>
            </div>
            <div id="digital"></div>
        </div>

        <!-- Reference the main and helper scripts. -->
        <script src="/components/main.js"></script>
        <script src="/components/pwa-handler.js"></script>
    </body>
</html>


    main.css 및 main.js 파일은 PWA와 관련이 없으므로 표시하지 않았지만 GitHub 저장소에서 찾을 수 있습니다.


    /components/scripts/pwa-handler.js




    // Reference the serviceWorker.
const serviceWorker = navigator.serviceWorker;

// Register our ServiceWorker script, if serviceWorker is available.
if (serviceWorker) {
    serviceWorker
        .register("/service-worker.js")
        .then(() => console.log("ServiceWorker Registered to the Application!"))
        .catch(() => console.log("Failed to Register the ServiceWorker."));
}

// Create a variable to defer the beforeinstallprompt event.
let beforeInstallEvent;

// Reference the install button from DOM.
const installButton = document.getElementById("install");

// Watch for the beforeinstallevent and defer it.
window.addEventListener("beforeinstallprompt", (event) => {
    event.preventDefault();
    beforeInstallEvent = event;
    installButton.style.display = "block";
});

// Prompt for Installation when install button is clicked.
installButton.addEventListener("click", () => {
    beforeInstallEvent
        .prompt()
        .then((choice) => {
            // Hide the install button as its purpose is over.
            if (choice.outcome == "accepted") {
                installButton.style.display = "none";
            }
        });
});


    index.html에 설치를 유도하는 버튼을 제공했는데 앱을 설치하면 바로 사라집니다.


    /components/images/favicon.png




    /components/images/clock-face.png




    manifest.json -> 512x512 아이콘은 필수입니다!




    {
    "name": "Clock",
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#0d085c",
    "icons": [
        {
            "src": "/components/images/favicon.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "any maskable"
        }
    ]
}


    이것은 최소한의 매니페스트 파일입니다. 검색하면 사용할 수 있는 다른 많은 속성을 찾을 수 있습니다.


    서비스-worker.js




    // Name of the Cache.
const CACHE = "cacheV1";

// Select files for caching.
let urlsToCache = [
    "/",
    "/index.html",
    "/components",
    "/components/images",
    "/components/images/favicon.png", 
    "/components/images/clock-face.png",
    "/components/scripts",
    "/components/scripts/main.js", 
    "/components/scripts/pwa-handler.js",
    "/components/styles",
    "/components/styles/main.css"
];

// Cache all the selected items once application is installed.
self.addEventListener("install", (event) => {
    event.waitUntil(
        caches.open(CACHE).then((cache) => {
            console.log("Caching started.");
            return cache.addAll(urlsToCache);
        })
    );
});

// Whenever a resource is requested, return if its cached else fetch the resourcefrom server.
self.addEventListener("fetch", (event) => {
    event.respondWith(
        caches.match(event.request).then((response) => {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});


    이 정도의 지식이 있으면 PWA의 세계로 뛰어들 준비가 된 것입니다.


    다음은 GitHub 저장소입니다.




    <사업부 클래스="readme-개요">

    프로리시 / 시계


    PWA를 설치할 수 있는 아날로그 및 디지털 시계가 특징입니다.





    시간 내주셔서 감사합니다. 토론 영역에서 PWA를 참조하십시오.



    btw this is my first post ever on Internet!

    [문제풀이] NOIP 보급팀 로곡P1020 미사일 요격
    하늘에서 떨어지다 피자

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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