모듈

PWA 모듈

추천 수 3 댓글 52
Extra Form
자료 소개 이용자가 사이트를 웹 앱으로 설치할 수 있도록 해주는 모듈입니다.
설치 경로 ./modules/pwa
테스트 환경 Rhymix 2.0
라이선스 GPL v2
이름 버전 날짜 다운수
pwa.v1.0.4.zip 1.0.4 2022-05-30 43
pwa.v1.0.2.zip 1.0.2 2022-05-30 10
pwa.v1.0.1.zip 1.0.1 2022-05-30 2
pwa.0.9.2.zip 0.9.2 2021-09-18 45

v1.0.4

헐 죄송합니다..

수정해놓고서 엉뚱한 파일을 올렸었네요....

모듈 올릴때마다 설치 과정에서 오류나는걸 못잡아서 정말 죄송합니다.

모듈 언인스톨이 되면 지우고 다시 설치하면서 반복 테스트를 할텐데

한번 설치하면 지워지질 않으니 테스트를 쉽게 할 수가 없다보니까..

이번엔 분명히 될겁니다.

 

아 그리고 주의하실 점 또 하나! 푸시 알람이 왜 안오지? 하고 이상하실 수 있습니다.

파이어베이스의 기본 푸시알람은 [현재 내 사이트가 브라우저에서 안보여지고 있을때만] 뜹니다.

내 사이트가 브라우저에 보여지고 있으면 안떠요... 웃기죠? 근데 기본 동작이 원래 그렇습니다.

뭐 내 사이트가 브라우저에 떠 있으면 구지 푸시알림이 없어도 알림센터 알림으로 알 수 있기는 하지만...

그래도 사용성에 차이가 있죠.

푸시 알림 url 처리와 함께 이 문제도 코어에서 우선 수정이 되어야 제가 수정할 수 있는 문제입니다.

 

-----------------------------------------------------

 

v1.0.2

v1.0.0 및 v1.0.1에 버그가 있었습니다.

큰 버그는 아니고... 모듈이 새로 설치되면 업데이트해야 한다고 관리자 화면에서 인식을 해야 하는데

그거 인식시키는 부분이 빠져있었습니다. 그냥 덮어쓰시면 됩니다.

 

---------------------------------------------------

v1.0.0

대망의 버전 1.0입니다!!

이전과는 차원이 달라졌습니다.

우선 드디어 푸시알림이 지원됩니다!

현재 코어에서 지원하는 푸시알림은 철저하게 앱을 위한 것으로 푸시 알림 구독이 반드시 로그인 동작과 함께 이뤄지도록 되어 있습니다.

이게 웹에서의 동작과는 잘 안맞다보니 (로그인 과정을 다 고쳐야 함) 차마 코어를 수정할 수는 없어서 코어 코드를 그대로 들고와서 일부 수정해서 내장했습니다. 이제 수시로 푸시 알림 구독 저장/삭제가 가능합니다.

다만 그래서 차후 코어 내부가 업그레이드되어 바뀔때 사이드 이펙트가 발생할 가능성이 있습니다.

뭐 사실 어떤 모듈이든 코어가 바뀌면 호환성에 문제가 생길 가능성이야 다 있기는 하지만요... 그 가능성이 약간 더 높다고 생각하시면 될 듯 합니다.

일단 회원 설정 메뉴에 푸시 알림 등록/해제 화면이 따로 등록됩니다. 근데 죄송하지만 스킨이 제가 쓰는 slow테마에 맞춘 것 밖에 없습니다. 그러므로 다른 테마들에서는 화면이 많이 깨져 보이실텐데.. 스킨은 직접 만들어서 쓰셔야 할겁니다...

그리고 그 외의 화면들에서 푸시 알림 등록 해제 버튼을 추가하려면 버튼에다가 .pwa-register-alarm 또는 .pwa-unregister-alarm 클래스를 부여하시면 됩니다. 상황에 따라 두 클래스중 하나는 display: none으로 처리됩니다. 만약 문제가 있으면 둘다 display: none이 됩니다. (예를 들면 사파리 브라우저라던가)

