Progressive Web App

Editor's Notes

• #9: https://medium.com/@bfortuner/how-web-applications-work-4424c6fb175a
• #15: https://nghethuatcoding.com/2019/05/02/cac-ki-su-pinterest-da-xay-dung-progressive-web-app-nhu-the-nao/
• #18: Application shell is a core element of PWA which provides the fast performance. Simply put, it is a container where the content is put. App shell requires minimum lines of code and consists of only the most essential elements like header and navigation bar. This part of PWA is not loaded every time a user launches the app. Instead, it is cached once and then displayed to a user regardless of internet connection. An app shell is crucial for those web apps that regularly update content but leave navigation unchanging. Google set the list of requirements for a good app shell. It should utilize as little data as possible, load fast, separate navigation and content, and be stored in a local cache.
• #19: Application shell is a core element of PWA which provides the fast performance. Simply put, it is a container where the content is put. App shell requires minimum lines of code and consists of only the most essential elements like header and navigation bar. This part of PWA is not loaded every time a user launches the app. Instead, it is cached once and then displayed to a user regardless of internet connection. An app shell is crucial for those web apps that regularly update content but leave navigation unchanging. Google set the list of requirements for a good app shell. It should utilize as little data as possible, load fast, separate navigation and content, and be stored in a local cache.
• #20: Application shell is a core element of PWA which provides the fast performance. Simply put, it is a container where the content is put. App shell requires minimum lines of code and consists of only the most essential elements like header and navigation bar. This part of PWA is not loaded every time a user launches the app. Instead, it is cached once and then displayed to a user regardless of internet connection. An app shell is crucial for those web apps that regularly update content but leave navigation unchanging. Google set the list of requirements for a good app shell. It should utilize as little data as possible, load fast, separate navigation and content, and be stored in a local cache.
• #21: The main concept of PWA is that it works equally fast with good, bad or no internet connection. And here service worker comes on stage. It is an entirely separate network script that works on the background and decides if the content should be downloaded from cache or server. SW is the main reason why progressive web apps work offline and synchronize data. HTTPS server is the main requirement for installing SW.
• #22: The main concept of PWA is that it works equally fast with good, bad or no internet connection. And here service worker comes on stage. It is an entirely separate network script that works on the background and decides if the content should be downloaded from cache or server. SW is the main reason why progressive web apps work offline and synchronize data. HTTPS server is the main requirement for installing SW.
• #23: The main concept of PWA is that it works equally fast with good, bad or no internet connection. And here service worker comes on stage. It is an entirely separate network script that works on the background and decides if the content should be downloaded from cache or server. SW is the main reason why progressive web apps work offline and synchronize data. HTTPS server is the main requirement for installing SW.
• #24: This JSON file is used to describe progressive web app features. Here you can add such properties as app description, icon, short name, etc. Manifest file also enables creating a beautiful splash screen. Assume users added you PWA to their Home screen. They see a simple white screen until the PWA is ready. Sounds boring, huh? Make your PWA appealing from the first launch. To create a good-looking splash screen, you should add a background property to the Manifest file. And don't forget about an icon, it must be at least 512*512 px and in PNG file format.
• #25: This JSON file is used to describe progressive web app features. Here you can add such properties as app description, icon, short name, etc. Manifest file also enables creating a beautiful splash screen. Assume users added you PWA to their Home screen. They see a simple white screen until the PWA is ready. Sounds boring, huh? Make your PWA appealing from the first launch. To create a good-looking splash screen, you should add a background property to the Manifest file. And don't forget about an icon, it must be at least 512*512 px and in PNG file format.
• #26: It is a powerful tool for re-engaging users. Push notifications work thanks to service workers and Push API. It has a fixed working algorithm. With the help of the service worker's Push Manager, the user gets a pop up that suggests subscribing to push notifications. If the user agrees, the information about their subscription ID is stored in the database. Now, the SW is responsible for handling the user's data. After that, the server pushes new messages and service worker sends the push notification to user's device.
• #27: It is a powerful tool for re-engaging users. Push notifications work thanks to service workers and Push API. It has a fixed working algorithm. With the help of the service worker's Push Manager, the user gets a pop up that suggests subscribing to push notifications. If the user agrees, the information about their subscription ID is stored in the database. Now, the SW is responsible for handling the user's data. After that, the server pushes new messages and service worker sends the push notification to user's device.
• #28: It is a powerful tool for re-engaging users. Push notifications work thanks to service workers and Push API. It has a fixed working algorithm. With the help of the service worker's Push Manager, the user gets a pop up that suggests subscribing to push notifications. If the user agrees, the information about their subscription ID is stored in the database. Now, the SW is responsible for handling the user's data. After that, the server pushes new messages and service worker sends the push notification to user's device.
• #29: https://github.com/google/WebFundamentals/blob/master/src/content/en/ilt/pwa/introduction-to-push-notifications.md
• #30: It is a powerful tool for re-engaging users. Push notifications work thanks to service workers and Push API. It has a fixed working algorithm. With the help of the service worker's Push Manager, the user gets a pop up that suggests subscribing to push notifications. If the user agrees, the information about their subscription ID is stored in the database. Now, the SW is responsible for handling the user's data. After that, the server pushes new messages and service worker sends the push notification to user's device.
• #31: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #32: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #43: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #44: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #45: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #46: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #47: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #48: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #49: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #50: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.
• #51: Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers: Opera v. 32+   Chrome v. 31+   Firefox v. 589+.