漸進式網頁應用程式研發實務：以校園通行證管理為例

Design of a Progressive Web App Pass Management System

黃鈴玲(LINGLING HUANG)；翁永昌(YUNG-CHANG WONG)

通行證管理 ； 網頁App ； 訊息推播 ； 自適應網頁設計 ； pass management ； web app ； push notification ； responsive web design

科學與工程技術期刊

14卷2期（2018 / 09 / 01）

1 - 9

繁體中文

漸進式網頁應用程式（Progressive Web Apps; PWA）是一種新的網頁技術，讓網頁App可以擁有類似於原生App的操作體驗，比如依螢幕尺寸自動調整網頁內容、支援訊息推播。本文採用PWA來研製校園訪客通行證管理系統。該系統透過智慧型手機，以常見的二維條碼QR code形式提供一次性的臨時通行證，校警用手機掃描訪客出示的QR code即可決定是否放行。放行時系統會將訪客的身份以推播的方式通知系助理，方便其進行後續的人力調度。用戶端以瀏覽器為界面，可以跨平台（個人電腦、平板、或手機）執行。操作介面採用自適應的概念來設計，可以根據螢幕的尺寸調整內容與排版樣式。本系統將臨時通行證的發放電子化，除了簡化行政流程還可以提升訪客的使用體驗。

Progressive Web Apps (PWAs) combine the best of both the web and apps. PWAs can be made to fit any form factor (desktop, mobile, or tablet) and make re-engagement easy through features such as push notifications. In this study, a novel campus pass management system in PWA was proposed and implemented, which offers a QR code-based one-time pass to campus visitors. School security scans visitor's QR codes to validate their pass. If the pass is valid, the visitor is allowed to enter the campus. The pass management system then simultaneously pushes a message to inform department staff of their visitor's arrival. The proposed system can help streamline administrative processes and enhance overall visitor experience.

1. Anagnostopoulos, C. E.(2014).License plate recognition: A brief tutorial.IEEE Intelligent Transportation Systems Magazine,6(1),59-67.
2. Du, H.,Ibrahim, M.,Shehata, M.,Badawy, W.(2012).Automatic license plate recognition (ALPR): a state-of-the-art review.IEEE Transactions on Circuits and Systems for Video Technology,23(2),311-325.
3. Farajian, N.,Rahimi, M.(2014).Algorithms for licenseplate detection: A survey.2014 International Congress on Technology, Communication and Knowledge,Mashhad, Iran:
4. Google, Inc. (2018) Firebase cloud messaging, Retrieved January 06, 2018, from https://firebase.google.com/docs/cloud-messaging
5. Google, Inc. (2018) Adding push notifications to a Web App, Retrieved January 08, 2018, from https://developers.google.com/web/fundamentals/codelabs/push-notifications
6. Google, Inc. (2018) Progressive Web Apps, Retrieved January 03, 2018, from https://developers.google.com/web/progressive-web-apps
7. iZooto (2018) Push notifications, Retrieved January 10, 2018, from https://www.izooto.com.tw
8. Li, C.(2010).Automatic vehicle identification (AVI) system based on RFID.International Conference on Anti-Counterfeiting Security and Identification in Communication,Chengdu, China:
9. Mozilla and individual contributors (2018) Responsive design mode, Retrieved January 02, 2018, from https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
10. Mozilla and individual contributors (2108) Service worker API, Retrieved January 02, 2018, from https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API.
11. OneSignal (2018) OneSignal - free web push notifications, Retrieved January 03, 2018, from https://wordpress.org/plugins/onesignal-free-web-push-notifications
12. Oracle Corporation (2018) MySQL, Retrieved January 02, 2018, from https://www.mysql.com
13. Pala, Z.,Inanc, N.(2007).Smart parking applications using RFID technology.1st Annual RFID Eurasia,Istanbul, Turkey:
14. PHP Group (2018) PHP: hypertext preprocessor, Retrieved January 04, 2018, from http://php.net.
15. SendPulse (2017) Web push notifications, Retrieved September 08, 2017, from https://sendpulse.com/features/webpush
16. SSL For Free (2018) Free SSL certificates in minutes, Retrieved January 05, 2018, from https://www.sslforfree.com
17. W3C (2017) Service workers nightly, Retrieved August 23, 2017, from https://w3c.github.io/ServiceWorker.
18. Wikipedia (2018) Web application, Retrieved January 10, 2018, from https://en.wikipedia.org/wiki/Web_application.
19. Wikipedia (2017) Responsive web design, Retrieved July 15, 2017, from https://en.wikipedia.org/wiki/Responsive_web_design.
20. WordPress (2018) Create an outstanding website, Retrieved January 10, 2018, from https://wordpress.com/learn-more/?v=site