그리고 앱 설치 기능도 이제 브라우저에서 띄워주는 것 말고 별도의 버튼을 눌러서 설치할 수 있습니다.

설치 버튼에데가 .pwa-install-app 클래스를 부여해주시면 됩니다. 앱이 이미 설치되어 있거나 앱을 설치할 수 없는 브라우저의 경우에는 이 클래스가 부여된 버튼은 자동으로 display:none 상태가 됩니다.

그리고 기존에 manifest를 읽어들일때 이게 매번 ajax로 수행되다보니 서버에 나름의 부담을 주고 있었습니다.

그래서 이게 ajax이지만 cache되어 저장될 수 있도록 헤더를 추가했습니다.

다만 이 설정은 디폴트로 off로 되어 있습니다. 왜냐면 캐쉬되어 버리면 1시간 동안 박제가 되어 버리기 때문에 설정을 바꿔도 곧바로 인식이 안되기 때문입니다. 모든 설정이 완벽하게 된 이후에 이 옵션을 on으로 해주시기 바랍니다.

그리고 마지막으로 현재 pwa 모듈은 완성되어 있지 않습니다.

푸시 알람이 왔을때 그 푸시 알람을 클릭하면 해당 url로 바로 가게 하고 싶은데 이건 코어 수정이 반드시 필요합니다. 현재 기진곰님께 요청해놓은 상태이며 나중에 코어가 수정되면 그때 pwa 모듈을 다시 업그레이드하도록 하겠습니다.

현재는 푸시 알람을 클릭해도 url로 바로 가는 기능이 안됩니다. 앱에 비해서 약간 아쉬운 부분입니다.

어떤 식으로 적용하면 좋은지는 goodegg.win 사이트에 오셔서 기능을 직접 써보시면 이해가 갈겁니다.

그리고 전에는 serviceWorker.js 파일을 루트에 두어야만 했는데

이제 그 파일말고 firebase-messaging-sw.js 파일도 루트에 두어야 합니다.

루트로 복사해야 하는 파일이 2개입니다. 꼭 주의해주시기 바랍니다.

그리고 마지막으로 부탁드리고 싶은 것이 하나 있는데... 

혹시 pwa 모듈을 써보시고서 충분히 만족스럽다고 생각하시는 분이 있다면 운영하시는 사이트에다가

goodegg.win 배너 하나만 달아주실 수는 없을까요? 배너 교환이긴 합니다만 제 사이트에 배너 다는게

큰 의미가 없으니... 배너 달아주시는 분께는 특별한 기술지원?을 약속드리겠습니다.

pwa 모듈이 제대로 동작안하면 특별히 봐드릴께요 흑흑...

나중에 url 지원 pwa 모듈이 업그레이드되면 1빠로 적용도 약속드리겠습니다.

-추신

아 정말 중요한걸 빼먹고 설명을 안드렸네요...

이게 푸시 알림 설정이 좀 복잡합니다. 그리고 js 파일 안에다가 직접 내장해야 하는터라

관리자 설정에서 설정값을 입력못하고 파일을 직접 수정해야 합니다.

정확하게는 pwa.js 파일하고 firebase-messaging-sw.js 파일 2개를 수정하여야 합니다.

(2파일이지만 수정해야 하는 내용은 둘다 똑같습니다)

파일 열어서 firebase.initializeApp() 가 호출되는 부분을 찾아보시면

각종 설정값을 입력하게 되어있는데 그 부분을 바꾸셔야만 합니다..

 

var webPushCertificationVapidKey = 'BCalNXzZYQ_wMdsafsdafdsafdsafdsafdsafsdafdasfLi6CLNpVcCWAw4ojMT8AgCTb-vCB_neVwAQ8xZbiyk';

