In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

3 Essential Steps to Convert Your Website to a Progressive Web App

3 Essential Steps to Convert Your Website to a Progressive Web App

by Silviu Serdaru on Jul 24 2018

Thinking to convert your website to a progressive web app? And why shouldn't you?

Since the benefits are obvious:

 

  1. you “end up” with a website behaving like a native web app
  2. … one that works offline (and “offline” is the new black these days, right?), having its own home-screen icon 
  3. improved user experience: not only that your site goes mobile, but users don't even need to get your site-turned-into-an-app downloaded from an app store and then installed on their devices

     

Furthermore:

Putting together a PWA out of a regular website (or blog) is unexpectedly easy! Basically, any site/blog can be turned into a progressive web app...

No need to let yourself discouraged by terms such as:

 

  • service workers
  • web app manifest (or “manifest.json)

     

… for the whole process is actually far less complex than it sounds.

Here, see for yourself: go through the 3 essential steps it takes to convert your website to a progressive web app:

 

But First: All You Need to Know About PWAS— Benefits & Common Misconceptions

A succinct and clear enough definition of progressive web apps would be:

A PWA is a website that behaves like a native mobile app once visited on a mobile device.

Whereas a more detailed and comprehensive one would go something like this:

A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too.

And now, without getting into the old “native mobile app vs PWAs” debate, let me point out to you some of progressive web apps' most “luring” benefits:

 

  • as compared to native apps, the setup process, on users' end, is significantly simplified: PWAs get instantly installed on their home screens, with no need to visit an app store for that
  • they can get accessed offline, as well, via the home screen icon (a huge step forward from responsive web design)
  • installation is conveniently lightweight: a few hundred KB
  • essential files get cached locally (needless to say that this makes them faster than the standard web apps)
  • they feature modern web capabilities: push notifications, cameras, GPS
  • updates are run automatically, with no user interaction
  • not only that they work offline, too, but once the network connection is restored, they synchronize the data 

     

And now, before we virtually convert your website to a progressive web app, let's go, briefly, through some of the most common misconceptions about PWAs:

 

a. A progressive web app is literally an... “application”.

Not necessarily:

A progressive web app can be a blog, an online shop, a collection of... dog memes, you name it.

Do not take the term “application” too literally when referring to PWAs. It's more of a concept, a code optimization technique which, once leveraged, "turbocharges” your app-like website or blog to deliver content faster.

 

b. Progressive Web Apps Are Developed Specifically for iOS or Android.

On the contrary! Probably one of PWAs' “hardest to resist to” advantage is that:

They're platform-independent.

So, you don't need to:

 

  • develop separate codebases
  • comply with platform-specific submission guidelines

     

c. Your Site Has to Be a JS-Based Single Page One So You Can Turn it Into a PWA.

Nothing of that sort!

If you're currently running... something on the web (be it a set of static HTML files), then you can easily make a PWA out of it! 

And now, let's go straight to the 3-step set up process of a PWA out of your regular website:

 

Step 1: Go HTTPS to Convert Your Website to a Progressive Web App

There's no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps!

All data exchanges need to be served on a secure domain: over an HTTPs connection!

And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority.

Now, there are 2 ways to get hold of it:

 

  1. if your site runs on your own server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate.
  2. if your website runs on a shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.

     

Step 2: Create a Web App Manifest 

“But what is a web app manifest?”, you might ask yourself.

A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name...

It's this information that will let browsers know how precisely they should display your app once saved as a home-screen icon.

Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that:

A link to this JSON text file should be placed in the <head> of all your PWA's pages:

<link rel="manifest" href="/manifest.json">

That, of course, after you've:

 

  1. entered all the information about your PWA
  2. copied the manifest.json
  3. created a new “manifest.json” file in the root directory of your site
  4. and pasted it there 

It should be served with:

 

  1. Content-Type: application/json HTTP header or
  2. a Content-Type: application/manifest+json

     

And here's a “sample” piece of code:

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}

Once the “Manifest” section of the Chrome's Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices.

Tip: as you convert your website to a progressive web app you don't necessarily need to configure the manifest.json file yourself — with all its different images sizes, meta tags etc. Instead, if you want to make it quick, you can just make a 500x500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you!

And this is just one of the generators you could use!

 

