[et_pb_section fb_built=”1″ fullwidth=”on” admin_label=”Header” _builder_version=”4.20.0″ use_background_color_gradient=”on” background_color_gradient_direction=”163deg” background_color_gradient_stops=”rgba(0,0,0,0.02) 50%|#ffffff 50%” background_color_gradient_start=”rgba(0,0,0,0.02)” background_color_gradient_start_position=”50%” background_color_gradient_end=”#ffffff” background_color_gradient_end_position=”0%” background_image=”https:\/\/kamil-abzalov.com\/wp-content\/uploads\/2021\/12\/web-dev-03.png” parallax=”on” animation_style=”fade” collapsed=”off” global_colors_info=”{}”][et_pb_fullwidth_header title=”Angular. Progressive Web Apps (PWA)” content_max_width=”640px” _builder_version=”4.27.7″ title_font=”Roboto|700|||||||” title_line_height=”1.5em” content_font=”Roboto||||||||” content_font_size=”16px” content_line_height=”2em” subhead_font=”|700||on|||||” subhead_font_size=”14px” subhead_letter_spacing=”2px” subhead_line_height=”2em” background_color=”rgba(0,0,0,0)” custom_button_one=”on” button_one_text_size=”14px” button_one_text_color=”#ffffff” button_one_bg_color=”#0054ff” button_one_border_width=”14px” button_one_border_color=”rgba(0,0,0,0)” button_one_border_radius=”0px” button_one_letter_spacing=”2px” button_one_font=”|600||on|||||” button_one_icon=”9||divi||400″ button_one_on_hover=”off” custom_button_two=”on” button_two_text_size=”14px” button_two_text_color=”#0054ff” button_two_bg_color=”rgba(255,255,255,0)” button_two_border_width=”12px” button_two_border_color=”rgba(0,0,0,0)” button_two_border_radius=”0px” button_two_letter_spacing=”2px” button_two_font=”|600||on|||||” button_two_icon=”9||divi||400″ button_two_on_hover=”off” background_layout=”light” custom_margin=”|||” custom_padding=”6vw||6vw||false|false” animation_style=”zoom” animation_intensity_zoom=”-5%” title_font_size_tablet=”” title_font_size_phone=”25px” title_font_size_last_edited=”on|desktop” box_shadow_style_button_two=”preset1″ box_shadow_vertical_button_two=”0px” box_shadow_blur_button_two=”0px” box_shadow_spread_button_two=”2px” box_shadow_color_button_two=”#0054ff” button_one_letter_spacing_hover=”2px” button_two_letter_spacing_hover=”2px” global_colors_info=”{}” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”2px” button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”2px” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.21.2″ _module_preset=”default” collapsed=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=”Home” hide_currentbreadcrumb=”off” _builder_version=”4.27.7″ fontsbreadcrumbs_font_size_tablet=”51″ fontsbreadcrumbs_line_height_tablet=”2″ fontsseperator_font_size_tablet=”51″ fontsseperator_line_height_tablet=”2″ fontsbreadcrumblinks_font_size_tablet=”51″ fontsbreadcrumblinks_line_height_tablet=”2″ z_index_tablet=”500″ fontsbreadcrumbs_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumbs_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumbs_text_shadow_blur_strength_tablet=”1px” fontsseperator_text_shadow_horizontal_length_tablet=”0px” fontsseperator_text_shadow_vertical_length_tablet=”0px” fontsseperator_text_shadow_blur_strength_tablet=”1px” fontsbreadcrumblinks_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]Progressive Web Apps (PWAs) are one of Angular’s most powerful built-in features. With the help of the Angular Service Worker, you can transform a regular Single Page Application (SPA) into a fast, installable, offline-capable web application that automatically updates when a new version is deployed.<\/p>\n
In this tutorial, you’ll learn how to build a Progressive Web App in Angular, configure the Service Worker, cache HTTP requests, and implement automatic update detection.[\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/qtFTReQM2Uc” disabled_on=”off|off|off” _builder_version=”4.27.7″ hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_video][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
A Progressive Web App (PWA) is a web application that delivers a user experience similar to a native mobile app.<\/p>\n
Some of the main benefits of a PWA include:<\/p>\n
At the heart of every PWA is the Service Worker<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
The behavior of Angular’s Service Worker is defined inside the ngsw-config.json file (see the code below).<\/p>\n
The assetGroups section defines which static resources should be cached.<\/p>\n
In this example, Angular caches:<\/p>\n
After the initial visit, these files are served directly from the cache, resulting in significantly faster page loads.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
Angular Service Worker can cache more than just application assets\u2014it can also cache HTTP API responses.<\/p>\n
This is done using the dataGroups section.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
One of the biggest advantages of PWAs is automatic application updates.<\/p>\n
Angular provides the SwUpdate service for this purpose.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
Once your PWA is configured, it’s a good idea to analyze it using Lighthouse in Chrome DevTools.<\/p>\n
Lighthouse evaluates several important aspects of your application, including:<\/p>\n
A properly configured Angular PWA should achieve an excellent Lighthouse score.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.7″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
Angular provides almost everything you need to build a modern Progressive Web App out of the box. By configuring the Service Worker and the ngsw-config.json file, your application gains several powerful features:<\/p>\n
If you’re building a modern Angular application, adding PWA support is one of the easiest ways to improve performance, reliability, and the overall user experience\u2014all without relying on third-party libraries.<\/p>\n
[\/et_pb_text][et_pb_dmb_code_snippet title=”ngsw-config.json” code=”ewogICIkc2NoZW1hIjogIi4vbm9kZV9tb2R1bGVzL0Bhbmd1bGFyL3NlcnZpY2Utd29ya2VyL2NvbmZpZy9zY2hlbWEuanNvbiIsCiAgImluZGV4IjogIi9pbmRleC5odG1sIiwKICAiYXNzZXRHcm91cHMiOiBbCiAgICB7CiAgICAgICJuYW1lIjogImFwcCIsCiAgICAgICJpbnN0YWxsTW9kZSI6ICJwcmVmZXRjaCIsCiAgICAgICJyZXNvdXJjZXMiOiB7CiAgICAgICAgImZpbGVzIjogWwogICAgICAgICAgIi9mYXZpY29uLmljbyIsCiAgICAgICAgICAiL2luZGV4LmNzci5odG1sIiwKICAgICAgICAgICIvaW5kZXguaHRtbCIsCiAgICAgICAgICAiL21hbmlmZXN0LndlYm1hbmlmZXN0IiwKICAgICAgICAgICIvKi5jc3MiLAogICAgICAgICAgIi8qLmpzIgogICAgICAgIF0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgIm5hbWUiOiAiYXNzZXRzIiwKICAgICAgImluc3RhbGxNb2RlIjogImxhenkiLAogICAgICAidXBkYXRlTW9kZSI6ICJwcmVmZXRjaCIsCiAgICAgICJyZXNvdXJjZXMiOiB7CiAgICAgICAgImZpbGVzIjogWyIvKiovKi4oc3ZnfGN1cnxqcGd8anBlZ3xwbmd8YXBuZ3x3ZWJwfGF2aWZ8Z2lmfG90Znx0dGZ8d29mZnx3b2ZmMikiXQogICAgICB9CiAgICB9CiAgXSwKICAiZGF0YUdyb3VwcyI6IFsKICAgIHsKICAgICAgIm5hbWUiOiAidXNlcnMtYXBpIiwKICAgICAgInVybHMiOiBbImh0dHBzOi8vanNvbnBsYWNlaG9sZGVyLnR5cGljb2RlLmNvbS91c2Vycy8iXSwKICAgICAgImNhY2hlQ29uZmlnIjogewogICAgICAgICJzdHJhdGVneSI6ICJmcmVzaG5lc3MiLAogICAgICAgICJtYXhTaXplIjogMTAwLAogICAgICAgICJtYXhBZ2UiOiAiMWgiLAogICAgICAgICJ0aW1lb3V0IjogIjNzIgogICAgICB9CiAgICB9CiAgXQp9Cg==” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.7″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”app.ts” code=”aW1wb3J0IHsgQ29tcG9uZW50LCBpbmplY3QsIFNpZ25hbCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7CmltcG9ydCB7IEh0dHBDbGllbnQgfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7CmltcG9ydCB7IHRvU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnOwppbXBvcnQgeyBTd1VwZGF0ZSwgVmVyc2lvbkV2ZW50IH0gZnJvbSAnQGFuZ3VsYXIvc2VydmljZS13b3JrZXInOwoKQENvbXBvbmVudCh7CiAgc2VsZWN0b3I6ICdhcHAtcm9vdCcsCiAgaW1wb3J0czogW10sCiAgdGVtcGxhdGVVcmw6ICcuL2FwcC5odG1sJywKICBzdHlsZVVybDogJy4vYXBwLmNzcycsCn0pCmV4cG9ydCBjbGFzcyBBcHAgewogIHByb3RlY3RlZCB1c2VyczogU2lnbmFsPGFueT4gPSBzaWduYWwoW10pOwoKICBwcml2YXRlIGh0dHAgPSBpbmplY3QoSHR0cENsaWVudCk7CgogIGNvbnN0cnVjdG9yKHByaXZhdGUgc3dVcGRhdGU6IFN3VXBkYXRlKSB7CiAgICB0aGlzLnVzZXJzID0gdG9TaWduYWwodGhpcy5odHRwLmdldCgnaHR0cHM6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3VzZXJzLycpKTsKICAgIGlmIChzd1VwZGF0ZS5pc0VuYWJsZWQpIHsKICAgICAgdGhpcy5zd1VwZGF0ZS52ZXJzaW9uVXBkYXRlcy5zdWJzY3JpYmUoKGV2ZW50OiBWZXJzaW9uRXZlbnQpID0+IHsKICAgICAgICBjb25zb2xlLmxvZygnRXZlbnQgdHlwZScsIGV2ZW50LnR5cGUpOwogICAgICB9KTsKCiAgICAgIHRoaXMuc3dVcGRhdGUuY2hlY2tGb3JVcGRhdGUoKS50aGVuKChoYXNVcGRhdGUpID0+IHsKICAgICAgICBpZiAoaGFzVXBkYXRlKSB7CiAgICAgICAgICBjb25zb2xlLmxvZygnTmV3IHZlcnNpb24gYXZhaWxhYmxlLCBjbGljayBvayB0byByZWZyZXNoJyk7CiAgICAgICAgICB3aW5kb3cubG9jYXRpb24ucmVsb2FkKCk7CiAgICAgICAgfQogICAgICB9KTsKICAgIH0KICB9Cn0K” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.7″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
Progressive Web Apps (PWAs) are one of Angular’s most powerful built-in features. With the help of the Angular Service Worker, you can transform a regular Single Page Application (SPA) into a fast, installable, offline-capable web application that automatically updates when a new version is deployed. In this tutorial, you’ll learn how to build a Progressive […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[256,219],"tags":[],"class_list":["post-37100","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"\n