Web Application to Progressive Web Application Migration Guide Cyril Schmitt – Swisscom Digital Technology SA Florian Maffini – Swisscom Digital Technology SA In collaboration with Service de l’informatique et des télécommunications de l’Etat de Fribourg (SITel) March 20th, 2020 WA to PWA Migration Guide | SITel - Swisscom Digital Technology SA 1 / 66 Table of Contents WHO IS THIS DOCUMENT FOR? ................................................................................................................ 4 PROGRESSIVE WEB APPLICATION ............................................................................................................. 5 1 HISTORY ............................................................................................................................................... 5 2 CORE IDENTITY ....................................................................................................................................... 5 3 USER EXPERIENCE ................................................................................................................................... 6 4 MARKET ............................................................................................................................................... 7 DEFINE BUSINESS NEEDS ........................................................................................................................ 10 1 BUSINESS NEEDS ................................................................................................................................... 10 2 USER JOURNEYS AND BUSINESS RULES ........................................................................................................ 10 GATHER WEB CAPABILITIES AND CHECK FEASIBILITY ............................................................................... 12 1 STATE OF THE WEB ............................................................................................................................... 12 2 BROWSER SUPPORT .............................................................................................................................. 16 EVALUATE PWA MIGRATION KNOWING MAJOR DECISION VECTORS ....................................................... 21 1 TECHNOLOGY ...................................................................................................................................... 22 2 FUNCTIONAL COVERAGE ......................................................................................................................... 22 3 DEVELOPMENT COST AND EFFORT ............................................................................................................. 22 4 PERFORMANCE .................................................................................................................................... 23 IMPLEMENT FOUNDATIONAL REQUIREMENTS (LEVEL 1) ......................................................................... 24 1 WEB SITE IS SERVED OVER HTTPS [B1] ................................................................................................... 24 2 PAGES (I.E. URLS) SHOULD LOAD OFFLINE [B2] ......................................................................................... 25 3 WEB APP METADATA FOR HOME SCREEN INSTALLATION [B3] ....................................................................... 26 4 RESPONSIVE WEB DESIGN [E1] ............................................................................................................. 27 5 CROSS BROWSER SUPPORT [E2] ............................................................................................................ 28 6 FIRST LOAD FAST ON 3G [E3] ............................................................................................................... 29 7 SEAMLESS PAGE TRANSITION [E4] .......................................................................................................... 30 8 ONE PAGE = ONE URL [E5] .................................................................................................................. 31 9 USE COMPRESSION FOR TEXT RESOURCES [E6] .......................................................................................... 32 10 ELIMINATE RENDER-BLOCKING RESOURCES [E7] ...................................................................................... 33 IMPLEMENT ADVANCED REQUIREMENTS (LEVEL 2) ................................................................................. 35 1 INSTALL PROMPT BANNER SHOULD BE USED WISELY [O1] ............................................................................. 35 2 INTERCEPT PROMPT AND DIFFER DISPLAY AT A CONVENIENT TIME [O2] ............................................................ 36 3 DETECT AND INFORM USERS ABOUT DISCONNECTION [O3] ........................................................................... 37 WA to PWA Migration Guide | SITel - Swisscom Digital Technology SA 2 / 66 4 AVOID JUMPING CONTENT/IMAGE AS IT LOADS [O4] .................................................................................. 38 5 RETAIN SCROLL POSITION ON PREVIOUS PAGE [O5] ..................................................................................... 39 6 NO OVERLAP BETWEEN KEYBOARD AND TEXT INPUTS [O6] ........................................................................... 40 7 AVOID FRAGMENT IDENTIFIER [O7] ........................................................................................................ 41 8 CONTENT SHOULD BE EASILY SHARABLE [O8] ............................................................................................ 42 9 EXPLAIN USER ABOUT PUSH NOTIFICATIONS CONTEXT [O9] ........................................................................... 43 10 DIM THE SCREEN WHEN REQUESTING PERMISSIONS [O10] ......................................................................... 44 11 NOTIFICATIONS MUST BE TIMELY, PRECISE AND RELEVANT [O11] ................................................................. 45 12 PROVIDE A NOTIFICATION SETTING PAGE [O12] ....................................................................................... 46 13 ALLOW INDEXATION OF PAGES [O13] ................................................................................................... 47 14 METADATA FOR SEARCH ENGINE AND SOCIAL NETWORKS [O14] .................................................................. 48 15 CANONICAL URLS [O15] ................................................................................................................... 49 16 SEAMLESS CROSS DEVICE LOGIN FLOW [O16] .......................................................................................... 50 17 USER CAN PAY USING NATIVE TRUSTED FUNCTIONALITY [O17] .................................................................... 51 IMPLEMENT QUICK WINS (BONUS) ......................................................................................................... 53 1 CLEAN UNUSED CSS [QW1] .................................................................................................................. 53 2 USE OPTIMIZED FORMATS FOR IMAGES [QW2] ........................................................................................... 54 3 MINIFY JAVASCRIPT [QW3] .................................................................................................................. 54 4 TEXT SHOULD REMAIN VISIBLE DURING WEBFONT LOAD [QW4] ...................................................................... 55 5 STATIC ASSETS MUST BE SERVED WITH AN EFFICIENT CACHE POLICY [QW5] ........................................................ 55 6 BACKGROUND AND FOREGROUND COLORS MUST HAVE A SUFFICIENT CONTRAST RATIO [QW6] .............................. 56 7 LINKS SHOULD HAVE A DISCERNIBLE NAME [QW7] ...................................................................................... 56 8 LISTS SHALL ONLY CONTAIN <LI> ELEMENTS [QW8] ..................................................................................... 57 9 USE HTTP/2 FOR ALL RESOURCES [QW9] ................................................................................................. 57 10 USE PASSIVE LISTENERS TO IMPROVE SCROLLING PERFORMANCE [QW10] ....................................................... 58 11 LINKS TO CROSS-ORIGIN DESTINATIONS ARE UNSAFE [QW11] ...................................................................... 58 DEPLOY AND TEST .................................................................................................................................. 59 1 ANALYTICS .......................................................................................................................................... 59 2 A/B TESTING ....................................................................................................................................... 62 FORECAST .............................................................................................................................................. 63 GLOSSARY ............................................................................................................................................. 64 SOURCES ............................................................................................................................................... 65 WA to PWA Migration Guide | SITel - Swisscom Digital Technology SA 3 / 66 Who is this document for? This document is addressed to any software engineering team, developer, project manager or product owner maintaining a Web-based product, publicly available, and willing