Step 3: Set Up Your Service Worker

This is where the “true power” of your PWA lies:

A service worker is a JavaScript file, placed in your app's root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways.

Note: in most cases, it's for caching all the static files, so that our PWAs can function offline, too, that we use service workers.

Now that we've seen what a service worker is, here's how you create one as you convert your website to a progressive web app:

 

a. You get it registered first things first.

For this, just run this code in the JS file on your site:

 if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file.

Note: NEVER call this file, inside your website, like this:

<script src="./service-worker.js"></script> 

b. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file.

Users will just be notified to install it on their devices!

 

c. Once you've registered your Service Worker, generate your Service Worker file, too.

For this, just run this command in your terminal:

$ npm install --global sw-precache

Next, go ahead and run it on your website directory:

$ sw-precache

Et voila! You will have generated a service-worker.js including the service worker contents.

 

Test It Out!

At this stage of the "convert your website to a progressive web app" process, you should:

 

  1. check whether your service worker got properly registered and installed on Chrome
  2. run a performance audit on your PWA, using Chrome's Lighthouse Extension

     

For the first operation, go through these 3 basic steps here:

 

  1. press F12 to open your Chrome Dev Tools
  2. click on the “Application” tab
  3. next, on the sidebar, select “Service Workers” 

     

Then, check whether your service worker has been properly activated and is running normally:

Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there's no internet connection?

Now let's run an audit using Chrome's dedicated testing tool, Lighthouse:

 

  1. press F12 again to visualize the Chrome Dev Tools
  2. select the “Audits” tab
  3. then select “Perform an audit”
  4. check all the suggested checkboxes
  5. and finally, run the audit 

     

And here's how the generated report would look like:

Convert Your Website to a Progressive Web App: Running a Performance Audit with Lighthouse

The END! This is how you convert your website to a progressive web app in 3 steps:

 

  1. enabling HTTPS
  2. configuring your web app manifest
  3. creating your service worker

     

