This document provides an overview of progressive web apps (PWAs) including: - A brief history of PWAs and how they have evolved since 2005. - Key characteristics of PWAs like being progressive, responsive, connectivity independent and having app-like interactions. - Common components used to build PWAs like HTML5, CSS3, JavaScript, service workers and app manifests. - Examples of companies that use PWAs and advantages like being lighter than native apps and not requiring installation. - A simple PWA example built with HTML, CSS, JavaScript showing a movie search and history functionality.

1. Basic Learning about
Progressive Web Apps
(PWA)
MUHAMAD ALDY BINTANG
UNIVERSITAS INDONESIA
20/02/2019

2. READ ME FIRST
• I do not own the entire content, basically I will reference all the literature I
have found from books and internets.
• Any pictures, content, and examples of code are belong to their owner, I will
state the reference of the owner on the end of the presentation.
• This presentation is for study purpose only.
• If you have any question or critic for this presentation, you can contact me on
muhamadaldy17@gmail.com.
20/02/2019

3. OUTLINE
o PWA basic understanding
o The advantages of PWA
o PWA components for website
o Simple PWA
o Simple code for PWA
20/02/2019

4. History of PWA
Wikipedia[1] said PWA, Progressive Web Application, is a web application (we know as Website)
which load like regular website with offer the user functionally for user’s flexibility.
Timeline history
◦ 2005: Responsive web apps is developed, using PHP, ASP.NET, Ajax.
◦ 2007: Web apps lose to native apps in better user experience and faster file loading.
◦ 2010: Evolve of HTML5, CSS3, and JavaScript, make web apps more capable.
◦ 2015: Frances Berriman and Alex Russell developed first generation of progressive web apps.
20/02/2019

5. FlipBoard using PWA[2]
20/02/2019

6. Characteristic of PWA
Progressive, can works for every user regardless of browser uses because already built with the
PWA function.
Responsive, can fit in any form factor, mobile and desktop.
Connectivity Independent, no always need connection to internet to access, accept to working
offline and update later.
App like interaction, user can use like they using native apps, with app style.
Fresh, always up-to-date with service worker, a JavaScript file which runs separately from main
browser thread with function to control network and cache[3], so the user still receive the latest
data and store locally when they go offline and update status to server and send the data when
go online.
Safe, can only works with HTTPS, featuring encrypt and decrypt the traffic.
20/02/2019

7. Characteristic of PWA
Discoverable, identifiable as application with W3C App Manifest, can be added to home screen
(like example in slide 5) with identity saved in JSON file[4], and easy to search in search engine.
Able to re-engage, with push notification user can know the latest update of the website which
administrator send with ease.
Installable, the web app can be saved into home screen so the user doesn’t has to check/open
related app to search again through.
Linkable, easily to share via URL and doesn’t require to install first.
20/02/2019

8. Example of Company using PWA
• The informations are based on [5] and [6] (see references)
• The pictures can be surfed from Internet, all pictures are belong to each of the corporation.
20/02/2019

9. Advantages using PWA[7]
Lighter than native apps, less memory, less bandwidth.
No need installation instead of built in system.
Lower cost because no need to upload the app into store.
Less effort to build unlike native apps which need to upload for update release.
More support for deep links nowadays.
20/02/2019

10. PWA Components[7]
HTML5, main language for write website with progressive support.
CSS3, language for styling and designing alongside HTML.
JavaScript, language for using JAVA function and access hardware with JavaScript’s API.
Service Worker, provide to work offline and auto update when go online.
HTTPS, protocol which PWA can be run and accessed on internet.
App Manifest, a JSON file for create link to access easily, by W3C.
App Shell, the design concept aimed at loading and rendering the container first, example like
splash screen.
Caching, save some of files in cache memory so furthermore the web app can load shortly.
20/02/2019

11. Some of
frameworks for
PWA
• The information based on [8]
(see references).
• The pictures can be surfed
from Internet, all pictures are
belong to each of the
corporation.
20/02/2019

12. Simple PWA Example
o The main purpose of this
website is to show list of
movie and search history.
o Yassine Benabbas, the
author, wrote the article
[9] for guiding basic
knowledge of PWA using
HTML, CSS, and
JavaScript.
o This PWA run in localhost.
20/02/2019

13. Example PWA Code
o index.html code
o Calling initialization CSS
(main.css) and JavaScript
(main.js)
o On body:
o Two divider container
o First one for search box
o Second one for display
search history
o It’s using ID based to call
CSS style
20/02/2019

14. Simple PWA Example
o main.css file
o Three style to be called:
history, anime_item, and
anime_item img.
o The rest of code can be
learned from W3C School,
it still normal CSS code.
20/02/2019

15. Example PWA Code
o Initialization JavaScript
o Create empty array to
store search history.
o Using API from
https://api.jikan.me/ to
get the data.
o When the function
buildAnimeMarkup is
called, it return the data
with HTML code.
20/02/2019

16. Simple PWA Example
o Some other function from
JavaScript file.
o All of the codes are in
JavaScript language, it’s
better to get used to JAVA
language.
o JAVA language and
JavaScript using object
oriented programming
concept.
20/02/2019

17. Example PWA Code
o JSON code, name
manifest.json
o It is use for adding into
home screen with icon
which adjust the device’s
screen.
o It also storing name,
nickname, language, display
parameter, etc. when
opened later.
20/02/2019

18. Simple PWA Example
o In HTML file, add this
codes to call
manifest.json
o With this the website can
offer/have feature to be
add to device’s home
screen.
20/02/2019

19. Simple PWA
Example
o Furthermore, add service worker so user can
work offline and get update (synchronize) when
go online.
o Add caching feature to reduce loading time in
main.js file.
o The example is using Web App Manifest
Generator for creating manifest.json file.
o Add HTTPS protocol which is mandatory for a
PWA, we can get free SSL certificate on
https://letsencrypt.org/
o Add server side rendering.
20/02/2019

20. Conclusion
 PWA is a progressive web apps which run as a website with app-like style and
feature, get more interactive and flexible for user experience.
 PWA have several characteristic, like app-like, connection independent, safe,
and advantages, such as light weight (in load time and data), no installation,
lower cost.
 PWA built with HTML, CSS, and JavaScript language, and can be worked with
framework, like Ionic, Quasar.
 A simple PWA should have features, like can be added into home screen,
service worker (offline mode), HTTPS protocol, as it base.
20/02/2019

21. REFERENCES
1. Wikipedia. Progressive web applications.
https://en.wikipedia.org/wiki/Progressive_web_applications
2. Russell, Alex. 2015. Progressive Web Apps: Escaping Tabs Without Losing Our Soul.
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
3. Introduction to Service Worker. https://developers.google.com/web/ilt/pwa/introduction-to-
service-worker
4. The Web App Manifest. https://developers.google.com/web/fundamentals/web-app-
manifest/
5. Appscope. 7 Excellent Progressive Web App Examples. https://medium.com/appscope/7-
excellent-progressive-web-apps-that-prove-pwas-are-ready-for-mainstream-consumer-
adoption-9a8a8e876eba
20/02/2019

22. REFERENCES
6. Progressive Web Apps. https://pwa.rocks/
7. The Complete Guide to Progressive Web Apps, https://flaviocopes.com/progressive-web-
apps/
8. What are the best PWA framework? https://www.slant.co/topics/12815/~pwa-framework
9. Benabbas, Yassine. 2018. PWA from scratch guide (yet another one). https://itnext.io/pwa-
from-scratch-guide-yet-another-one-bdfa438b50aa
20/02/2019