firebase.initializeApp({

apiKey: "AIzaSfdsafsdffdasfdsafdsaNoNYu72qM74GE",

authDomain: "goodegg-9e0d4.firebaseapp.com",

projectId: "goodegg-9e0d4",

storageBucket: "goodegg-9e0d4.appspot.com",

messagingSenderId: "774367483801",

appId: "1:774367483801:web:407137a60f1d6d3dc8a508",

measurementId: "G-0RP5ZBPKC3" });

 

이 정도니까 제가 관리자 화면에 넣을 수가 없는걸 이해해주시겠죠?

이게 이 값들을 얻으려면 구글 개발자 콘솔에 들어가서 앱을 생성하고 푸시 알림 관련해서

각종 설정을 하고 설정값을 알아내는 기타 등등의 과정을 거쳐야 하는데

이게 만만치가 않습니다... 이건 제가 알려드릴 수 있는 부분이 아닌 것 같네요.

따로 강좌같은걸 보셔야 할텐데...

하여튼 푸시알림은 그냥 설치만 하면 딱 끝나는 그런 종류의 모듈은 아닙니다.

그리고 여기만 수정하면 되는건 아니고 저 설정값 중 일부는 라이믹스 관리자모드의

시스템설정에도 입력해줘야 합니다.

 

 

-----------------------------------------------------------------------

v0.9.2

이건 몰랐던건데 serviceWorker.js는 무조건 서비스되는 웹앱의

최상위 폴더에 있어야 하는 모양입니다.

(쓰바 이런 중요한 제약사항을 왜 아무데도 안써놓는거냐구...)

웹앱의 스코프가 serviceWorker.js의 위치에 의해 제한되네요.

그것도 모르고 모듈 경로에 serviceWorker.js를 놔뒀더니만... 

저는 초기 개발 와중에 잠시 루트에다가 serviceWorker.js를 놔뒀던 적이 있어서

그게 별도 등록된채로 남아있다보니 에러를 모르고 지나간 것이었습니다.

근데 루트 폴더에 파일을 복사하는건 모듈에서 도저히 할 수 없는 작업입니다.

그러므로 반드시 수동으로!!! serviceWorker.js를 웹사이트의 루트 폴더에 복사해주세요.

index.php가 있는 바로 그 위치입니다.

불편하시겠지만 어쩔 수가 없습니다....

-------------------

v0.9.1

아직 테스트 단계인데 모듈 기능을 항상 ON 시켜놓으면 불편하실 분이 많을 것 같아서

설정에서 모듈 기능을 OFF 시킬 수 있도록 했습니다.

이제 부담없이 테스트해보세요.

-------------------

이 모듈을 설치하면 PWA 규격을 만족시켜

사이트가 웹앱으로써 설치가 가능하게 됩니다.

 

https://realfavicongenerator.net/

 

위 사이트를 이용하셔서 아이콘 생성이나

