바탕화면에 "오늘의 운세" 설치하기.

 

 

엇. 이런게 되네?
윈도우에 웹을 앱처럼 설치할 수가 있다.

MS Store 이런 걸로 설치하는 거 아니다.

페이스북, 트위터, 인스타그램
이런 것도 설치할 수 있다.

'바로가기'와는 조금 다르다.

바로가기면 Not connected가 뜨는데, 이건 기본 화면이 뜬다.
캐시나 로컬 스토리지를 적극적으로 사용하는 거다.

 

Progressive Web Apps 장단점

 

 
모든 url에서 다 뜨진 않는다.
이걸 지원하도록 웹 화면을 만들어야 한다.

이 기술을 뭐라고 하지?
PWA (Progressive Web Apps)이라고 한다.
2016년 Google I/O를 통해 발표 되었다.

안드로이드 앱과는 어떻게 다를까?

1. 구글플레이에 등록을 하지 않아도 된다.
- 개인개발자는 10일짜리 공개테스트를 해야 하는데 그럴 필요가 없다.
- 그냥 개발을 해서 웹서버에 올려 버리면 된다.

2. flutter, kotlin 등을 공부할 필요가 없다.
- 안드로이드 앱개발을 별도로 공부하지 않아도 된다.
- 그냥 React, Typescript 같은 웹개발 언어로 된다.
- 그냥 웹기술인 거다.

단점이 있다.

1. 통계관리가 안된다.
- 누가 보았는지, 얼마나 보았는지, 잘 쓰고 있는지 알 수가 없다.
- 그래서 통계기능을 추가로 구현하던지
- Google Analytics와 연동을 한다.
- 이런 저런 생각을 해야 하는게 꽤 번거롭다.

2. 마케팅이 안된다.
- 오픈만 하면 누구나 들어와서 막 쓸 것 같은데 그렇지 않다. 아무도 들어오지 않는다.
- 대부분은 웹 검색을 통해 이 사이트를 찾게된다.
- 그래서 SEO에 노출이 되지 않으면 아무도 오지 않는다. 
- 물론 구글플레이에 등록한다고 해서 상황이 낫지는 않다.
- 앱 다운로드를 유인하는 건 더 어렵기 때문에 그냥 이게 더 낫지 않나 싶기도 하다.
 

윈도우 앱처럼 작동

 

어떻게 보일까?
이렇게 팝업창처럼 보인다.
계산기 앱 느낌이다.

 

설치는 윈도우 어플리케이션처럼 된다.
삭제도 윈도우 어플리케이션처럼 삭제된다.
그냥 윈도우 어플리케이션이다.

음, 그럼 실제 디스크 사용량은?
적다. 수백 MB로 설치되는 윈도우 어플리케이션과 다르다.

스마트폰에도 될까?
스마트폰도 된다.

오 ... 

그런데 이게 된다는 걸 누가 알까?
글쎄. 모를 것 같다.

 

 
이렇게 주소창 옆에 뜬다.

"앱설치"라고 뜬다.

설치 되어 있으면 "앱에서 열기"라고 뜬다.

 

Service Worker

"use client";

import { useEffect } from "react";

export default function PWARegister() {
  useEffect(() => {
    if (typeof window !== "undefined" && "serviceWorker" in navigator) {
      // Register service worker after page load
      const handleLoad = () => {
        navigator.serviceWorker
          .register("/sw.js")
          .then((reg) => {
            console.log("Service Worker registered successfully with scope:", reg.scope);
          })
          .catch((err) => {
            console.error("Service Worker registration failed:", err);
          });
      };

      if (document.readyState === "complete") {
        handleLoad();
      } else {
        window.addEventListener("load", handleLoad);
        return () => window.removeEventListener("load", handleLoad);
      }
    }
  }, []);

  return null;
}

 

원리가 뭘까?

Service Worker 때문이다.

요즘은 백엔드를 JavaScript로 돌린다.

*.js 파일이 로컬에 있는 거다.

캐시 파일까지 생각한다면, 로컬에서만 동작할 수 있게 js 파일을 만들면 된다.

 

즉, 크롬 웹엔진이 실행프로그램이 되는거다.

요즘은 Microsoft Edge가 크롬 브라우저니까, 윈도우라면 디폴트로 실행되는거다.

 

고민

- 오늘의 운세, 검색 키워드 경쟁이 심하다.

- 노출이 안되고 있다. 아~ 아이템 선정을 잘못했나?

- 그래도 만들고 싶었던 거 만들었다. 그래서 기분이 좋다.

 

끝.