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

Design of a Progressive Web App Pass Management System

漸進式網頁應用程式（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.