Progressive Web Apps(PWA)
- 1. Progressive Web Apps (PWA) Muhamad Fahriza Novriansyah
- 2. Here’s the content of This Presentation : 1. Progressive Web Apps 2. Service Workers 3. Comparison Responsive Web, Native Apps, And PWA 4. Benefit Using PWA Technology 5. Framework in PWA Contents of Presentation
- 3. Progressive Web Apps Progressive Web Apps(PWA) is websites that can run applications such as native apps that use standard responsive web design techniques . This PWA can improve the performance capabilities of a web by resembling native applications. PWA uses the programming languages HTML5, CSS, and Javascript and can be used on all platforms. Fig. 1. Example PWA Apps
- 4. Service Workers In PWA there are Service Workers one of the cores of PWA. This service worker is usually used as a proxy and OS container, together with the caching concept, so it can still be used in offline mode for web applications or web apps. With this Service Worker resolve the problem of errors on the network or white screen that is common in previous web technologies Fig. 2. Service Workers as proxies
- 5. Comparison Responsive Web, Native Apps, And PWA Capabilities Responsive Website Native App Progressive App Mobile Friendly Yes Yes Yes Installable No Yes Yes SEO-Indexed Yes No Yes Offline Mode No Yes Yes Push Notification No Yes Yes GPS Enabled No Yes Yes Table. 1. Comparison Responsive Web, Native Apps, And PWA
- 6. Benefit Using PWA Technology Low Development Costs App Like Native Apps Fast Installation Support All Platform No Updating Issues Offline Mode No Dependence on App Store Enhanced Security Support SEO
- 7. Framework in PWA Ionic Angular JS Vue Js React JS - Free for web pages development - Easy Maintenance - Large Plug in Library - Large Community Support - MVC Framework - Presence of IntelliSense and Typescript - Supported by Laravel and Alibaba - Fast rendering with Virtual DOM - Flexible to set up with the help of TypeScript and JSX - Large community support - An extensive ecosystem - Speedy rendering with Virtual-DOM.
- 8. 1. Progressive Web Apps is websites that can run applications such as native apps 2. PWA uses the programming languages HTML5, CSS, and Javascript and can be used on all platforms. 3. Benefit Using PWA are Low Development Cost, can be Offline, Support SEO, Support All Platform, Etc. 4. There are many framework to make easier development PWA such as Ionic, Angular JS, Vue Js, And React JS Conclusion
- 9. [1] A. Luntovskyy, "Advanced software-technological approaches for mobile apps development," 2018 14th International Conference on Advanced Trends in Radioelecrtronics, Telecommunications and Computer Engineering (TCSET), Slavske, 2018, pp. 113-118. [2] L. E. Nugroho, A. G. H. Pratama, I. W. Mustika and R. Ferdiana, "Development of monitoring system for smart farming using Progressive Web App," 2017 9th International Conference on Information Technology and Electrical Engineering (ICITEE), Phuket, 2017, pp. 1-5. [3] S. Saltis, "What is a Progressive Web App? (And Do You Need One)," coredna, 26 November 2019. [Online]. Available: https://www.coredna.com/blogs/progressive-web-app. [Accessed 12 January 2020]. [4] A. Syah, " Berkenalan dengan Progressive Web Apps (PWA)" Codepolitan, 11 November 2016. [Online]. Available: https://www.codepolitan.com/berkenalan-dengan-progressive-web-apps-pwa-581e68e6520ae-1400. [Accessed 11 January 2019]. [5] Y. SHAPTUNOVA, "The Benefits of Progressive Web Apps (PWA) for Business," sam solutions, 28 May 2018. [Online]. Available: https://www.sam- solutions.com/blog/the-benefits-of-progressive-web-apps-pwa-for-business/. [Accessed 12 January 2019]. [6] A. Mehta, "Top 6 Frameworks and Tools To Build Progressive Web Apps," appinventiv, 2019 July 31. [Online]. Available: https://appinventiv.com/blog/top-pwa-development-frameworks/. [Accessed 12 January 2020]. Reference
Editor's Notes
- #3: So this is the content of my final presentation, there's 2 things,this is about what i’ve done for this internship, and what i learn from this intern.
- #7: For real information i get that for official and other website, and for keyword i get that from review website and the tools keyword like google ads and google trends. So this content have maximum character for good design , i simply check character with the tools from letter count website.