PWA 모듈

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/

 

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

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