monsoonconsulting / magento2-pwa Goto Github PK

View Code? Open in Web Editor NEW

24.0 2.0 8.0 421 KB

Adds a service worker to Magento2 to enable PWA features

License: Open Software License 3.0

PHP 52.55% HTML 38.48% JavaScript 7.46% Less 1.50%

magento2-pwa's Introduction

Monsoon PWA

Adds icons, a web manifest file and a service-worker file to make magento 2 a PWA.

Installation

composer require monsoonconsulting/magento2-pwa

Main Features

Supports Magento Blank and Luma as well as Hyvä based themes. ⚠️ Hyvä is recommended to ensure fast performance.
Makes Magento Installable as a PWA.
A CMS Page can be configured for an offline page.
Add to Home screen prompt
Enable/Disable Offline Google Analytics.
Utilises the Browser's Cache API.
Service worker lifecycle management.

Configuration

To configure the module go to Stores > Configuration > Monsoon > PWA.

Offline Page

In Stores > Configuration > Monsoon > PWA select the page you wish to use as your offline notification page. Alternatively use the default one provided by this module.

Customisation

In your Magento theme, override the images and PWA app details found in:

Monsoon/Pwa/view/frontend/web/images/favicons
Monsoon/Pwa/view/frontend/web/manifest.icon

For generating the correct icons there are useful tools such as a favicon generator and maskable icon editor.

Configure Service Worker

Most PWA features can be adjusted/added in the service-worker file.

Simply override Monsoon_Pwa/view/frontend/templates/service-worker.js.phtml in your theme to customise.
OR
To extend add your custom JavaScript to a PHTML file and add it to the service worker via Magento's LayoutXML in, by extending the serviceworker_index_js.xml file to include your code.

magento2-pwa's People

Contributors

Stargazers

Watchers

Forkers

gjportegies wigman grimlink coresh rossmc slackerzz onlinebizsoft-magento2 practice-code

magento2-pwa's Issues

Should separate JS to a JS module

Is your feature request related to a problem? Please describe.
You are having JS generated directly on a template file here
https://github.com/monsoonconsulting/magento2-pwa/blob/master/view/frontend/templates/service-worker.js.phtml
This is not Magento/RequireJS way and it can cause a little performance issue on loading because it can't be cached, can't be delayed,....

Describe the solution you'd like
JS should be done in a separated JS file
Magento configuration can be generated and pass to the JS initial script

"Add to Home Screen" button Close or Minimize option

Is your feature request related to a problem? Please describe.
When customers browse the store the "Add to home screen" button is there on every page - annoying anyone that don't want to install the app (and taking up screen space).

Describe the solution you'd like
A "close" option for the "Add to Home Screen" button (or maybe a toggle down option or something) would be super helpful for them. Also, with a cookie so it remembers that they closed the button

Thank you!

Add preload feature

Is it possible to have service worker automatically preload link on the pages and save to cache then when navigate we can load next page from cache instantly without waiting?

Installability: Page does not work offline

Hello,

First want to say much appreciation of you bringing this to us Magento users. It was a cinch to install and the PWA does indeed work. Not sure why the major complicated hassle required with the "PWA Studio" (creating a separate theme, installing things like node, etc. etc.) when all that is required really is a service worker.

Unless, my issue stems from this not being the "PWA Studio" in which case will be disappointing to say the least (as I can't figure out PWA studio and don't have time to).

My issue: as the title states, in Chrome DevTools under the Application tab it says "Installability: Page does not work offline". I resolved a few other errors like id missing (just added to the manifest.json file) and changing the "any maskable" to just "maskable" per web.dev suggestions. But the page not working offline error is stumping me. I have all settings to cache in the Magento admin (Cache Static Assets: Yes, Cache Media Assets: Yes, Cache Google Fonts: Yes. I left "Enable Skip Waiting" set to no, and "Enable clients.claim" set to no).

Is there any particular step needed to make it work offline? I don't get the little "Add to home" banner popup in the mobile browser (though clicking the three dots then clicking "Install" does work) nor do I get the little "Install" icon in the desktop chrome URL bar that normally appears if the PWA works properly. Also if I disable network/wifi on my phone, the PWA does not work - it says offline. For the "Offline page" I chose my homepage.

Any help with this would be super appreciated. And thanks again for bringing this as an alternative to the PWA Studio.