101. (TWOK/WORK) [업무 이슈] [기능 보완] ios 및 android 소프트웨어 os 업데이트 이후 웹뷰 캐시 문제로 css , js 미동작 이슈 발생

---

[제 목]

​

[업무 이슈] [기능 보완] ios 및 android 소프트웨어 os 업데이트 이후 웹뷰 캐시 문제로 css , js 미동작 이슈 발생

 

---

[내 용]

 

------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. 고객이 휴대폰 단말기 os 버전 업데이트 이후 앱 실행 시 특정 화면에서 css 깨짐 및 js 미적용 관련 이슈 발생

------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 문제 발생 단말기 설정 > 사파리 브라우저 자바스크립트 동작 활성 상태 확인 (정상 활성 상태 확인)


2. 테스트 단말기 os 버전 업데이트 하지 않고 >> 설치 된 앱 실행 >> 웹뷰 css , js 동작 확인 (정상 동작)


3. 업데이트 된 os 버전 기능 변경 확인 및 사파리 브라우저 해당 css , js 구동 여부 체크 (문서 확인 상 해당 css , js 정상 동작 확인)


4. 테스트 단말기 os 버전 업데이트 >> 설치 된 앱 실행 >> 웹뷰 css , js 동작 확인 (특정 단말기 이슈)

  >> 모든 단말기에서 css , js 가 미동작하지 않고 특정 단말기에서만 미동작 이슈 발생


5. 문제가 발생한 단말기 사파리 브라우저 캐시 삭제 및 앱 삭제 후 다시 재설치 >> 기능 동작 테스트 진행 (정상 동작 확인)

------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. (알림 메시지 추가) 사용자 알림 메시지 추가 >> os 업데이트 및 설정 변경 후 화면 깨짐 및 기능 미동작 발생 시 브라우저 캐시 초기화 및 앱 재설치를 진행해주세요.




2. (소스코드 로직 보완) 안드로이드 OS 버전 체크 및 업데이트 build 버전 체크 후 캐시 초기화 로직 수행

- 앱 초기 실행 시 프리퍼런스에 저장 된 OS 버전과 현재 앱 실행 OS 버전 비교 (OS 업데이트 체크)

  >> OS 버전 비교 후 데이터가 다를 경우 프리퍼런스 데이터 업데이트 수행 및 캐시 초기화 플래그 값 True 설정


- 앱 초기 실행 시 프리퍼런스에 저장 된 App 빌드 버전과 현재 앱 실행 App 빌드 버전 비교 (앱 업데이트 여부 체크)

  >> App 빌드 버전 비교 후 데이터가 다를 경우 프리퍼런스 데이터 업데이트 수행 및 캐시 초기화 플래그 값 True 설정


- 앱 초기 실행 시 주기적 앱 캐시 초기화 배치 로직을 위해 최근 앱 실행 시간 확인 및 특정 일 (ex : 하루 , 일주일 등) 이 지난 경우 확인 (앱 캐시 초기화 배치 로직)

  >> 특정 일 (ex : 하루, 일주일 등) 이 지난 경우 캐시 초기화 플래그 값 True 설정


- 특정 액티비티 화면에서 웹뷰 로딩 수행 전 캐시 초기화 플래그 값 True , Flase 여부 체크 수행


- 캐시 초기화 플래그 값이 True 인 경우 >> 기존에 저장된 쿠키 및 Http 캐시 , 웹뷰 캐시 등 초기화 수행 실시

  >> Flase 인 경우는 로딩 속도 딜레이 현상을 방지하기 위해 기존 쿠키 및 캐시 사용 웹뷰 로드 수행 실시


- [추가] : 해당 쿠키 및 캐시 초기화 로직 적용 시 더 나아가 프리퍼런스 데이터 및 파일 데이터 초기화 로직도 포함 될 수 있음


- [추가] : 웹 프론트 및 서버 배포 후 특정 js , css 파일에 적용 된 타임 스탬프 값을 읽어서 캐시 초기화가 필요한 경우 판단 및 추가로 캐시 초기화 로직을 적용할 수 있음

------------------------------------------------------------------------------
[참고 사이트]
------------------------------------------------------------------------------

https://blog.naver.com/kkh0977/223593767936

https://blog.naver.com/kkh0977/223595018272

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

---