Here’s the content of This Presentation :
Progressive Web Apps
Service Workers
Comparison of Responsive Web, Native Apps, And PWA
Benefit Using PWA Technology
Framework in PWA
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
Notas del editor
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.
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.