See? Any website can be turned into a PWA and you don't need to be a senior developer to do it.

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 1)
Overwhelmed with options? Are you building your first (e-commerce) headless CMS and you don't know what headless CMS platform to choose?  What are the best headless CMS in 2020, so you can at least narrow down your choices and start... somewhere? Which system matches most of your feature requirements? Here's a top 10: 1. But First: What Is a Headless CMS, More Precisely? Relax, I won't bore you with too many details — we already have an in-depth post on the differences between headless and traditional CMS. So, if we were to sum up the concept in just a few words, we could say that: A headless content management system is an architecture where content is separated from the presentation layer (the client-side front-end). Meaning that you get to create, store, and edit "raw" content (with no design or layout) in the backend and deliver it wherever needed —wearable, mobile app, website — via API. In short, what you get in a headless architecture is: a database to store your content in a dashboard for editing your content Source: Zesty.io As for the "head" that serves your content to the end-user : you're free to build your own front-end, from the ground up … and even multiple front-ends, if needed, that will all use calls from the API to retrieve and display content 2. … Then What's a Decoupled CMS? Headless CMS vs decoupled CMS: what's the difference? And why headless over decoupled? The role that the API plays… That's what makes the difference (and why you'd want to go for a headless approach): If, in a decoupled architecture, the API plays the role of an intermediary between back-end and front end, in a headless architecture the API can be used by any of the front-end portions for pulling data. In other words, a decoupled CMS does come with a built-in front-end delivery layer, that you can rely on, but a headless approach is an API-driven content repository. Which gives you more flexibility for delivering content to any type of display layer. … to multiple "heads". You're free to distribute it wherever it needs to get displayed. 3. Why Choose a Headless CMS? Top 9 Benefits Before I "divulge" the best headless CMS in 2020 to you, here's a shortlist of the key advantages of using a headless CMS software: you get to engage your customers with personalized content across an entire network of digital channels, at different stages in their journey you can deliver richer digital experience, tailored to each channel you gain platform independence you're free to choose your technology of choice you benefit from cross-platform support you get to manage your content from a central location and distribute it to multiple platforms/IoT-connected devices, in a universal format you're free to manage all your platforms from one interface your development team gets to choose the development framework of their choice, integrate new technologies and, overall… innovate you're free to redesign as often as you need to, without the dread of re-implementing your entire CMS from the ground up     4. … And When Should You Use It? 5 Best Use Cases  How do you know for sure that you need to adopt this approach? You know it because your scenario describes one of the following use cases for headless CMS: you're building a site using a technology you're familiar with you're building a website with a static site generator you're building a JS-based website or web app you're building a native mobile app you're building an e-commerce site and you know that the commerce platform you're using won't… cut the mustard as a CMS; or you need to enrich product info in your online store 5. What Are the Best Headless CMS in 2020? Top 10 "Which CMS should I use?" you wonder. "The one that meets most of your requirements…" So, you should start by pinning them down. What features are you looking for in a CMS? Maybe you need a system that should: be straightforward and easy to use for the marketers/non-technical people in your team be built on… Node be highly customizable and editable for your content team to be able to change overlay text, logo, background video/image be simple to set up integrate easily with Gatsby support multi-site setups not be tied up to (just) one specific database provide ease of content entry and rich-text support provide a granular permission system provide native support for content types What are the features that your project couldn't live without? Now, with that list of "mandatory" features at hand, just drill down through your top headless CMS options in 2020. Here they are: 5.1. Storyblok A purely headless CMS that ships with a visual editor, as well. Why would you go for Storyblok? What makes it one of the best headless CMS in 2020? it provides the experience of a page builder for all those non-technical users in your team: editors get to manage content via a more user-friendly interface it grants your developers easy access to the APIs they need 5.2. Prismic Its major selling point? It allows you to choose your own language, framework, technology… And these are the 3 good reasons to go with Prismic as your headless CMS: it allows you to model your content schema and to add your content you're free to choose whatever framework that meets your feature needs: React, Vue, Next, Nuxt, Node, Gatsby… you're free to choose either GraphQL or RESTful API to query content 5.3. Drupal 8 Headless CMS   Another great option is to exploit Drupal's headless capabilities and pair them with the JavaScript framework of your choice. Here are some of the best reasons why you'd use a Drupal 8 API-first architecture: Drupal's a mature and enterprise-level headless solution backed by a wide community, used by more than 1 million sites globally; you get to tap into its massive module collection and even create new custom ones to extend your website's functionality its JSON:API follows the JSON:API specification; developers in your team can start using the API even if they're not experts in working with Drupal you get to load your GraphQl schemas straight from your Drupal content repository; there's a specialized module for this: the GraphQL module you get to use all of  Drupal's famed features (granular access to content, processes, workflows, modules, etc.) right away; you get them out-of-the-box since the REST API is… rooted deep into Drupal 5.4. Strapi, One of the Best headless CMS for Gatsby. It's an open-source Node.js headless CMS, a "host it yourself" one, that allows you to build Node.js apps in… minutes. Why would you use it? because it generates available RESTful API or uses GraphQL shortly after installation, making data available via customizable API because it allows your developers to invest all their resources in writing reusable app logic (instead of having to use some of that time to build an infrastructure) because it's fully JavaScript because it supports plugins that extend the platform's functionality because it's open-source: you'll find the entire codebase on GitHub  5.5. Contentful  Looking for a platform-agnostic solution? A… content delivery network that would enable your development team to manage and distribute (and reuse) content to multiple channels? Then this is the API-driven headless CMS you're looking for. Here are 6 other reasons why you'd want to put Contentful on your shortlist: consistent APIs easy to set up you're free to create your own models easy to use: ships with a robust, non-technical, user-friendly UI you get to add custom plugins quick and easy you get to set your own schemas to get displayed the way you want them to, across different apps Good to know! There's even a Shopify extension available. What it does is connect your online store to your content, stored in Contentful. And if you'll need help with building, fine-tuning, and integrating your content hub, we're ready to tweak Contentful to your needs.  END of Part 1! Stay tuned, for there are 5 more candidates for the title of "the best headless CMS in 2020" waiting in line.  Image by Couleur from Pixabay ... Read more
Adriana Cacoveanu / Sep 25'2020
Why Use Node.js with React? 11 Reasons Why You Should Hook Up Your React App with a Node Back-end
So, you’d like to build an app with React. And, while weighing your back-end options, you ask yourself: “Why use Node.js with React?” Why would you go with Node for hosting and running your web server? Why not… Ruby on Rails? Or maybe Python/Django? This is precisely what you’ll find in this post: the 11 main reasons why you’d want to choose Node.js as a backend for your React web app: 1. But First: What Is the Difference Between ReactJS and Node.js? We already have a blog post focused precisely on the React vs Node dilemma, so in today’s post I’ll only pinpoint, briefly, the main differences between the 2 technologies:   While ReactJS is a front-end library, Node.js is a highly popular choice for back-end development (thanks to its event-driven nature and to being asynchronous and highly scalable)   While React provides you with a language to describe the user interface of your web application, Node.js helps you with all sorts of (back-end) things like setting up your server, building CLI tools, scripting; a key difference to help you solve your “React vs Node.js” dilemma   While ReacJS helps you build your UI components, Node.js stores your app’s data in the backend   While React is web app developers’ top choice to address challenges like low performance and slow user interface, Node.js is the go-to technology for creating enterprise-level solutions based on WebSockets, event quests, and microservice architecture. 2. Does ReactJS (Really) Require Node?  In other words, do you need to have a Node.js backend to run React? No, you don’t. Node.js is not required for running Reactjs. So, why use Node.js with React? There are certain use cases and reasons why you’d want to pair the 2 technologies for building your app: you cut down on your web app development time (which always has a major business impact) the Node.js and React duo is your ticket to scalable and efficient code … But more on the strongest reasons why you’d use Reactjs with Node down below... 3. Why Use Node.js with React? 11 Top Reasons Now, going back to your initial question — “Why do you need Node.js for React?” — here are the key reasons why you’d go with this “duo”: 3.1. Because they’re both JavaScript: you can execute them server-side and client-side The benefits you get from having a JS-based technology in the back-end, as well, are obvious: you only need to be familiar with JavaScript (no Ruby or Python expertise needed) same language means… same packages same language means that you get to speed up your app’s development process 3.2. Because you get to inject V8 engine performance into your React app In other words, your React app will be perfectly equipped to handle bulk requests with no compromise on quality. The V8 engine that Node.js uses grants your app the best page load times. 3.3. Because you get a collection of NPM packages to choose from With the NPM CLI at your disposal, you get to install any of the packages available in the registry quick and easy. 3.4. Why use Node.js with React? Because the “duo” helps you address high server load issues  They work perfectly together to help your app handle multiple client requests while striking a server load balance. 3.5. Because Node.js bundles your app into a single, easy-to-compile file Using various modules along with Webpack, Node Js bundles your app into one file. One that can get compiled much easier... 3.6. Because it’s a real-time, data-intensive React app that you’re building. Does your React application depend on Data Streaming or Data-Intensive, Real-Time management? Is interactivity a major requirement for your web app? Is it a real time application that you have in mind? Then Nodejs makes the best choice for continued server connection in a context of intensive computation. 3.7. Because you get to run React.js code straight in the Nodejs environment 3.8. Because you get to scale your React &amp; Node.js app to much higher loads A Node.js back-end will help your app accommodate many more users and many more future calls.  It's your best option for building scalable applications. The 2 giants are using Node.js precisely for its great scalability potential. 3.9. Because you get to build JSON APIs for your app much easier when using Node and React together How come? You get to share and reuse code in React.js quick and easy when you pair it with Node.js in the back-end. 3.10. Because rendering server-side becomes a more streamlined process Since React DOM comes with components built to work with Nodejs out of the box, you get to cut down on the lines of code.  Which translates into streamlined server-side rendering.   3.11. Because it’s a single-page React app that you’re building The “React with Node.js” duo makes the best choice for building a SPA. The lightweight Node backend will be in charge of handling asynchronous data loading via callback functions. 4. In Short, You’d Want to Use React and Node.js Together Because... “Why use Node.js with React?” As a conclusion, we could narrow down the entire list to just 2 key reasons:   Convenience: same language in the back-end and the front-end; Node.js makes the go-to option for running and hosting a web server for your React app   ReactJS depends on Node and npm (Node Package Manager) to notify the native side (iOS/Android) of the packages that you need to use in your app; then, it can add all the needed dependencies. The END! Now that you know why and when you’d want to use React with Node.js: how do you build that high-performance, conveniently scalable React &amp; Node.js app? We’re here to help you get the most of these 2 technologies. Just drop us a line to have a team of React and Node Js developers handle your project. Image by Anemone123 from Pixabay ... Read more
Adriana Cacoveanu / Sep 16'2020
Create React App vs Next.js: Which One Should You Go With for Building Your Next App?
You're about to start working on a new app project and you're confused: Create React App vs Next.js - what's the difference?  Which option's best for you? Considering your SEO,  SSR, API, and performance needs. And they're frustratingly similar: they both enable you to build React apps without the need to use Webpack for bundling it (or the need to do any code splitting) they both make it possible for you to have your React app up and running in no time Still, each framework comes with its own pros and cons and specific use cases. So, in this post, you'll find your answers to the following questions: What are the key differences between CRA and Next.js? What are the main benefits of using Next.js? What are the main benefits of using Create React App? What are the downsides of Next.js? What are the downsides of Create React App? When would you want to use one over the other? 1. What's the Key Difference Between CRA and Next.js? SSR vs CSR... It's where all their differences stem from. Next.js apps are rendered on the client-side (CSR), but the framework supports server-side rendering (SSR), as well. By comparison, Create React App apps are rendered only on the client-side. In other words: CRA generates HTML code in the client browser, whereas Next.js generates it in the server, based on the URL.  So, your "Create react App vs Next.js" dilemma comes down to whether a static page meets your needs or not entirely. 2. What Are the Main Benefits of Using Next.js? Now that you know what's the fundamental difference between the 2 systems for building React apps, let's put the spotlight on Next.js. Why would you choose it? because it's so simple to set up, build, and even host a Next.js app: you have packages for almost all the key additions that call for Webpack configuration (SaSS, CSS, TS...) because rendering React apps becomes much easier, regardless of where the data comes from because you can benefit from automatic server rendering and code splitting (that will increase performance) because SSR (server-side rendering) will give your app a major performance boost  because it's a lightweight framework for both static and server-rendered universal JS apps because it's good for SEO (with everything being generated from the server...) 3. Create React App vs Next.js: What Are the Main Benefits of Using CRA? In a "Next.js vs create-react-app" debate, what are the strongest reasons for opting for CRA to build your React app? it's easier to deploy you get to build a single page React app with... zero configuration (no time-consuming setup needed) you don't need to deal with Webpack or Babel it's plain simple (an empty div and just a few js files) and provides all the needed HTML code to render your app on the client-side  the development process is much smoother better developer experience In short, with Create React App you basically run just one command and the framework sets up all the tools you need to start developing your app on the spot. 4. What Are the Downsides of Next.js? What could make you think twice before choosing Next.js for building your next app? the fact that it's opinionated: there's a Next.js way of doing things and you're constrained to... adjust to it if you later want to use a router different from its own filled-based one (or add Redux maybe), you'll discover that it's not that flexible  5. What Are the Downsides of Create React App? In a "Create React App vs Next.js" debate, why would you rule out CRA? because it only supports client-side rendering, which is not enough if it's a high-performing app that you want to build because no code splitting translates into lower performance because it's not good for SEO (since it doesn't render pages on the server) 6. When Would You Want to Use Next.js? As a rule of thumb, use Next.js: if you need to build a fast, production-ready app (SSR injects top speed into your React application) if public SEO is a crucial factor for your app project if it's a dynamic page that you need to create (wihout having to write your own bundling) if it's an eCommerce app that you're building (Next.js is more suited for the cart, the stock inventory, and other highly dynamic pages) 7. When Would You Want to Use Create React App? When would you choose it over Next.js? when you need to build a React app really fast; with CRA you can skip the configuration and the setting up part when you need to create a landing page for a product: Create React App makes it so much simpler to put it together when it's a SPA that you need to build 8. In Conclusion... CRA is easy, while Next.js "seduces" you with better performance and SEO. Is it a single page React app that you need to get up and running fast and you don't need SSR? Create React App might just be the best choice for you. Is it a fast-loading app that you're building? Is performance business-critical for you and SEO much more than just a nice-to-have? You might want to consider Next.js then for your next app. Need a team of experienced app developers to build it for you? Just send us your feature list and... let's build it! Image by Pexels from Pixabay   ... Read more
Silviu Serdaru / Aug 07'2020