Nothing Special   »   [go: up one dir, main page]
Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js
    Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js
    Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js
    Ebook255 pages59 minutes

    Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js

    By Carlos Rojas

    ()

    Read preview

    About this ebook

    Obtain all the necessary tools for developing a progressive web application (PWA) with Vue.js, a modern JavaScript framework. You’ll see how PWAs behave like a regular responsive website and have a similar structure to that of a web application, but feel like a native mobile app. Along the way you’ll take advantage of Vue.js features to build fast, high-performing progressive web apps that work offline. 
    Building Progressive Web Applications with Vue.js starts by explaining the basic concepts and structure of PWAs, and moves on to designing the app shell and other features that distinguish a PWA from simple web pages. In the following chapters, the book talks about the improved web technologies, such as service workers, caching strategies, background sync, and push notifications, that make PWAs powerful.
    What You Will Learn
    • Harness the power of Vue.js to build PWAs 
    • Understand the function and relevance of a manifest file
    • Discover service workers and why they are revolutionary
    • Work with the Cache API and caching strategies
    • Use IndexedDB, background sync, and push notifications
    • Enhance your apps with Firebase
    • Implement the Workbox library in your apps

    Who This Book Is ForWeb developers who want to venture into building PWAs would find the book useful.
    LanguageEnglish
    PublisherApress
    Release dateDec 14, 2019
    ISBN9781484253342
    Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js

    Related to Building Progressive Web Applications with Vue.js

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Set Up Your First Database

      Aug 25, 2020

      Set Up Your First Database
      1 min read

    • Article

      Fast And Easy Image Processing

      Apr 4, 2023

      Credit: https://github.com/oguzhaninan/korkut Shashank Sharma is a trial lawyer in New Delhi and an avid Arch user. He’s been writing about open source software for 20 years and lawyering for 10. You wouldn’t think of the command line as the go-to re

      4 min read

    • Article

      Amd Budget Gaming Rig

      Oct 10, 2023

      Amd Budget Gaming Rig
      8 min read

    • Article

      Create Dashboards

      Sep 17, 2024

      Create Dashboards
      5 min read

    • Article

      One File, Many Possibilities

      Sep 5, 2023

      One File, Many Possibilities
      2 min read

    • Article

      What’s A Switch?

      Jan 11, 2021

      What’s A Switch?
      1 min read

    • Article

      Wave Goodbye

      Jul 7, 2022

      Wave Goodbye
      3 min read

    • Article

      Spice It Up With Rhythm

      Oct 2, 2019

      Spice It Up With Rhythm
      3 min read

    • Article

      Strength FOR MILES

      Aug 3, 2023

      Strength FOR MILES
      5 min read

    • Article

      Umami

      May 23, 2021

      Umami
      2 min read

    • Article

      Building ‘Punga’

      Dec 13, 2021

      Building ‘Punga’
      11 min read

    • Article

      Editor’s Letter

      Feb 10, 2022

      Editor’s Letter
      1 min read

    • Article

      Melt-in-your-mouth Cheese

      Oct 12, 2022

      Melt-in-your-mouth Cheese
      2 min read

    • Article

      Google Answer Box Strategy

      Sep 21, 2020

      Leveraging the Google PAA (People Also Ask) element on a Search Results Page for Targeted Content Creation with a Python Scraper All businesses that are online today are creating content at a furious pace. According to Technavio, a research firm, con

      7 min read

    • Article

      Top 7 Rules For Healthy Finances

      Jul 2, 2021

      THIS week we take a look at some important financial principles to observe if you want to create wealth rather than just survive from month to month. If you start following even one of these, it could make a big difference to your finances in the lon

      3 min read

    • Article

      My Never-Ending Childhood Passion

      Feb 9, 2023

      My Never-Ending Childhood Passion
      5 min read

    • Article

      Your Robot Car Should Ignore You

      May 11, 2017

      In 2014, Google fired a shot heard all the way to Detroit. Google’s newest driverless car prototype had no steering wheel and no brakes. The message was clear: Cars of the future will be born fully autonomous, with no human driver needed or desired.

      13 min read

    • Article

      Tips & Tricks

      Feb 6, 2019

      Tips & Tricks
      4 min read

    • Article

      A Mosaic Of Data

      Sep 20, 2022

      A Mosaic Of Data
      1 min read

    • Article

      Speed And Efficiency

      Jun 28, 2022

      Raspberry Pi OS was the lightest of the five distributions on test in this month’s Roundup. It took 29 seconds to boot into the desktop. At this point, we opened a terminal and typed code free-h, which showed that 266MB was in use. We then launched C

      1 min read

    • Article

      Build Your Own Drone

      Jan 11, 2021

      Build Your Own Drone
      6 min read

    • Article

      1Password 8

      Mar 21, 2022

      1Password 8
      2 min read

    Related categories

    Reviews for Building Progressive Web Applications with Vue.js

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Building Progressive Web Applications with Vue.js - Carlos Rojas

      © Carlos Rojas 2020

      C. RojasBuilding Progressive Web Applications with Vue.js https://doi.org/10.1007/978-1-4842-5334-2_1

      1. Making Your First Progressive Web App

      Carlos Rojas¹  

      (1)

      Medellin, Colombia

      Welcome to this journey of building your first progressive web app (PWA). In this chapter, we build VueNoteApp, which is a simple notebook app, and then convert it to a PWA, all while discovering some critical concepts along the way.

      What Is a PWA?

      PWAs are a trend that points to where web development is evolving. Therefore, it is essential to be exposed to this technology and spend some time studying it.

      PWAs are the intersection between a web interaction and a mobile app user experience. Some of the features you’ll find in PWAs are as follows¹:

      Progressive: They work for every user.

      Adaptable: Their functionality adapts to the device regardless of whether it is a mobile, desktop, tablet, and so on.

      Connectivity independent: They support offline functions, in addition to low-quality connections or LiFi.

      App style: For users, PWAs are similar to a downloadable app from a store.

      Fresh: Thanks to their caching strategies, they are updated every time a connection is available.

      Secure: They work with HTTPS.

      Discoverable: Search engines are capable of indexing PWAs and detecting them as apps.

      Able to be reengaged: They allow push notifications after users install them, similar to apps you download from a store.

      Installable: They allow users to have the app available on their device with an access icon, just like apps that download from a store.

      Linkable: They can be shared easily with a URL.

      To become familiar with the power of PWAs, check out https://pwa.rocks/.

      Why Build a PWA?

      PWAs open a new universe of possibilities to extend capabilities in web apps and provide users with a familiar experience. Some advantages in choosing to build PWAs instead of using other technologies are as follows:

      Web platform: Web capabilities are robust and extended in the major mobile and desktop operating systems.

      Web developers: Start in web developing is accessible and inclusive. All web technologies are open; you don’t have software restrictions.

      Distribution: Web browsers are distribution channels. PWAs are shared easily with URLs.

      Easy deployment: You don’t need to wait for approval of fixes or new features; just push your code to your server and, instantly, you have a new version.

      Low friction: App stores are a stressful experience for beginning users. With PWAs, you only need a link to install them.

      What Is the Structure of a PWA?

      Progressive applications are, in general terms, a regular Single Page Aplication. That is, they have the regular structure of a web app or single-page application (SPA), with an index (index.html) and HTML, Cascading Style Sheets (CSS), and JavaScript (JS) files. But, in addition to these items, three other things are required to be considered a PWA:

      1.

      A manifest file: A file that describes the information in the PWA

      2.

      An app icon: An image used as an icon on mobile devices when installed

      3.

      Service workers: A JS file registered in the browser that allows tasks such caching and pushing notifications, among other things

      So, this is what we are going to create next, after we go over some prerequisites.

      Getting Started

      To start to build our first PWA, we need to examine and install some technologies.

      Node.js

      Node.js is a JS runtime environment. Most of the projects using JS use Node to install dependencies and create scripts to automate the development workflow.

      You install Node on your machine by downloading it from https://nodejs.org/en/.

      After you download the installer, run it (Figure 1-1).

      ../images/483082_1_En_1_Chapter/483082_1_En_1_Fig1_HTML.jpg

      Figure 1-1

      Node.js installer package

      Follow the instructions. Figure 1-2 shows the welcome page.

      ../images/483082_1_En_1_Chapter/483082_1_En_1_Fig2_HTML.jpg

      Figure 1-2

      Installer step 1

      When this is complete, open your terminal and run

      $node -v

      If everything is okay, you’ll see the Node version in your terminal (Figure 1-3).

      ../images/483082_1_En_1_Chapter/483082_1_En_1_Fig3_HTML.jpg

      Figure 1-3

      Terminal node version command

      npm

      When you install Node.js, you install npm, which is a package manager for JS. It is the default package manager for Node and it consists of a command-line client, called npm, and an online database of packages called the npm registry.

      Check the version of npm you are running (Figure 1-4):

      $npm -v

      ../images/483082_1_En_1_Chapter/483082_1_En_1_Fig4_HTML.jpg

      Figure 1-4

      Terminal npm version command

      Google Chrome

      Chrome is a web browser that provides excellent support to PWAs and includes Chrome DevTools, which is a handy feature for developers. You can download and install from

      https://www.google.com/chrome/

      To install, just run the installer and follow the steps. The result is shown in Figure 1-5.

      ../images/483082_1_En_1_Chapter/483082_1_En_1_Fig5_HTML.jpg

      Figure 1-5

      Google Chrome installed

      Chrome DevTools

      As mentioned, Chrome DevTools (Figure 1-6) is a set of web developer tools included in the Google Chrome browser. DevTools helps developers diagnose problems in their apps and makes their apps faster.

      Enjoying the preview?
      Page 1 of 1