over 5 years ago
1091 Seen
pwa rails

How To Add Progressive Web App in Ruby on Rails

How To Add Progressive Web App in Ruby on Rails - Progressive web applications are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications.

Now i'll show you how to integrate PWA with my favorite framework Ruby on Rails.

Add Service Worker to Rails App

Installation

Add this line to your application's Gemfile:

gem 'serviceworker-rails'

And then execute:

$ bundle

To set up your Rails project for use with a Service Worker, you either use the Rails generator and edit the generated files as needed, or you can follow the manual installation steps.

After bundling the gem in your Rails project, run the generator from the root of your Rails project.

$ rails g serviceworker:install

The generator will create the following files:

config/initializers/serviceworker.rb - for configuring your Rails app
app/assets/javascripts/serviceworker.js.erb - a blank Service Worker script with some example strategies
app/assets/javascripts/serviceworker-companion.js - a snippet of JavaScript necessary to register your Service Worker in the browser
app/assets/javascripts/manifest.json.erb - a starter web app manifest pointing to some default app icons provided by the gem
public/offline.html - a starter offline page

It will also make the following modifications to existing files:

Adds a sprockets directive to application.js to require serviceworker-companion.js
Adds serviceworker.js and manifest.json to the list of compiled assets in config/initializers/assets.rb
Injects tags into the head of app/views/layouts/application.html.erb for linking to the web app manifest

NOTE Given that Service Worker operates in a separate browser thread, outside the context of your web pages, you don't want to include serviceworker.js script in your application.js. So if you have a line like require_tree . in your application.js file, you'll either need to move your serviceworker.js to another location or replace require_treewith something more explicit.

Almost Done , Now You Can Access Your Web Without Internet

You can modify the style in public/offline.html

for more information about gem you can visit https://github.com/rossta/serviceworker-rails

Add a manifest to your Application

PWA read manifest.json as your Application name, icon, splash screen and color. so you can generate it in https://app-manifest.firebaseapp.com/

that the screenshot from manifest generator, so click generate button. an copy manifest.json and images folder to public/ folder from your application