기타 추가적인 설정 태그를 만드실 수 있습니다.

  • profile
    자료 감사합니다. 푸시 알림 설정 방법이 자세했으면 좋겠지만 여기에 알려드리기에는 너무 긴 내용이라는게 이해가 갑니다. 이 모듈에 바라는 점이 있다면 우선 오프라인 페이지가 구현이 되었으면 좋겠고, 오프라인 읽기도 되었으면 좋겠습니다.
  • profile
    이 모듈의 푸시 알림이라는게 사이트에서 알림이 발생했을때 새로 고침하지 않아도 화면 어딘가에 알림을 띄어주는 걸 말하나요(루리웹처럼) 아니면 스마트폰의 알림창에 알림이 뜨는 걸 말하나요?
  • profile ?
    스마트폰 알림창에 뜹니다
  • ? profile
    어마어마하네요!!
  • profile ?
    원래 라이믹스가 앱에서 지원해주던 기능이고 전 그걸 웹브라우저에서도 되게 한 것 뿐이라..^^
  • profile
    지금 받아서 적용해보았는데요.
    회원설정에서 푸시 알림 등록/해제 를 누르면
    Template not found: /****/www/modules/pwa/skins/dispPwaSubscriptionList.html 이렇게 나오네요. **** 는 제가 cafe24를 사용하고 있는데 사용 계정명입니다.
    경로설정에 오류가 있는 것 같습니다.
  • profile ?
    스킨 설정은 default 로 해놓으신 상태이신가요?
  • ? profile

    pwa모듈의 디자인 부문에서 스킨 설정말씀하시는 건가요?

     

    그리고 스킨 설정을 하면

     

    module_info를 얻어올 수 없습니다.

    "modules/pwa/pwa.admin.controller.php:43"

    이런 오류가 나타납니다~

  • profile ?
    아.. 제 사이트에선 잘 돌던게 왜 릴리즈만 하면 이 모양일까요.. 1빠로 테스트해주셔서 감사합니다 바로 점검해보겠습니다.
  • ? profile
    관심이 많았었던 모듈이라^^ 꼭 적용해보고 싶었거든요~ 1빠라니 영광입니다.
  • profile ?
    아.. 모듈 깔고서 관리자 화면에서 모듈 업그레이드할려면 뭐 눌르라고 메시지가 안뜨셨죠?
  • ? profile
    넵 아무것도 나타나지 않았습니다.
  • profile ?
    예 그게 문제였네요 수정해서 업로드했습니다. 그리고 모듈 설명 부분에 제가 추가한 부분을 좀 자세히 읽어주시기 바랍니다. 푸시 알림이 제대로 등록하려면 구글 개발자 콘솔에서 지리한 설정과정이 필요합니다. 이 모듈만 깔아서 바로 되진 않습니다.
  • ? profile
    올려주신 파일로 다시 업로드 했는데 똑같네요. 삭제 후 다시 설치해도 동일하네요;; ㅎ;;
  • profile ?

    제가 좀 많이 피곤해서 오늘은 이만 자야겠네요.. 문제가 있더라도 오늘 봐드리긴 힘들 것 같습니다.
    여기에 나중에 결과 댓글 좀 부탁드립니다.

  • ? profile
    좋은 아침입니다~ 올려주신 버전으로 잘설치 되었네요. 이게 쪽지나 알림을 받으면 동작하는건가요?
    몇번 테스트로 발송해봤는데 브라우저를 보고 있지 않아도 오질않네요.
    자세히 설명해주셨는데 쉽지 않네요. ㅎ
    암튼 오늘도 복된하루되세요~
  • profile
    안녕하세요. 좋은모듈 만들어주셔서 감사드립니다!
    사이트적용에 문제없이 적용되어 행복한 마음에 댓글남깁니다.
    좋은하루되세요!
  • profile
    좋은 모듈을 만드셨네요. 감사합니다.
  • ?
    라이믹스 1.9x버전대는 지원이 안될까요?

    /index.php?module=pwa&act=getPwaSiteManifest 경로로 타고들어가면
    Template not found:이 없다고 나오네요..
    serviceWorker.js 위치도 /html 폴더내에 index.php랑 놓고
    파비콘들도 생성해주고 경로도 설정해줬는데 템플렛이 없다고나오네요

    nginx 문제인건지..

    관리자페이지에서는 site.manifest 파일정보까지 수정해서 넣어줬어요.
  • ? ?
    1.9.9.9는 안써봤지만.. 말씀하시는거 들어보니 안될 것 같네요...
    Context::setResponseMethod() 함수가 아예 없나봅니다.
  • ? ?
    앗 그렇군요:) 2버전으로 언능 업데이트해야겠네요 감사합니다~
  • profile
    2개의 사이트에 테스트를 해봤는데요.
    1개의 사이트는 정상적으로 잘됩니다.
    다른 1개의 사이트는 관리자 페이지에서만 설치가 뜨고,
    사이트에서는 설치가 안뜨는데...뭐가 잘못 된건지 모르겠습니다.
  • profile ?
    안되는 사이트 주소 좀 알려주세요
  • ? profile
    쪽지 드렸습니다.
  • profile
    안드로이드 크롬과 삼성브라우저에서 만든 앱이 스플래시 이미지의 크기가 다르더군요.
    크롬은 크고, 삼성은 작더군요.
    크롬이 정상이고 삼성은 작은걸 사용하는 것 같습니다.
  • profile
    그리고 pwa의 또 다른 주요기능이 푸시인데.... 혹시 그것까지 개척할 의향은 있으신가요?
  • profile ?
    푸쉬알림은 라이믹스에서 기본 지원되는걸로 알고 있는데요..? 혹시 XE 말씀하시는건가요?
  • ? profile
    앱을 별도로 만들어야 합니다.
    기본적인 웹은 푸시를 받을수가 없으니까요.
    웹으로 푸시를 받게 해주는 역할을 서비스워커가 하구요.
    https://xetown.com/questions/1552455
  • profile ?
    음.. 기본으로 되는줄 알았는데 송신만 되는거였군요...
    왜 수신을 구현안했을까요...
    저도 라이믹스에서 기본 지원 되는줄 알고 그거 써야지 생각하고 있었는데...
    언젠가 구현을 하긴 해야겠군요.... 언제가 될진 모르겠습니다만...
  • ? profile
    푸시기능까지 지원되면 초 대박이네요. ^^*
    앱개발을 별도로 할 필요가 없겠네요.
    화이팅~
  • profile
    예전에 xe로 사이트 만들 때 루트폴더에 xe를 설치하지 않고 xe폴더 안에 설치를 했었습니다.
    그래서 도메인으로 접속시 루트폴더에서 htaccess로 xe폴더로 이동을 시켜주었습니다.

    서비스워커 파일이 루트에만 있어야 하는데 모든 것을 RewriteRule에 의해 모든 것이 xe폴더로 이동하니 xe폴더 안에 서비스워커 파일이 있어도 동작을 안하더군요.

    이런 경우에는 htaccess의 서비스워커 파일을 제외하라고 RewriteRule을 수정해야 합니다.

    RewriteEngine on
    RewriteRule ^serviceWorker.js - [L]
    RewriteRule ^(.*) /xe/$1 [R=301,L]

    2번째 줄로 제외를 시켜주니 서비스워커 파일을 제대로 받아오네요.
  • profile
    자료 나눔 감사드려요 ^^
  • profile
    좋은 기능 감사합니다!
  • profile
    대박이네요.
    너무 좋네요. 감사합니다.
    한가지 아이폰에서는 안되나요? 아이폰에서 까지 되면 정말 대박 물건이네요.
    PC에서는 잘되는 것 확인했는데 아이폰 사용자라서 크롬 설치해서 테스트해봤는데
    모바일 크롬의 경우 메뉴에 들어가서 보시면 [앱 설치]라는 메뉴가 보이면 성공입니다.
    라고 되어 있는데 아이폰에서는 메뉴에 [앱 설치] 가 안뜹니다.
  • profile ?
    개발용 아이폰이 어디갔는지 며칠째 보이질 않아서 도통 점검해볼 방법이 없네요..
    https://mobilesyrup.com/2020/05/24/how-install-progressive-web-app-pwa-android-ios-pc-mac/
    이걸 참고해보심이... add to home screen이 뜨면 pwa 인식인 것 같습니다.
  • ? profile
    감사합니다.
    크롬에서는 안되고 답변 내용대로 사파리에서 홈화면에 추가를 해서 해보니 되기는 하는데 index 화면이 아닌 특정 url 이 지정이 되고 ex) https://test.com 이렇게 등록이 안되고 https://test.com/board 이런식으로 홈화면에 추가됩니다.
    메뉴버튼 등 클릭시 반응이 원활하지 않네요.
    수정이 가능 할까요?
    다시 한번 감사합니다.
  • profile
    "src": "/modules/pwa/android-chrome-192x192.png"
    루트경로에 android-chrome-192x192.png 파일이름으로 앱 아이콘을 넣고
    src 경로를 수정해줘야 하나요?
  • profile ?
    예.. 루트에 파일 올리셨으면 경로도 수정해주셔야 합니다.
  • ?
    PWA로 인식이 되고 있는지 확인하는 법은 모바일 크롬의 경우 메뉴에 들어가서 보시면 [앱 설치]라는 메뉴가 보이면 성공입니다. PWA로 인식안된 사이트에서는 이 메뉴 자체가 뜨지를 않습니다. 데스크탑 크롬의 경우에는 주소표시줄 오른쪽 구석에 보면 앱 설치 아이콘이 표시됩니다. 그걸 눌러서 웹앱으로 설치가 가능하죠. 윈도우에서 이거 설치해본 분 별로 없을텐데 (저도 처음 해봄) 신기하더군요. 그냥 윈도우 어플처럼 시작버튼 누르면 거기 앱 목록에 아이콘이 들어갑니다.
    그리고 화면 하단에 아이콘 설치하겠냐고 모바일 크롬에서 뜰겁니다.
    이건 무조건 매번 뜨는게 아닙니다. 알아보니까 처음에 두어번 물어보고서 설치 안하면 더이상 안뜨고 한동안 가만 있다가 또 뜬금없이 떠서 물어보고 뭐 그런 식이랍니다. 이걸 수동 제어하는 방법은 연구중입니다.
  • ? profile
    크롬 PC, 모바일 모두 앱 설치 아이콘이 보이지 않습니다.
    제대로 설치가 안되서 그런걸까요?
  • ? profile
    꼭 사용해보고 싶은 기능인데 말씀하신 [앱설치] 메뉴 등이 나오지 않습니다.
    라이믹스 2.0 / 아이콘 목록 주소는 /favicon/android-chrome-192x192.png 오로 설정.
    혹시 realfavicongenerator.net 에서 생성된 아이콘과 설정화일을 이미 레이아웃에서 로드하고 있으면 영향이 있을 수 있을까요? site.manifest 화일을 레이아웃에서 로드하거든요.
    https://scorefactory.io
  • profile ?
    아 주소 알려주셔서 감사합니다..
    점검해보니까 버그가 있었네요 수정해서 0.9.2 올리겠습니다
  • profile ?
    버그가 있었습니다. 0.9.2 받아서 시도해보세요 이번엔 잘 될겁니다
  • profile ?
    음.. 이 모듈에서 제공하는건 pwa.js 파일을 로드하는 것과 manifest를 로드하는 것입니다.
    뭐 기왕에 manifest를 수동으로 로드시킬거면 그냥 pwa.js도 수동으로 로드시키세요.
    모듈 활성화를 OFF로 하시면 될겁니다. 아니면 아마 manifest를 두번 포함시키더라도
    별 문제는.. 없을거 같기는 한데 정확히는 장담 못하겠습니다.
  • ? profile
    픽스된 모듈 올리니 잘작동합니다! 수동으로 로드하면 아마 나중에 도저히 기억이 나지 않을 것 같아서 모듈 형태로 관리하는 것이 좋습니다!
    PC, 안드로이드폰, 안드로이드 태블릿에서 잘 작동했고 아이폰에서는 작동하지 않는듯합니다!
  • profile ?
    엥? 아이폰에서 안되나요? 아이폰에서도 된다고 하던데... 확인해보겠습니다.
  • profile
    좋은 자료 감사드립니다. 이 모듈만 설치하고 핸드폰에서 사이트에 접속하면 접속하자마자 '홈화면에 바로가기 추가~' 문구가 나오는 건가요? 아무것도 나오지 않아요ㅠ.ㅠ 그리고 설치되어 있어도 브라우저로 접속하면 매번 문구가 나오나요?
  • profile
    좋은 자료 감사합니다.
  • profile
    감사합니다. ^^
  • profile
    좋은모듈공유 감사합니다. 설치는 하였는데 버튼 노출을 어떻게 시켜야할까요?
  • profile
    이거 설치하면 사용자 브라우저에 홈화면에 바로가기 추가 하시겠습니까? 메시지가 뜨는 건가요?
  • profile ?